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
    9,085
    Answers
    675
    Vote Rating
    467
    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