PDA

View Full Version : looping through the Json data.



hchint
7 Sep 2009, 11:23 AM
I want to create a tab panel after receiving the information from server. I want to loop through the JSON data and use the information from tab panel. I have posted a sample of the code. However, this is not working. Please help...

Ext.onReady(function(){

var store = new Ext.data.GroupingStore({
proxy: new Ext.data.HttpProxy({
url: 'data.php',
method: 'POST'
}),
reader: new Ext.data.JsonReader({
totalProperty: 'total', // total data, see json output
root: 'results'
},
[
'lob'
]),
//sortInfo:{field: 'actname', direction: "ASC"},
groupField: 'lob'
});

// store.load({params:{start: 0, limit: 10}});
store.load();

// render grid
//SimpleListingEditorGrid.render('db-grid');
var tabs2 = new Ext.TabPanel({
renderTo: 'db-grid',
activeTab: 0,
width:'100%',
height:550,
//plain:true,
frame:false,
defaults:{autoScroll: true},
items:[store.results.name[0]


]
});

});

dbassett74
8 Sep 2009, 10:02 AM
You might want to wrap a [code] element around your code if you expect to get any help here...

Jack9
8 Sep 2009, 11:35 AM
First, you are trying to render a TabPanel without any tabs, since you have to assume that the tabpanel will render before the HTTP response. If you dont understand what that meant, you need to stop what you're doing and start focusing on understanding Asynchronous Javascript.

Second, you're using a grouping store. That's for creating a certain kind of grid or gridPanel. I'd suggest a simpler store.


Ext.onReady(function(){

var tabs2 = new Ext.TabPanel({
title:"TestPanel",
activeTab: 0,
width:'100%',
height:550,
frame:false,
defaults:{
autoScroll: true
}
});

var dataStore = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({
url: '/test/data.php',
method: 'POST'
}),
// params:{start: 0, limit: 10},
reader: new Ext.data.JsonReader(
{
totalProperty: 'total', // total data, see json output
root: 'results'
},
[
{name:'lob'}
]
),
listeners:{
load:function(thisDS,records,options){
for(var i=records.length;i--;)
{
console.debug("record:"+records[i].get('lob'));
tabs2.add(
new Ext.Panel({
title:records[i].get('lob')
})
);
tabs2.doLayout();
}
}
}
});
dataStore.load();
tabs2.render("testDiv");
});
Your data.php should return something like:

{
results:
[{
lob:'testLob1'
},{
lob:'testLob2'
}]
}

Mike Robinson
9 Sep 2009, 7:55 AM
Let ExtJS do the work!


Choose an appropriate type of Store.
Make sure that the data being sent in response to a read-request is compatible with JsonReader.
Now... ask the Store to load() and then wait for the event to be fired. When and if it does, now you know that you've got some data and you can simply loop through it.

This is AJAX ... totally asynchronous.

hchint
9 Sep 2009, 2:15 PM
Thanks everyone. My problem is resolved.