PDA

View Full Version : Why is my gridpanel empty when it loads?



a_arias
29 Nov 2011, 12:13 AM
Hello,

Please forgive the noob question. I'm trying to produce a form panel that contains a grid but when the grid loads it's empty. I see the json response and it is valid. I get no errors in the console and I'm not sure how to debug this.

view:


Ext.define('FashionHelper.view.Brands', {
extend: 'Ext.form.Panel',
alias: 'widget.brandcomp',
id: 'brands-gridform',
frame: true,

items: [{
xtype: 'gridpanel',
store: Ext.data.StoreManager.lookup('brandsStore'),
columns: [{
header: 'Id',
sortable: true,
dataIndex: 'id',
flex: 1
}, {
header: 'Brand',
sortable: true,
dataIndex: 'brand',
flex: 4
}]
}, {
xtype: 'fieldset',
title: 'Brand Details',
defaults: {
width: 240,
labelWidth: 90
},
defaultType: 'textfield',
items: [{
fieldLabel: 'Brand',
name: 'brand'
}]
}],

initComponent: function() {
this.callParent();
}
});


store:


Ext.define('FashionHelper.store.Brands', {
extend: 'Ext.data.Store',
storeId: 'brandsStore',
model: 'FashionHelper.model.Brand',
autoLoad: true,
// autoSync: true,

proxy: {
// format: 'json',
type: 'rest',
api: {
read: 'brands.json',
update: 'brands',
create: 'brands',
destroy: 'brands'
},
reader: {
type: 'json',
root: 'data',
successProperty: 'success'
}
}
});


json response:


{"success":true,"data":[{"id":1,"brand":"Nike","visible":1},{"id":2,"brand":"Levis","visible":1}]}


The application uses a navigation controller to dynamically change the components in a specific container. A click handler removes all components from the container and adds the brandcomp component. I think this may have something to do with the issue.

Navigation controller:


Ext.define('FashionHelper.controller.Navigation', {
extend: 'Ext.app.Controller',

refs: [{
ref: 'navigationView',
selector: 'navigationcomp'
}, {
ref: 'portalView',
selector: 'portalcomp'
}, {
ref: 'brandView',
selector: 'brandcomp'
}, {
ref: 'homeView',
selector: 'homecomp'
}],


init: function(application){
console.log('controller init');
//var me = this;
this.control({
'navigationcomp': {
'gohome':this.goHome,
'gobrand': this.goBrand,
scope: this
}
});
},
goHome: function(link){
console.log('home clicked');
// var homeview = this.getHomeView();
var homeview = Ext.widget('homecomp');
var portalview = this.getPortalView();
portalview.removeAll();
portalview.add(homeview);
},
goBrand: function(link){
console.log('brand clicked');
var brandView = Ext.widget('brandcomp');
var portalview = this.getPortalView();
portalview.removeAll();
portalview.add(brandView);
}
});


The rest of the application code is in the attachment: app.zip. Why is the grid empty when the grid panel loads and how can I fix this?

tvanzoelen
29 Nov 2011, 12:35 AM
First, don't set fields in the Store if you have a model. Take the fields property out of the store.

a_arias
29 Nov 2011, 12:59 AM
I removed that property but it had no effect. The grid is still empty.

a_arias
29 Nov 2011, 2:00 AM
After a bit of messing around, I was able to get it working by changing the store property of the gridpanel items config.

new view:


Ext.define('FashionHelper.view.Brands', {
extend: 'Ext.form.Panel',
alias: 'widget.brandcomp',
id: 'brands-gridform',
frame: true,

items: [{
xtype: 'gridpanel',
title: 'Brand List',
store: 'Brands', // set to namespace name and it works
columns: [{
header: 'Id',
sortable: true,
dataIndex: 'id',
flex: 1
}, {
header: 'Brand',
sortable: true,
dataIndex: 'brand',
flex: 4
}]
}, {
xtype: 'fieldset',
title: 'Brand Details',
defaults: {
width: 240,
labelWidth: 90
},
defaultType: 'textfield',
items: [{
fieldLabel: 'Brand',
name: 'brand'
}]
}],

// initComponent: function() {
// this.callParent();
// }
onRender: function(){
this.callParent(arguments);
console.dir(Ext.data.StoreManager.lookup('Brands')); // this works down here but not in the gridpanel items config
Ext.data.StoreManager.lookup('Brands').load();
}
});