PDA

View Full Version : Dynamically add tabs from grid column on page load



paul.laskar
23 Jul 2010, 7:36 AM
Hello,
I am generating a grid from a real time database using JsonStore. On page load column1 data need to generate tabs dynamically. How can I generate those tabs dynamically?

Thanks,
Paul

meyerovb
23 Jul 2010, 11:16 AM
Let me know if this is unclear:



Ext.setup({ onReady: function () {
var store = new Ext.data.Store({
fields: ['column1'],
listeners: {
datachanged: function () {
//will fire twice until datachanged bug corrected
tabPanel.removeAll();
this.data.each(function (item) {
tabPanel.add({ title: item.column1 });
});
tabPanel.doLayout();
tabPanel.getLayout().setActiveItem(0);
}
}
});

var tabPanel = new Ext.TabPanel({
fullscreen: true,
items: [
{ title: 'tab1', xtype: 'button', text: 'Click me',
handler: function () {
store.loadData([{ column1: 'a' }, { column1: 'b'}]);
}
},
{ html: 'card2', title: 'tab2'}]
});
}});

paul.laskar
23 Jul 2010, 12:03 PM
Thanks!
meyerovb but not able to get the tabs ... but I am thinking of an another approach

store.on('load', function(s,r,o)
{
s.each(function(re)
{
var column1 = re.get('COLUMN1');
doColumn1Tab (column1);
});

meyerovb
23 Jul 2010, 12:08 PM
Are you asking a question? Then please describe what you want to happen post a larger code sample because I don't understand what you want to do in the end with yours.

paul.laskar
23 Jul 2010, 3:02 PM
On page load a grid is populated from a real time database and every time it contains different number of records. Now I have to generate the tabs from first column dynamically and each tabs onclick will generate another screen which will contains a left side accordian panel and right side grid pulling some other real time data.