PDA

View Full Version : Use a TreeStore as menu



blade226
13 Feb 2012, 2:32 AM
Hello,

i build a small Site (Viewport). In west is a treepanel und in center a tabpanel. Now i want to click on a part of the treepanel and a new tab should be open.
I searched for a solution in sencha examples, but i don't get it right. I have asked the question before, but the answer was not the right solution.

Code:

var west = Ext.create ("xwest",{
region: "west",
items : [ {
xtype : "panel",
region : "west",
width : 200,
items :[

{
xtype : "treepanel",
store: treestore
}]

}]
});

var mitte = Ext.create ("xmitte",{
region: "center",
items : [{
xtype : "tabpanel",
id : 'tabs',
activeTab: 0,
items : [

{
title : "Diagramm",
height : "100%",
width : "100%",
closable: true,
items: [diagr]

},
{
title : "Daten",
closable: true,
items: [artikelGrid]
}
]
}


]
});

For Example:
Click on: Diagramm -> a tab named "Diagramm" with a specific content opens. The root directory of the treepanel may not open a tab.

Please: I need help

THX

Romick
13 Feb 2012, 4:10 AM
Hi!

If you want somebody help you please write clearly what you want. Give up full (not full, but working example to see your problem), but you give only peace of code. Where is "xwest" defunition? Where is treeStore? Please remove all unneccesary component and leave only code which clearly shows your problem and wich people can just pust and it works (with mistakes but at least show smth.)

friend
13 Feb 2012, 7:25 AM
Here's a functional code sample which (I hope) should get you headed in the right direction. Note that I did everything in-line for simplicity and used a block of static JSON for the TreeStore's data:



<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Tree Menu and Tab Panel Test</title>
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css">

<script type="text/javascript" src="extjs/ext-all-debug-w-comments.js"></script>
<script type="text/javascript">
Ext.onReady(function() {

// TreeStore with static data, for simplicity.
var treeStore = Ext.create('Ext.data.TreeStore', {
root: {
expanded: true,
children: [{
"text": "Admin",
"id": "branchAdmin",
"iconCls": "folder",
"leaf": false,
"expanded": true,
"children": [{
"text": "Users &amp; Roles",
"id": "tabUsers",
"iconCls": "leaf",
"leaf": true,
"expanded": false,
}]
},{
"text": "Maintenance",
"id": "branchMaint",
"iconCls": "folder",
"leaf": false,
"expanded": true,
"children": [{
"text": "Diagram",
"id": "tabDiagram",
"iconCls": "leaf",
"leaf": true,
"expanded": false,
},{
"text": "Services",
"id": "tabServices",
"iconCls": "leaf",
"leaf": true,
"expanded": false,
}]
},{
"text": "Utilities",
"id": "branchUtil",
"iconCls": "folder",
"leaf": false,
"expanded": true,
"children": [{
"text": "User Profile",
"id": "tabUserProfile",
"iconCls": "leaf",
"leaf": true,
"expanded": false,
}]
}]
}
});


// Tree/Menu panel.
var treeMenu = Ext.create('Ext.tree.Panel', {
region: 'west',
collapsible: true,
// in-line listener handles tree itemclick events.
listeners: {
itemclick: function(view, record, item, index, evt, eOpts) {

// get the click tree node's text and ID attribute values.
var nodeText = record.get('text');
var tabId = record.get('id');

// if the ID starts with 'branch', then you clicked on a tree branch, instead of a leaf.
if (tabId.toLowerCase().substr(0, 6) == 'branch') {
Ext.Msg.alert('Tree Branch Clicked', 'You clicked on tree branch ' + nodeText);
return;
}

// get a reference to the target Tab Panel.
var tabPanel = Ext.ComponentQuery.query('viewport tabpanel')[0];

// does the tab already exist? Note the use of the '#' symbol to indicate
// your looking for an object with the specified itemId.
var tab = tabPanel.child('#' + tabId);

// if tab not already present, create it and add to tab panel.
if (tab == null) {
tab = Ext.create('Ext.panel.Panel', {
html: nodeText + ' Content Here',
itemId: tabId,
title: nodeText
});
tabPanel.add(tab);
}

// set the tab as active/on-top.
tabPanel.setActiveTab(tab);
}
},
store: treeStore,
width: 146
});

var tabPanel = Ext.create('Ext.tab.Panel', {
region: 'center',
activeItem: 0,
items: [{
xtype: 'panel',
html: 'Diagram content here',
itemId: 'tabDiagram',
title: 'Diagram'
}]
});

Ext.create('Ext.container.Viewport', {
layout: 'border',
items: [treeMenu, tabPanel]
});

});

</script>

</head>
<body>
</body>
</html>

blade226
15 Feb 2012, 1:39 AM
Thanks. This Variation works wonderfull!