PDA

View Full Version : How to display JSON store data in Ext.Panel



jackiewkc
18 Dec 2009, 6:46 AM
hi,

I have created a new Panel by:


var hostViewPanel = new Ext.Panel({

id :'view-panel', // see Ext.getCmp() below
title :'Details',
split :true,
width :'100%',
minSize :175,
maxSize :400,
collapsible :true,
margins :'0 0 0 5',
layout : {
type :'anchor',
animate :true
},
items : [ {
title :'lunch',
border: false,
collapsible: true
}, {
title :'dinner',
border: false,
collapsible: true,
iconCls :'settings'
}, {
title :'breakfast',
border: false,
collapsible: true,
iconCls :'settings'
} ]
})

Then I have a JSON store setup as follow:



var store = new Ext.data.JsonStore({
autoDestroy: true,
autoLoad: true,
url: 'details.htm?id=' + id,
storeId: 'store',
idProperty: 'id',
fields: ['type', 'food']
});



the data in the store should look something like this:

{breakfast, bacon}, {breakfast, toast}, {lunch, carrot}, {lunch, mushroom}, {lunch, turkey}, {dinner, chicken}, etc

can someone please advise how can display the data using the Panel created?

Thanks for your help.

Regards,
Jackie

tubamanu
18 Dec 2009, 9:47 AM
first, please use code tags.....

u can add an id to your items u added, for example:


title :'lunch',
id: 'lunch',
border: false,
collapsible: true


then u can walk through your jsonStore and add the items in there. Don't know in which form u will add them, in form as an label ? panel ? grid ? i think a grid can be a good solution.

to get your data out of the store u can use something like this:



for(var a=0;a<store.getCount();a++) {
var row = store.getAt(a);
alert(row.data.type);
alert(row.data.food);
// switch/case for type
Ext.getCmp('lunch').add(theContainer u want);

}

jackiewkc
19 Dec 2009, 12:13 PM
thank you very much, I will definitely try it out.

Regards,
Jackie