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