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

18 Dec 2009, 6:46 AM

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.


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);
// switch/case for type
Ext.getCmp('lunch').add(theContainer u want);


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