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

[JPKramer707]

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

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

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

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

[
{ 

    "RPN" : "K-FPIP-1600-10BS-5",
    "GPN" : 82700246021,
    "PN" : "Flexipet Denuding Pipette"
},
{ 

    "RPN" : "K-FPIP-1600-10BS-5",
    "GPN" : 82700246016,
    "PN" : "Flexipet Denuding Pipette"
}
]

[scottmartin]

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

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

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

Scott.

[JPKramer707]

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

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:

{
    "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"
        }
    ]
}

[vietits]

The problem is that you define the store with 'ProductStore' but lookup it with 'productStore'. Try to fix it as below:

    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()
        });
    }

[JPKramer707]

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!

[vietits]

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'.