PDA

View Full Version : adding a tab using a tree panel



Ginger_Conor
1 Aug 2009, 2:00 PM
I need to know how to add a tab when i click on a tree node this is my current source code please help me


<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.0.0/ext-all.js"></script>
<style type="text/css">
html, body {
font:normal 12px verdana;
margin:0;
padding:0;
border:0 none;
overflow:hidden;
height:100%;
}
p {
margin:5px;
}
</style>
</head>
<body><script type="text/javascript">
var viewport = new Ext.Viewport({
layout: 'border',
renderTo: Ext.getBody(),
items: [ new Ext.BoxComponent({
region: 'north',
height: 32,
autoEl: {
tag: 'div',
}
}),{
region: 'west',
collapsible: true,
title: 'Navigation',
xtype: 'treepanel',
width: 200,
autoScroll: true,
split: true,
loader: new Ext.tree.TreeLoader(),
root: new Ext.tree.AsyncTreeNode({
expanded: true,
children: [{
text: 'Instruction Manual',
leaf: false,
children: [{
text: 'Instructions 1',
leaf: true
}, {
text: 'Instructions 2',
leaf: true
}, {
text: 'Instructions 3',
leaf: true
}]
}, {
text: 'Menu Option 2',
leaf: true
}, {
text: 'Menu Option 3',
leaf: true
}]
}),
rootVisible: false,
listeners: {
click: function(n) {
Ext.Msg.alert('Navigation Tree Click', 'You clicked: "' + n.attributes.text + '"');

}
}
}, {
region: 'center',
xtype: 'tabpanel',
activeTab: 0,
id: 'tabpanel',
items: [{
title: 'Manual',
html: 'Center'
}]
}, {
region: 'south',
xtype: 'panel',
title: 'SOUTH',
html: 'South',
height: 64,
collapsible: true,
split: true

}]
})
</script>
<div id="north">
test
</div>
</body>

</html>

Animal
1 Aug 2009, 2:18 PM
Have you read the API docs for TabPanel?

Ginger_Conor
1 Aug 2009, 2:34 PM
i have had a look at the api docs for tabpanel and i have also read the api docs for treepanel, treenode and treenode ui but i am still a little confused

Animal
1 Aug 2009, 2:45 PM
add?

Might be a way to.. I dunno.... add something?

Ginger_Conor
1 Aug 2009, 2:53 PM
like i said in my previous posts i have read the api docs but i am still confused i just want to add a tab to the tabpanel when i click on a link on the tree panel

koko2589
1 Aug 2009, 2:57 PM
here




<html><head> <title></title> <link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" /> <script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="ext-3.0.0/ext-all.js"></script> <style type="text/css"> html, body { font:normal 12px verdana; margin:0; padding:0; border:0 none; overflow:hidden; height:100%; } p { margin:5px; } </style></head><body><script type="text/javascript"> var viewport = new Ext.Viewport({ layout: 'border', renderTo: Ext.getBody(), items: [ new Ext.BoxComponent({ region: 'north', height: 32, autoEl: { tag: 'div', } }),{ region: 'west', collapsible: true, title: 'Navigation', xtype: 'treepanel', width: 200, autoScroll: true, split: true, loader: new Ext.tree.TreeLoader(), root: new Ext.tree.AsyncTreeNode({ expanded: true, children: [{ text: 'Instruction Manual', leaf: false, children: [{ text: 'Instructions 1', leaf: true }, { text: 'Instructions 2', leaf: true, handler: function () { var T = Ext.getCmp('tabpanel'); if (!T.findById('EmpresaActiva')) { T.add({ id: 'EmpresaActiva', title: 'Empresa activa', iconCls: 'iconoEmpresaActivaTab', html: 'bla bla bla', closable: true }); } T.setActiveTab('EmpresaActiva'); } }, { text: 'Instructions 3', leaf: true }] }, { text: 'Menu Option 2', leaf: true }, { text: 'Menu Option 3', leaf: true }] }), rootVisible: false, listeners: { click: function(n) { Ext.Msg.alert('Navigation Tree Click', 'You clicked: "' + n.attributes.text + '"'); } } }, { region: 'center', xtype: 'tabpanel', activeTab: 0, id: 'tabpanel', items: [{ title: 'Manual', html: 'Center'}] }, { region: 'south', xtype: 'panel', title: 'SOUTH', html: 'South', height: 64, collapsible: true, split: true }] }) </script> <div id="north">test</div></body> </html>

koko2589
1 Aug 2009, 3:01 PM
text: 'Instructions 2', leaf: true, handler: function () { var T = Ext.getCmp('tabpanel'); if (!T.findById('EmpresaActiva')) { T.add({ id: 'EmpresaActiva', title: 'Empresa activa', iconCls: 'iconoEmpresaActivaTab', html: 'bla bla bla', closable: true }); } T.setActiveTab('EmpresaActiva'); } }, {

Ginger_Conor
1 Aug 2009, 3:02 PM
thank you for this but i cannot get it to work i have copied and pasted the code but nothing happens when i click on the link

koko2589
1 Aug 2009, 3:13 PM
mayby you need add


T.doLayout();

8-|

koko2589
1 Aug 2009, 3:24 PM
thank you for this but i cannot get it to work i have copied and pasted the code but nothing happens when i click on the link


TRY TO PUT THIS IN tbar see it works ok?


text: 'Instructions 2', leaf: true, handler: function () { var T = Ext.getCmp('tabpanel'); if (!T.findById('EmpresaActiva')) { T.add({ id: 'EmpresaActiva', title: 'Empresa activa', iconCls: 'iconoEmpresaActivaTab', html: 'bla bla bla', closable: true }); } T.setActiveTab('EmpresaActiva'); } }, {

koko2589
1 Aug 2009, 3:27 PM
see here
http://extjs.net/forum/showthread.php?p=309234#post309234
here
http://demo.openphac.com/index.php

Ginger_Conor
1 Aug 2009, 3:29 PM
this does not work

Ginger_Conor
1 Aug 2009, 3:36 PM
i am still struggling

<html>
<head>
<title>Make It Easy</title>
<link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.0.0/ext-all.js"></script>
<style type="text/css">
html, body {
font:normal 12px verdana;
margin:0;
padding:0;
border:0 none;
overflow:hidden;
height:100%;
}
p {
margin:5px;
}
</style>
</head>
<body><script type="text/javascript">
var viewport = new Ext.Viewport({
layout: 'border',
renderTo: Ext.getBody(),
items: [ new Ext.BoxComponent(
//start north region
{
region: 'north',
height: 32,
autoEl: {
tag: 'div',
}
}),
//start west region
{
region: 'west',
collapsible: true,
title: 'Navigation',
xtype: 'treepanel',
width: 200,
autoScroll: true,
split: true,
//start west region tree
loader: new Ext.tree.TreeLoader(),
root: new Ext.tree.AsyncTreeNode({
expanded: true,
children: [{
text: 'Instruction Manual',
leaf: false,
children: [{
text: 'Instructions 1',
leaf: true
}, {
text: 'Instructions 2',
leaf: true

}, {
text: 'Instructions 3',
leaf: true
}]
}, {
text: 'Menu Option 2',
leaf: true
}, {
text: 'Menu Option 3',
leaf: true
}]
}),
rootVisible: false,
listeners: {
click: function(n) {


var Tab = Ext.getCmp('tabpanel'); Tab.add({id: 'testtab', title: 'testtab', html:'<p>testtab</p>', closable: true})

/*Ext.Msg.alert('Navigation Tree Click', 'You clicked: "' + n.attributes.text + '"');

}
}
},
//start center region
{
region: 'center',
xtype: 'tabpanel',
activeTab: 0,
id: 'tabpanel',
items: [{
title: 'Manual',
html: 'Center'
}]
}, {
region: 'south',
xtype: 'panel',
title: 'SOUTH',
html: 'South',
height: 64,
collapsible: true,
split: true

}]
})
</script>
<div id="north">
test
</div>
</body>

</html>
if you look at the highlighted text this is what i have added it open a tab called testtab it open it for every link i click on how can i make it so it only works for a specific link

koko2589
1 Aug 2009, 3:39 PM
look here it work wite menu panel
http://itoto1.com/ext-4.2/examples/desktop/index.html

Ginger_Conor
1 Aug 2009, 3:51 PM
thank you for trying but this does not help me at all .

Animal
1 Aug 2009, 10:26 PM
add a BoxComponent (for example, maybe a Panel) to the TabPanel, then set it as the active tab.

You have obviously not read anything I suggested.

Ginger_Conor
2 Aug 2009, 1:35 AM
this might sound like a stupid question but how to i add a click handler onto a tree node?

Animal
2 Aug 2009, 4:12 AM
Yuo already have one.

listeners

http://extjs.com/deploy/dev/docs/?class=Ext.tree.TreePanel&member=listeners

And then scroll down to see what's passed to the click event handler. It's all there.

Ginger_Conor
2 Aug 2009, 4:23 AM
i know i have the listeners but it open the same tab for every link i click on but i want a different tab to open for each link

Ginger_Conor
2 Aug 2009, 6:00 AM
this is my new code it adds a tab for each node but how can i set the html for each node?

<html>
<head>
<title>Make It Easy</title>
<link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.0.0/ext-all.js"></script>
<style type="text/css">
html, body {
font:normal 12px verdana;
margin:0;
padding:0;
border:0 none;
overflow:hidden;
height:100%;
}
p {
margin:10px;
.page {
background-image:url(Icons/silk/icons/page.png));
}
</style>
</head>
<body><script type="text/javascript">
var viewport = new Ext.Viewport({
layout: 'border',
renderTo: Ext.getBody(),
items: [ new Ext.BoxComponent(
//start north region
{
region: 'north',
height: 32,
autoEl: {
tag: 'div',
}
}),
//start west region
{
region: 'west',
collapsible: true,
title: 'Navigation',
xtype: 'treepanel',
width: 200,
autoScroll: true,
split: true,
//start west region tree
loader: new Ext.tree.TreeLoader(),
root: new Ext.tree.AsyncTreeNode({
expanded: true,
children: [{
text: 'Instruction Manual',
leaf: false,
children: [{
text: 'Instructions 1',
leaf: true
}, {
text: 'Instructions 2',
leaf: true
}, {
text: 'Instructions 3',
leaf: true
}]
}, {
text: 'Menu Option 2',
leaf: true
}, {
text: 'Menu Option 3',
leaf: true
}]
}),
rootVisible: false,
listeners: {
click: function(node) {
var Tab = Ext.getCmp('tabpanel'); if (!Tab.findById(node.id)) Tab.add({id: node.id , title: node.text, html: node.html, closable: true});Tab.setActiveTab(node.id);

}
}
},
//start center region
{
region: 'center',
xtype: 'tabpanel',
activeTab: 0,
id: 'tabpanel',
items: [{
title: 'Manual',
html: '<p>Center</p>'
}]
}, {
region: 'south',
xtype: 'panel',
title: 'SOUTH',
html: '<p>South</p>',
height: 64,
collapsible: true,
split: true

}]
})
</script>
<div id="north">
<p>test</p>
</div>
</body>

</html>

Ginger_Conor
3 Aug 2009, 10:41 AM
I HAVE SOLVED MY PROBLEM I JUST WANT TO SAY THANK YOU TO EVERYONE WHO HAS HELPED ME