PDA

View Full Version : adding tabs dynamically problem



Alfredogon82
9 Dec 2011, 6:38 AM
Hello!

As you might notice, im a newbie in extjs, i have managed myself to do some stuff, but the truth is that i don't understand certain things.

I have this tree on the left side, and a content panel with a tab Panel, on the right side. Basically what i want is to load different options (calling different components) on the tab Panel when i click on the tree on the left side. Right now, when i click on the first of the options, it displays the components that are related to that option on the content panel. (im sure is not the most elegant way of showing this, but at least for now it works) however, my problem is the fact that the components doesn't seem to load in the right tab, once it loads, even if i change tabs the components stay in the same place.

I have tried using the 'rbac.tabs.doLayout();' after reading some topics here in the forum, with no success.

I really appreciate the help you guys can give me so i can point in the right direction.

Here is my code:



rbac.userPanel = Ext.create('role.formUserRbac');
rbac.grid = Ext.create('role.gridUserRbac');

rbac.tabsShowPanel = Ext.define('mainPanel',{
extend:'Ext.panel.Panel',
border:'false',
initComponent: function() {
this.callParent();
},
items:[rbac.userPanel,rbac.grid]
});

tabsShowPanel = Ext.create('rbac.tabsShowPanel');

function test(nameTab,des){
rbac.addTab(true,nameTab);
console.log(des);
if (des=='users'){
//console.log(rbac.tabs.addDocked(rbac.testPanel));
rbac.tabs.addDocked(tabsShowPanel)
}

}

Ext.define('treeModel', {
extend: 'Ext.data.Model',
fields: [
{mapping: 'id', name: 'id', type: 'string'},
{mapping: 'text', name: 'text', type: 'string'},
{mapping: 'descripcion', name: 'descripcion', type: 'string'},
]
})

rbac.TreeStore = Ext.create('Ext.data.TreeStore', {
proxy: {
type: 'ajax',
url: 'service.php',
extraParams: {
accion:'loadtree'
},
reader: {
type: 'json',
root: 'nodes',
}
},
autoLoad:true,
sorters: [{
property: 'id',
direction: 'ASC'
},{
property: 'id',
direction: 'ASC'
}],
root: {
id: 0,
expanded: true
},
model:'treeModel'
});

rbac.treePanel = Ext.create('Ext.tree.Panel', {
id: 'tree-panel',
title: 'Navegaci\u00f3n',
region:'west',
split: true,
height: 360,
width: 180,
minSize: 150,
rootVisible: false,
autoScroll: true,
collapsible: true,
collapseMode: 'mini',
store: rbac.TreeStore
});

var currentItem;

rbac.tabs = Ext.create('Ext.tab.Panel', {
resizeTabs: true,
enableTabScroll: true,
defaults: {
autoScroll:true,
bodyPadding: 10
},
items: [{
title: 'Men\u00FA Principal',
iconCls: 'tabs',
closable: false
}]
});

rbac.addTab = function (closable,tabName) {
rbac.tabs.add({
title: tabName,
iconCls: 'tabs',
closable: !!closable
}).show();
//rbac.tabs.doLayout();
}

rbac.treePanel.getSelectionModel().on('select', function(selModel, record) {
if (record.get('leaf')) {
var des = record.data.descripcion;
var nameTab = record.data.text;
test(nameTab,des);
}
});

rbac.contentPanel = {
id: 'content-panel',
region: 'center',
layout: 'card',
margins: '2 5 5 0',
activeItem: 0,
border: false,
items: [rbac.tabs],

};

rbac.panel = Ext.create('Ext.Viewport', {
layout: 'border',
title: 'Ext Layout Browser',
items: [{
xtype: 'box',
id: 'header',
region: 'north',
html: '<img src="images/test.png"/>',
height: 70
},{
layout: 'border',
id: 'layout-browser',
region:'center',
border: false,
split:true,
margins: '2 0 5 5',
width: 275,
minSize: 100,
maxSize: 500,
items: [rbac.treePanel, rbac.contentPanel]

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


thanks in advance.

tvanzoelen
9 Dec 2011, 8:49 AM
Its not done to add a gridpanel to the dockedItems. Thats the toolbar of the tabpanel!


First modification



rbac.addTab = function (closable,tabName) {
return rbac.tabs.add({
title: tabName,
iconCls: 'tabs',
closable: !!closable
});

}


second



function test(nameTab,des){
var newTab = rbac.addTab(true,nameTab);
rbac.tabs.setActiveTab(newTab);
if (des=='users'){
console.log(rbac.tabs.addDocked(rbac.testPanel));
newTab.add(tabsShowPanel)
}
}


Better to create a new instance of tabsShowPanel if you add it a second time on a tab. There can be problems if you add the same grid to multiple tabs.

Alfredogon82
9 Dec 2011, 10:36 AM
Hello, and thanks for your time, tvanzoelen.

i'm not trying to add the same grid or the same component to different tabs. My problem is that i want to render the content of the component in just one tab (in this case, the 'users' tab) right now if i click on the node 'users' it displays the component (grid and form) but even if i change of tab it keeps displaying it, if i click on another option from the tree menu it just stays in there. what i really want is to know what do i have to do, so the component renders in just one tab, so i can change from tab to tab and have different content on different tabs.

Please let me know if i explained myself well...

tvanzoelen
9 Dec 2011, 10:46 AM
You added the tabsShowPanel to the dockedItems that is the toolbar. That why you see it constantly.

You did it here
rbac.tabs.addDocked(tabsShowPanel)

Try my solution with a slight modification.

I left
console.log(rbac.tabs.addDocked(rbac.testPanel)); in the code. That would have messed up the thing.

Your code must do something like below I think...




rbac.addTab = function (closable,tabName) {
return rbac.tabs.add({
title: tabName,
iconCls: 'tabs',
closable: !!closable
});

}

function test(nameTab,des){
var newTab = rbac.addTab(true,nameTab);
rbac.tabs.setActiveTab(newTab);
if (des=='users'){
newTab.add(tabsShowPanel)
}
}


You must add tabsShowPanel to the newly created tab. I think thats what you want.

So get the newly created tab and do something like this.


newTab.add(tabsShowPanel)

Alfredogon82
9 Dec 2011, 11:04 AM
tvanzoelen! thanks, is working fine now.

sorry, in your first response, i though you misunderstood me. I wasn't seeing the error.

Again, thanks :)

:))

tvanzoelen
9 Dec 2011, 11:11 AM
you're welcome