PDA

View Full Version : Dynamically add/remove components inside tab in TabPanel



golemsolutions
9 Jun 2010, 7:56 AM
Hi everyone!

I have this code with a Viewport, and inside this, a Tabpanel. The problem is when i like to add/remove components inside the tabpanel with id "tabCatalog" don't work... i don't understand what is wrong with that code.. please help!



Ext.onReady(function(){

Ext.state.Manager.setProvider(new Ext.state.CookieProvider());

var ListView = new Ext.Panel({
id: 'list-view',
width:'100',
title:'------------ Vista de lista ------------',
height:'100%',
layout: 'fit'
});

var DataView = new Ext.Panel({
id:'images-view',
width:'100',
title: '*********** Prueba DataView ***********',
height: '100%',
layout:'fit',

items: new Ext.DataView({
store: storeProducts,
tpl: tpl,
autoHeight:true,
multiSelect: true,
overClass:'x-view-over',
itemSelector:'div.thumb-wrap',
emptyText: 'No images to display'
})
});

// Toolbar
tbCatalog = [{
xtype: 'buttongroup',
columns: 4,
title: 'Views',
items: [{
text: 'View Options',
scale: 'large',
rowspan: 3,
iconCls: 'view',
iconAlign: 'top',
arrowAlign:'bottom',
menu: [{
text: 'List',
handler: function() {
var tab = Ext.getCmp('MainTabPanel').getComponent('tabCatalog');
var dv = Ext.getCmp('images-view');
var lv = Ext.getCmp('list-view');

tab.remove(lv, false);
tab.add(dv);
tab.doLayout();
}
},{
text: 'Thumbs',
handler: function(){
var tab = Ext.getCmp('MainTabPanel').getComponent('tabCatalog');
var lv = Ext.getCmp('list-view');
console.log(lv);
tab.remove(lv, false);
var dv = Ext.getCmp('images-view');
tab.add(dv);
tab.doLayout();
}
}]
}]
}];

MainTabPanel = new Ext.TabPanel({
id: "MainTabPanel",
border: false,
items: [{
id: 'tabCatalog',
title: 'Catalog',
layout: 'fit',
autoDestroy: false,
items: [ListView],
tbar: tbCatalog
},{
id: 'tabClients',
title: 'Clients',
layout: 'fit'
}],
activeTab: 0
});

new Ext.Viewport({
layout: 'border',
title: 'Layout Browser',
items: [{
xtype: 'box',
region: 'north',
applyTo: 'header',
height: 30
}, {
id: 'Main',
region: 'center',
deferredRender: true,
layoutOnTabChange: true,
enableTabScroll: true,
margins: '2 0 5 5',
border: false,
layout: 'fit',
items: [
MainTabPanel
]
}],
renderTo: Ext.getBody()
});


});

Animal
9 Jun 2010, 9:50 AM
Overnested. Simplify.

Just use ListView as a child of the TabPanel.

Use MainTabPanel as the center region.

golemsolutions
9 Jun 2010, 10:49 AM
Hi Animal!! Thanks for your reply! I modify the code and set the MainTabPanel as center region, but still don't work. :S

I can't see what it's wrong with this code...



Ext.onReady(function(){

Ext.state.Manager.setProvider(new Ext.state.CookieProvider());

var ListView = new Ext.Panel({
id: 'list-view',
width:'100',
title:'------------ Vista de lista ------------',
height:'100%',
layout: 'fit'
});

var DataView = new Ext.Panel({
id:'images-view',
width:'100',
title: '*********** Prueba DataView ***********',
height: '100%',
layout:'fit',

items: new Ext.DataView({
store: storeProducts,
tpl: tpl,
autoHeight:true,
multiSelect: true,
overClass:'x-view-over',
itemSelector:'div.thumb-wrap',
emptyText: 'No images to display'
})
});

// Toolbar
tbCatalog = [{
xtype: 'buttongroup',
columns: 4,
title: 'Views',
items: [{
text: 'View Options',
scale: 'large',
rowspan: 3,
iconCls: 'view',
iconAlign: 'top',
arrowAlign:'bottom',
menu: [{
text: 'List',
handler: function() {
var tab = Ext.getCmp('MainTabPanel').getComponent('tabCatalog');
var dv = Ext.getCmp('images-view');
var lv = Ext.getCmp('list-view');

tab.remove(lv, false);
tab.add(dv);
tab.doLayout();
}
},{
text: 'Thumbs',
handler: function(){
var tab = Ext.getCmp('MainTabPanel').getComponent('tabCatalog');
var lv = Ext.getCmp('list-view');
console.log(lv);
tab.remove(lv, false);
var dv = Ext.getCmp('images-view');
tab.add(dv);
tab.doLayout();
}
}]
}]
}];

MainTabPanel = new Ext.TabPanel({
id: "MainTabPanel",
border: false,
region: 'center',
deferredRender: true,
layout: 'fit',
items: [{
id: 'tabCatalog',
title: 'Catalog',
layout: 'fit',
autoDestroy: false,
items:
[ListView],
tbar: tbCatalog
},{
id: 'tabClients',
title: 'Clients',
layout: 'fit'
}],
activeTab: 0
});

new Ext.Viewport({
layout: 'border',
title: 'Layout Browser',
items: [{
xtype: 'box',
region: 'north',
applyTo: 'header',
height: 30
},
MainTabPanel

],
renderTo: Ext.getBody()
});


});

Animal
9 Jun 2010, 11:10 AM
Simplify.

What doesn't work?

Then create the simplest case for it.

golemsolutions
9 Jun 2010, 12:44 PM
Hi Animal, i try to simplify the code.. but something don't work. The idea of this code is try to switch between the ListView (this component in the future have a grid) and DataView, dynamically but i cannot try to work correctly.

When the user click on the "List" option from the menu, the script should be show the ListView component in the tab "tabCatalog" in the "MainTabPanel" TabPanel component.. the same thing with the DataView component, when the user click on the "Thumbs" option from the menu.

How can i do this??



Ext.onReady(function(){

Ext.state.Manager.setProvider(new Ext.state.CookieProvider());

var ListView = new Ext.Panel({
id: 'list-view',
width:'100',
title:'------------ Vista de lista ------------',
height:'100%',
layout:'fit',
html: 'LIST VIEW'
});

var DataView = new Ext.Panel({
id:'images-view',
width:'100',
title: '*********** Prueba DataView ***********',
height: '100%',
layout:'fit',
html: 'DATA VIEW'
});


// Toolbar
tbCatalog = [{
xtype: 'buttongroup',
columns: 4,
title: 'Views',
items: [{
text: 'View Options',
scale: 'large',
rowspan: 3,
iconCls: 'view',
iconAlign: 'top',
arrowAlign:'bottom',
menu: [{
text: 'List',
handler: function() {
var tab = Ext.getCmp('MainTabPanel');
tab.items.remove(DataView, false);
tab.items.add(ListView);
tab.doLayout();
}
},{
text: 'Thumbs',
handler: function(){
var tab = Ext.getCmp('MainTabPanel');
tab.items.remove(ListView, false);
tab.items.add(DataView);
tab.doLayout();
}
}]
}]
}];


new Ext.Viewport({
layout: 'border',
items: [{
region: 'north',
html: '<h1 class="x-panel-header">Page Title</h1>',
autoHeight: true,
border: false,
margins: '0 0 5 0'
}, {
region: 'center',
xtype: 'tabpanel',
id: 'MainTabPanel',
tbar: tbCatalog,
items: [{
id: 'tabCatalog',
title: 'Catalog',
layout: 'fit',
items: [ListView]
}]
}],
renderTo: Ext.getBody()
});


});

Animal
9 Jun 2010, 1:09 PM
Switch?

Then create an Ext.Container. Use 'card' layout, and put the two things in that.

CardLayout is docummented, you cann switch which one is "on top"

golemsolutions
9 Jun 2010, 3:11 PM
Wow! Animal, you are the best!!

Really the CardLayout was very useful to my problem! Works fine! When the code is finished, this was publish here. Thanks for everything.

;)