PDA

View Full Version : How to show content in layout after click tree node



oncom
23 Dec 2012, 11:02 PM
Hello everybody,
i am stuck here.

i have a tree like this

MyTree.js


var store = Ext.create('Ext.data.TreeStore', {
proxy: {
type: 'ajax',
url: 'application/controllers/itemlist.php',
node: 'id'
},
root: {
text: 'Root Node',
id: 'root_node',
expanded: true
}
});


var treePanel = Ext.create('Ext.tree.Panel', {
id: 'tree-panel',
region:'north',
autoHeight: true,
minSize: 150,
rootVisible: false,
border: false,
flex: 3,
store: store
});


var detail = Ext.create('Ext.panel.Panel', {
title: 'Details',
region: 'south',
height: 240,
border: false,
bodyStyle: 'padding: 5px;',
autoScroll: true,
flex: 1,
html: '<p style="margin: 5px;">When you select a layout from the tree, additional details will display here.</p>'
});


Ext.define('AM.view.layout.MyTree', {
extend: 'Ext.container.Container',
alias: 'widget.mytreepanel',
layout: {
type: 'vbox',
align: 'stretch'
},
items: [ treePanel, detail ]
});


the tree is in region 'west', so when i click the node tree, i want to display tab panel in the center.

for code in the tab panel is

MyContent.js


Ext.define('AM.view.layout.MyContent', {
extend: 'Ext.panel.Panel',
alias: 'widget.contentpanel',

activeItem: 0,
layout: {
type: 'card',
deferredRender: true
},
border: false,
region: 'center'
});


how do i make it happen?

mitchellsimoens
26 Dec 2012, 11:23 AM
I see you are using the region config but then using vbox layout. The region config will only work for border layout. You can add/remove items to a center region of a border layout.

oncom
28 Dec 2012, 10:29 AM
thank you a lot, Mitchell. finally fix this problem. :)

miftahsteven
23 Jun 2014, 12:21 AM
can you help me to solve this?..

i have same problem but i using viewport configuration like this.


var store = Ext.create('Ext.data.TreeStore', {
root: {
expanded: true
},
proxy: {
type: 'ajax',
url: 'application/frontend/model/tree-data.json'
}
});


var treePanel = Ext.create('Ext.tree.Panel', {
id: 'tree-panel',
title: 'Main Menu',
region:'north',
split: true,
height: 360,
minSize: 150,
rootVisible: false,
autoScroll: true,
store: store,
listeners: {
itemclick: function(view, record, item, index, evt, eOpts) {
var menuId = record.get('id');
var nodeText = record.get('text');

// if it's a branch, display node text.
if (!record.get('leaf')) {
Ext.Msg.alert('Branch clicked', 'You clicked on tree branch: ' + nodeText);
return;
}

var tabPanel = this.up('viewport').down('tabpanel');

// see if the target tab already exists.
var childTab = tabPanel.child('#' + menuId);

// if not, create it.
if (childTab == null) {
childTab = Ext.create('Ext.panel.Panel', {
xtype: 'panel',
bodyPadding: 5,
html: "",
itemId: menuId,
title: nodeText,
closable: true,
layout: 'border'
});

tabPanel.add(childTab);

}

// set the tab active/visible.
tabPanel.setActiveTab(childTab);
}
},
});


var tabpanels = {
xtype: 'tabpanel',
activeTab: 0, // index or id
items:[{
title: 'Welcome',
margins:'5 5 5 25',
html: '<h1>Welcome in Content Management System AIA-SATU</h1>',
}]
};

var contentPanel = {
id: 'content-panel',
region: 'center', // this is what makes this panel into a region within the containing layout
layout: 'card',

margins: '2 5 5 0',
activeItem: 0,
border: false,
items: tabpanels
};

Ext.create('Ext.Viewport', {
layout: 'border',
title: 'Ext Layout Browser',
items: [{
xtype: 'box',
id: 'header',
region: 'north',
html: '<h1>Content Management System AIA-SATU</h1>',
height: 30
},{
layout: 'border',
id: 'layout-browser',
region:'west',
border: false,
split:true,
margins: '2 0 5 5',
width: 290,
minSize: 100,
maxSize: 500,
items: [treePanel]
},
contentPanel
],
renderTo: Ext.getBody()
});

when i click tree menu, i cant show content in tab panel, which is in center region.

Thanks