PDA

View Full Version : Adding two grids dynamically to a tab-panel



webfriend13
30 May 2012, 1:15 AM
Hi All,

I have a tab panel which have two tabs. I want to add two grids dynamically over the first tab. The grids should apprear one after another. I use Ext.getCmp() to get the tab and then on the tab I use add method to add the grid. This works fine but I can see only one grid. How can I see both the grids?



Ext.define('CustomView', {
extend: 'Ext.panel.Panel',
alias: 'widget.resultview',
id: 'result-panel',
title: 'Results',
layout: { type: 'fit', align: 'stretch' },
items:
[{
xtype: 'tabpanel',
id: 'tabpanel',
activeTab: 0,
border: false,
items: [{
id: 'first-tab',
layout: { type: 'vbox', align: 'stretch' }
},
{
id: 'second-tab',
layout: { type: 'vbox', align: 'stretch' }
}]
}]
});

redraid
30 May 2012, 1:32 AM
First grid overlaps second, add flex: 1 to grids.
//wbr

webfriend13
30 May 2012, 1:56 AM
Hi Redraid,

Thank you for quick reply but I am not sure how adding flex would help.

scottmartin
30 May 2012, 11:06 AM
Something like:




Ext.define('MyGridTop', {
extend: 'Ext.grid.Panel',
xtype: 'mygrid_top',
title: 'Grid Top',
width: 200, // small defaults
height: 200,
columns: columns
});

Ext.define('MyGridBottom', {
extend: 'Ext.grid.Panel',
xtype: 'mygrid_bottom',
title: 'Grid Bottom',
width: 200, // small defaults
height: 200,
columns: columns
});

Ext.onReady(function() {
var items = [{}];

var button1 = new Ext.Button({
text: 'Create Tab',
width: 150,
renderTo: Ext.getBody(),
handler: Ext.Function.bind(addTab, this, [ this.text, 1 ], true)
});

var tabPanel = Ext.createWidget('tabpanel', {
itemId: 'mytabpanel',
renderTo: Ext.getBody(),
resizeTabs: true,
enableTabScroll: true,
width: 600,
height: 500,
defaults: {
autoScroll: true,
bodyPadding: 10
},
items: items
});

function addTab(item,event,text,id){
var tabId = tabPanel.down('#id-'+id);

if (tabId) {
tabPanel.setActiveTab(tabId);
} else {
var tab = tabPanel.add({
title: 'text-'+id,
itemId: 'id-'+id,
//scripts: true,
layout: {
type: 'vbox',
align : 'stretch',
pack : 'start',
},
closeAction: 'close',
closable: true,
border: false,
items: [
{
xtype: 'mygrid_top',
itemId: 'grid-top',
store: storeSmall,
listeners: {
afterlayout: {
scope: this,
single: true,
fn: function() {
var gridT = tab.getComponent('grid-top');
// calculate page size
gridT.setHeight(160); // simulate calculated height from function
}
}
}
//flex: 1
},
{
xtype: 'mygrid_bottom',
itemId: 'grid-bottom',
store: storeLarge,
flex: 1
}
]

});

tabPanel.doLayout();
tabPanel.setActiveTab(tab);
}

}

Ext.create('Ext.Button', {
text: 'Load Stores',
renderTo: Ext.getBody(),
handler: function() {
storeSmall.load();
storeLarge.load();
}
});

});


Regards,
Scott.

webfriend13
30 May 2012, 5:43 PM
Hi Scott,

Thank you for quick reply. I have created the tab at the design time and I am creating the two grids on click of a button. The idea is to provide some place-holder in the tab and then add the grid over the place holders. I don't want to create the tab on the fly (unless thats the only way to add the grid).