PDA

View Full Version : Populating a Grid Panel



alejandroNNU
23 Oct 2013, 12:41 PM
I'm trying to populate a grid panel without using a store, simply putting records in the data config, the data config looks likes this:


data-object
[{ 'name': 'Lisa', "email":"[email protected]", "phone":"555-111-1224" },
{ 'name': 'Bart', "email":"[email protected]", "phone":"555-222-1234" },
{ 'name': 'Homer', "email":"[email protected]", "phone":"555-222-1244" },
{ 'name': 'Marge', "email":"[email protected]", "phone":"555-222-1254" }]


and my grid panel looks likes this:


Ext.define('MyApp.view.MyGridPanel', {
extend: 'Ext.grid.Panel',


height: 250,
width: 400,
title: 'Simpsons',


initComponent: function() {
var me = this;


Ext.applyIf(me, {
data: [
{
name: 'Lisa',
email: '[email protected]',
phone: '555-111-1224'
},
{
name: 'Bart',
email: '[email protected]',
phone: '555-222-1234'
},
{
name: 'Homer',
email: '[email protected]',
phone: '555-222-1244'
},
{
name: 'Marge',
email: '[email protected]',
phone: '555-222-1254'
}
],
columns: [
{
xtype: 'gridcolumn',
dataIndex: 'name',
text: 'Name'
},
{
xtype: 'gridcolumn',
dataIndex: 'email',
text: 'Email',
flex: 1
},
{
xtype: 'gridcolumn',
dataIndex: 'phone',
text: 'Phone'
}
]
});


me.callParent(arguments);
}


});


but when I run it nothing shows up, could someone tell me what I'm doing wrong please? thank you.

aconran
23 Oct 2013, 6:06 PM
data compliments the tpl configuration. You cannot populate a grid like how you've done above. You will need to create a store, put the data configuration there and then bind the grid to that store.