1. #1
    Sencha User
    Join Date
    Aug 2012
    Posts
    10
    Vote Rating
    0
    JPKramer707 is on a distinguished road

      0  

    Default Answered: The grid is empty, but the store is filled. What's up with that?

    Answered: The grid is empty, but the store is filled. What's up with that?


    Howdy y'all,

    My grid doesn't want to show what's in my store.

    The store is loading, I can inspect it in the browser and I find a store full of model instances which contain my data. The grid appears, it's just empty.

    Anybody see the problem here?

    Thanks in advance,
    -Kramer

    app.js
    Code:
    Ext.Loader.setConfig({
        enabled: true
    });
    console.log('app.js');
    
    Ext.application({
        requires: ['Ext.container.Viewport'],
        name: 'EPLM',
        appFolder: 'app',
    
        models: [
                 'ProductModel'
        ],
        stores: [
                 'ProductStore'
        ],
        views: [
        ],
        controllers: [
                      'Main'
        ],
        
        initComponent: function() {
            this.log('initComponent');
        },
        
        launch: function() {
            this.log('launch');
            var grid = Ext.create('Ext.grid.Panel', {
                autoRender: true,
                title: 'EPLM Product List',
                store: Ext.data.StoreManager.lookup('productStore'),
                columns: [
                       {text: 'Product Name', dataIndex: 'PN'},
                       {text: 'RPN', dataIndex: 'RPN'},
                       {text: 'GPN', dataIndex: 'GPN'}
                ],
                height: 200,
                width: 400,
                renderTo: Ext.getBody()
            });
        }
    });
    ProductStore
    Code:
    Ext.define('EPLM.store.ProductStore', {
        extend: 'Ext.data.Store',
        storeId: 'productStore',
    
        requires: [
            'EPLM.model.ProductModel'
        ],
        model: 'EPLM.model.ProductModel',
    
        constructor: function(cfg) {
            this.log('Constructing');
            this.log(this);
            var me = this;
            cfg = cfg || {};
            
            me.callParent([Ext.apply({
                autoLoad: true,
                autoSync: true,
                storeId: 'productStore',
                model: 'EPLM.model.ProductModel',
                proxy: {
                    type: 'ajax',
                    url: 'data/Products.json',
                    reader: {
                        type: 'json'
                    }
                }
            }, cfg)]);
        }
    });
    ProductModel
    Code:
    Ext.define('EPLM.model.ProductModel', {
        extend: 'Ext.data.Model',
        belongsTo: 'ProductLine',
        fields: [
             {name: 'GPN', type: 'integer'},
             {name: 'RPN', type: 'string'},
             {name: 'PN', type: 'string'}
        ],
        
        constructor: function() {
            this.callParent(arguments);
            //this.log('Constructed');
            //this.log(this.data);
        }
    });
    Products.json
    Code:
    [
    { 
    
        "RPN" : "K-FPIP-1600-10BS-5",
        "GPN" : 82700246021,
        "PN" : "Flexipet Denuding Pipette"
    },
    { 
    
        "RPN" : "K-FPIP-1600-10BS-5",
        "GPN" : 82700246016,
        "PN" : "Flexipet Denuding Pipette"
    }
    ]

  2. The problem is that you define the store with 'ProductStore' but lookup it with 'productStore'. Try to fix it as below:
    Code:
        launch: function() {
            this.log('launch');
            var grid = Ext.create('Ext.grid.Panel', {
                autoRender: true,
                title: 'EPLM Product List',
    //            store: Ext.data.StoreManager.lookup('productStore'),
                store: Ext.data.StoreManager.lookup('ProductStore'),
                columns: [
                       {text: 'Product Name', dataIndex: 'PN'},
                       {text: 'RPN', dataIndex: 'RPN'},
                       {text: 'GPN', dataIndex: 'GPN'}
                ],
                height: 200,
                width: 400,
                renderTo: Ext.getBody()
            });
        }

  3. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    8,918
    Answers
    655
    Vote Rating
    443
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


    Check the successProperty in your reader. JSON should return true.

    Also, check your root property as well: root: 'data'

    { success: true, data: [{..}]

    Scott.
    Last edited by scottmartin; 18 Sep 2012 at 1:28 PM. Reason: added root info

  4. #3
    Sencha User
    Join Date
    Aug 2012
    Posts
    10
    Vote Rating
    0
    JPKramer707 is on a distinguished road

      0  

    Default Results Unchange

    Results Unchange


    Scott,

    Thank you for your suggestion.

    I believe we made the revisions you offered, but our grid is still empty. See below for our latest code. Is there anything else you might suggest?

    Thanks,
    -Kramer

    Revised ProductStore.js
    Code:
    Ext.define('EPLM.store.ProductStore', {
        extend: 'Ext.data.Store',
        storeId: 'productStore',
    
        requires: [
            'EPLM.model.ProductModel'
        ],
        model: 'EPLM.model.ProductModel',
    
        constructor: function(cfg) {
            this.log('Constructing');
            this.log(this);
            var me = this;
            cfg = cfg || {};
            
            me.callParent([Ext.apply({
                autoLoad: true,
                autoSync: true,
                storeId: 'productStore',
                model: 'EPLM.model.ProductModel',
                proxy: {
                    type: 'ajax',
                    url: 'data/Products.json',
                    reader: {
                        type: 'json',
                        root: 'data'
                    }
                }
            }, cfg)]);
        }
    });
    Revised products.json:
    Code:
    {
        "success": true,
        "data": [
            { 
            
                "RPN" : "K-FPIP-1600-10BS-5",
                "GPN" : 82700246021,
                "PN" : "Flexipet Denuding Pipette"
            },
            { 
            
                "RPN" : "K-FPIP-1600-10BS-5",
                "GPN" : 82700246016,
                "PN" : "Flexipet Denuding Pipette"
            }
        ]
    }

  5. #4
    Sencha - Community Support Team
    Join Date
    Jan 2012
    Posts
    1,376
    Answers
    346
    Vote Rating
    113
    vietits is a name known to all vietits is a name known to all vietits is a name known to all vietits is a name known to all vietits is a name known to all vietits is a name known to all

      0  

    Default


    The problem is that you define the store with 'ProductStore' but lookup it with 'productStore'. Try to fix it as below:
    Code:
        launch: function() {
            this.log('launch');
            var grid = Ext.create('Ext.grid.Panel', {
                autoRender: true,
                title: 'EPLM Product List',
    //            store: Ext.data.StoreManager.lookup('productStore'),
                store: Ext.data.StoreManager.lookup('ProductStore'),
                columns: [
                       {text: 'Product Name', dataIndex: 'PN'},
                       {text: 'RPN', dataIndex: 'RPN'},
                       {text: 'GPN', dataIndex: 'GPN'}
                ],
                height: 200,
                width: 400,
                renderTo: Ext.getBody()
            });
        }

  6. #5
    Sencha User
    Join Date
    Aug 2012
    Posts
    10
    Vote Rating
    0
    JPKramer707 is on a distinguished road

      0  

    Default


    Thanks, vietits. That was indeed the problem. Works now.

    It's confusing, there are so many ways of referring to a component.

    There's...
    • storeId
    • xtype
    • alias
    • name (like EPLM.store.ProductStore)
    Sometimes it's difficult knowing which one I'm expected to use. In this case, looks like I was using storeId when I should have used the last part of the component name.

    Anyway, thanks for the help!

  7. #6
    Sencha - Community Support Team
    Join Date
    Jan 2012
    Posts
    1,376
    Answers
    346
    Vote Rating
    113
    vietits is a name known to all vietits is a name known to all vietits is a name known to all vietits is a name known to all vietits is a name known to all vietits is a name known to all

      0  

    Default


    You use storeId when you want to lookup an existing store. You use alias when you define a store class and then use it as store type when you config a store for a grid for instance. xtype is the same as store type but applied for components only.
    In MVC application, when you config stores : ['ProductStore'] in controller then controller will:
    - Load EPLM.store.ProductStore class definition.
    - Create an instance of EPLM.store.ProductStore with storeId equals to 'ProductStore' regardless storeId you supplied when define EPLM.store.ProductStore. Also, if you config stores: ['EPLM.store.ProductStore'], then the store will be created with storeId equals to 'EPLM.store.ProductStore'.

Thread Participants: 2

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi