View Full Version : Dynamic tab question

28 Jul 2013, 7:25 AM

There is a viewport with border layout in my app. A navigation tree in the west and a tab panel in center region.

And several panels or grids will be added to center tab panel when user clicks tree node.

For examples:

If user clicks tree node 1, panel 1, panel 2, grid 1 and grid 2 will be added to tab.
If user clicks tree node 2, panel 2, panel 3, panel 4, grid 2 and grid 3 will be added.
and so on.

I can handle this requirement by using hard code, but there is a lot of tree nodes and many panels / grids will be added to tab according to different tree nodes. So hard code is a terrible and stupid solution.

How to handle this case if you meet this requirement?

Please show the details code for me. Thanks.

west tree

Ext.define('navigation', {
extend: 'Ext.tree.Panel',

alias: 'widget.navigation',
title: 'Navigation',
rootVisible: false,
root: {
expanded: true,
children: [
{text: 'node 1', leaf: true},
{text: 'node 2', leaf: true},
{text: 'node 3', leaf: true}
listeners: {
itemClick: function(view, record) {
var c = this.ownerCt.child('#center-tab');

\\ If use hard code , it should be:
switch (record.get('text')) {
case 'node 1':
var p1 = Ext.create('panel_1');
var p2 = Ext.create('panel_2');
var g1 = Ext.create('grid_1');
.............................. \\ maybe more than 10 components will be added to tabs

c.add(p1); c.add(p2).........
case 'node 2':
var p2 = Ext.create('panel_2');
var p3 = Ext.create('panel_3);
var g2 = Ext.create('grid_2');
c.add(p2); c.add(p3)............




Ext.onReady(function () {
Ext.create('Ext.container.Viewport', {
layout: 'border',
items: [{
region: 'west',
xtype: 'navigation',
width: 150
}, {
region: 'center',
xtype: 'tabpanel',
itemId: 'center-tab'

28 Jul 2013, 11:42 AM
Without *really* knowing what you're trying to accomplish, it seems like the easiest way to accomplish what you're trying to do would be to include the class name or xtype (depending on how your app is constructed) in each node's data, and then introspect that in your controller method.

But depending on the complexity and requirements of the components you're trying to add, I'm not sure a good ol' switch statement is necessarily terrible or stupid...it all depends on what you need your application to do.

28 Jul 2013, 5:17 PM
Sorry for my poor english.

I mean many different components will be added to tab panel according to the node user clicks.

How to set a relationship for each node and their own components?

Use a array to store the relationship, or store them to database? Thanks.