Sencha touch list with json store

juandej18 picture juandej18 · Mar 16, 2011 · Viewed 19.4k times · Source

I have a problem with a store that carries the data in a List, the thing is that the store is doing the load but the List stays in Loading, what I'm doing wrong, thanks

Ext.regModel('Properties', {
             fields: [
                {name: 'idcounty', type: 'string'},
                {name: 'county', type: 'string'}
            ]
        });

        store = new Ext.data.Store({
            model  : 'Properties',
            proxy: {
                type: 'ajax',
                url: 'php/response_grid.php?module=countys',
                reader: {
                    type: 'json',
                    root: 'results',
                    totalCount: 'total'
                }
            },
            autoLoad:true
        });
var listPanel = {
            dockedItems: [
                {
                    title: 'Results',
                    xtype: 'toolbar',
                    ui: 'light',
                    dock: 'top'
                }
            ],
            layout: 'fit',
            scroll: 'vertical',
            items: [
                {
                    xtype: 'list',
                    itemTpl : '{county}',
                    store: store,
                    singleSelect: true,
                    onItemDisclosure: function(record, btn, index){

                    }
                }
            ],
            flex:1
        };

and the json answer from the php

({"total":"67","results":[{"idcounty":"1","county":"Broward"},{"idcounty":"2","county":"Dade"},{"idcounty":"3","county":"Palm Beach"},{"idcounty":"4","county":"Osceola"},{"idcounty":"5","county":"Lake"},{"idcounty":"6","county":"Orange"},{"idcounty":"7","county":"Seminole"},{"idcounty":"8","county":"Volusia"},{"idcounty":"9","county":"Hillsborough"},{"idcounty":"10","county":"Polk"},{"idcounty":"11","county":"Pasco"},{"idcounty":"12","county":"Pinellas"},{"idcounty":"13","county":"Sarasota"},{"idcounty":"14","county":"Manatee"},{"idcounty":"15","county":"Charlotte"},{"idcounty":"16","county":"Alachua"},{"idcounty":"17","county":"Baker"},{"idcounty":"18","county":"Bay"},{"idcounty":"19","county":"Bradford"},{"idcounty":"20","county":"Brevard"},{"idcounty":"21","county":"Calhoun"},{"idcounty":"22","county":"Citrus"},{"idcounty":"23","county":"Clay"},{"idcounty":"24","county":"Collier"},{"idcounty":"25","county":"Columbia"},{"idcounty":"34","county":"Duval"},{"idcounty":"35","county":"Escambia"},{"idcounty":"36","county":"Flagler"},{"idcounty":"37","county":"Franklin"},{"idcounty":"38","county":"Gadsden"},{"idcounty":"39","county":"Gilchrist"},{"idcounty":"40","county":"Glades"},{"idcounty":"41","county":"Gulf"},{"idcounty":"42","county":"Hamilton"},{"idcounty":"43","county":"Hardee"},{"idcounty":"44","county":"Hendry"},{"idcounty":"45","county":"Hernando"},{"idcounty":"46","county":"Highlands"},{"idcounty":"47","county":"Holmes"},{"idcounty":"48","county":"Jackson"},{"idcounty":"49","county":"Jefferson"},{"idcounty":"50","county":"Lafayette"},{"idcounty":"52","county":"Lee"},{"idcounty":"53","county":"Leon"},{"idcounty":"54","county":"Levy"},{"idcounty":"55","county":"Liberty"},{"idcounty":"56","county":"Madison"},{"idcounty":"58","county":"Martin"},{"idcounty":"59","county":"Monroe"},{"idcounty":"60","county":"Nassau"},{"idcounty":"61","county":"Okaloosa"},{"idcounty":"62","county":"Okeechobee"},{"idcounty":"63","county":"Putnam"},{"idcounty":"64","county":"Sumter"},{"idcounty":"65","county":"Taylor"},{"idcounty":"66","county":"Union"},{"idcounty":"67","county":"Wakulla"},{"idcounty":"68","county":"Walton"},{"idcounty":"69","county":"Washington"},{"idcounty":"70","county":"DeSoto"},{"idcounty":"71","county":"IndianRiver"},{"idcounty":"72","county":"SantaRosa"},{"idcounty":"75","county":"St Johns"},{"idcounty":"77","county":"St Lucie"},{"idcounty":"78","county":"Dixie"},{"idcounty":"80","county":"Suwannee"},{"idcounty":"81","county":"Marion"}]})

Answer

ballmw picture ballmw · Mar 17, 2011

I got your example to work but I had to change a few things, I wrapped it in an application just to get to work. Specifically I had to move the model AFTER the Application so that the Store was available.

In the above example you just do:

store = new Ext.data.Store({...

I think you need to do:

var stor = new Ext.data.Store({...

Anyway here is the code I got to work, so your data is good...

Ext.ns("Test", "Test.stores");


Test = new Ext.Application({
  defaultTarget : 'viewport',
  name : 'test',
  icon : 'icon.png',
  glossOnIcon : false,
  tabletStartupScreen : 'tablet_startup.png',
  phoneStartupScreen : 'phone_startup.png',
  launch : function() {
    console.log('begin');

    this.viewport = new Ext.Panel({
      fullscreen : true,
      dockedItems : [ {
        title : 'Results',
        xtype : 'toolbar',
        ui : 'light',
        dock : 'top'
      } ],
      layout : 'fit',
      scroll : 'vertical',
      items : [ {
        xtype : 'list',
        itemTpl : '<span id="{idcounty}">{county}</span>',
        store : Test.stores.Properties,
        singleSelect : true,
        itemSelector : 'span.id',
        onItemDisclosure : function(record, btn, index) {

        }
      } ],
      flex : 1
    });

  }
});

Ext.regModel('Properties', {
  fields : [ {
    name : 'idcounty',
    type : 'string'
  }, {
    name : 'county',
    type : 'string'
  } ]
});

Test.stores.Properties = new Ext.data.Store({
  model : 'Properties',
  proxy : {
    type : 'ajax',
    url : 'test.json',
    reader : {
      type : 'json',
      root : 'results',
      totalCount : 'total'
    }
  },
  autoLoad : true
});