PDA

View Full Version : Hyperlink in Tree to load other region



jo_Rid
3 Aug 2010, 11:31 PM
Hi all,

I'm very new to Ext so please be kind. i have created simple border layout with a west and central region.the west panel I have the navigation links that should load the corrresponding html page in the central region. How is this done? How are the links created? Can it be done without creating a click event for each url?


this is my code,



Ext.onReady(function(){
var detailEl;
new Ext.Viewport({
layout: 'border',
items: [{
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: 'Menu Option 1',
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',
id:'details-panel'

}]
});
});


Thanks to all in advance

Condor
4 Aug 2010, 12:24 AM
You already have a single click listener for all tree nodes (which I assume are your links?).

Store the url in the node attributes so you can access them in the click listener.

What kind of pages are you planning on loading? Plain HTML fragments or entire pages with css and javascript?

jo_Rid
4 Aug 2010, 4:02 PM
Hi condor,

can you give me the sample code, i want load page( entire pages with css and javascript) on the center region not to new window.

thank's

Condor
4 Aug 2010, 11:29 PM
Each in a new tab or should the center region be replaced?

jo_Rid
4 Aug 2010, 11:53 PM
both, in a new tab or center region. :D

thank's

Condor
5 Aug 2010, 12:15 AM
Give your nodes a 'src' attribute with the url that should be loaded and use:

click: function(node) {
var center = Ext.getCmp('details-panel');
center.add({
title: node.attributes.text,
bodyCfg: {
tag: 'iframe',
src: node.attributes.src
}
});
center.doLayout();
}

jo_Rid
5 Aug 2010, 3:08 AM
hi condor,

can you tell me the complete code, because i really new in extjs and i don't know where i must put the 'src' attribute in code.:D

thank's

Condor
5 Aug 2010, 3:26 AM
{
text: 'Menu Option 1',
leaf: true,
src: 'http://www.google.com'
}

jo_Rid
5 Aug 2010, 6:26 PM
still not work, and i have error message "node is undefined". so this is the completed code



Ext.onReady(function(){
var detailEl;
new Ext.Viewport({
layout: 'border',
items: [{
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: 'Menu Option 1',
leaf: true,
src: 'http://detik.com'
}, {
text: 'Menu Option 2',
leaf: true
}, {
text: 'Menu Option 3',
leaf: true
}]
}),
rootVisible: false,
listeners: {
click: function(n) {
var center = Ext.getCmp('details-panel');
center.add({
title: node.attributes.text,
bodyCfg: {
tag: 'iframe',
src: node.attributes.src
}
});
center.doLayout();
}
}
},
{
region: 'center',
xtype: 'tabpanel',
id:'details-panel'

}]
});
});


can you know the error is?

Condor
5 Aug 2010, 10:18 PM
click: function(node) {
var center = Ext.getCmp('details-panel');
center.add({
title: node.attributes.text,
bodyCfg: {
tag: 'iframe',
src: node.attributes.src
}
});
center.doLayout();
}

jo_Rid
5 Aug 2010, 10:36 PM
Great....it's work.=D>

thank's a lot for your help.:)

jo_Rid
5 Aug 2010, 10:49 PM
in this code, after click the navigation menu. there is a new "tab" in center region, example "Menu Option 1". i can see the target (url in "src" attribute) if i click the "tab" in center region. how to make focus the "tab" after i click the navigation menu.


thank's :D

Condor
5 Aug 2010, 11:16 PM
click: function(node) {
var center = Ext.getCmp('details-panel');
var tab = center.add({
title: node.attributes.text,
bodyCfg: {
tag: 'iframe',
src: node.attributes.src
}
});
center.doLayout();
center.setActiveTab(tab);
}

jo_Rid
5 Aug 2010, 11:24 PM
Excellent..great..it's work.=D>

thank's a lot for all your help ..:)