PDA

View Full Version : tree as a menu



lormitto
15 Feb 2010, 5:55 AM
Hi,

Could you please explain how to turn tree menu to kind of menu changing what contains other part of layout?

For instance, layout is divided into west part and center part. I've got tree menu in west part of page. I would like to change center part after clicking on any of links in tree menu.

Is there any tutorial which would help me resolve this matter?

Thank you in advance.

umit
15 Feb 2010, 6:17 AM
you can use ajax:

put your tree into ajax.js and just load ajax.js in the panel you want.
Dont forget to clear the previous panel.

lormitto
15 Feb 2010, 6:20 AM
you can use ajax:

put your tree into ajax.js and just load ajax.js in the panel you want.
Dont forget to clear the previous panel.


I am not sure if I understand.

I would like to keep tree menu on left side (west panel). Clicking on particular item in this tree I would like to change right part of side (center panel).

Ok. Now I know that I have to clear center panel befor loading new data. However I am not able to take advantage of tree to build menu.

json creating tree:

[{
text:'',
iconCls:'',
expanded: true,
children:[
{
text:'2',
id:'1',
iconCls:'user',
leaf:true
},{
text:'2',
id:'2',
iconCls:'pass',
leaf:true
},
{
text:'3',
id:'3',
leaf:true,
iconCls:''

}
]
}]

and


tree.on('click', function(n){
var sn = this.selModel.selNode || {};


if(n.id=='1')
{
//i want to change what is in panel which id is "center"

}

umit
15 Feb 2010, 6:37 AM
Hi!

Ok i misunderstood you, i thought you wanna move the tree from panel to panel.

i programmed something similar.

i made a main file, where i have the main panel.

then i have lots of little javascript files, which i load on click.

with the loadForm function i load js file:


function loadForm(formname) {

var tabPanel = Ext.ComponentMgr.get('openforms');

var tab = tabPanel.findById(formname);

if (tab==null) {
Ext.Ajax.request({
url: "extjsapp/"+formname+'.js',
success: function(response, opts) { openForm(response, opts, formname) },
failure: function(response, opts) {
alert('Ajax failed, Status='+response.status);
}
}
);
}
else {
tab.focus().show();
}
}

function openForm(response, opts, formname) {
var tabPanel = Ext.ComponentMgr.get('openforms');

var tab = tabPanel.findById(formname);//i make it with tabs

if (tab==null) {
var form=eval(response.responseText);
tabPanel.add(form).show();
}
else {
tab.focus().show();
}
}

and in the json tree:
i have entries like:
{text : "Text", id : 2002, leaf : true, cls : "folder", href: "javascript:loadForm('FormExample')"}

umit
15 Feb 2010, 6:39 AM
Hi!

Ok i misunderstood you, i thought you wanna move the tree from panel to panel.

i programmed something similar.

i made a main file, where i have the main panel.

then i have lots of little javascript files, which i load on click.

with the loadForm function i load js file:


function loadForm(formname) {

var tabPanel = Ext.ComponentMgr.get('openforms');

var tab = tabPanel.findById(formname);

if (tab==null) {
Ext.Ajax.request({
url: "extjsapp/"+formname+'.js',
success: function(response, opts) { openForm(response, opts, formname) },
failure: function(response, opts) {
alert('Ajax failed, Status='+response.status);
}
}
);
}
else {
tab.focus().show();
}
}

function openForm(response, opts, formname) {
var tabPanel = Ext.ComponentMgr.get('openforms');

var tab = tabPanel.findById(formname);//i make it with tabs

if (tab==null) {
var form=eval(response.responseText);
tabPanel.add(form).show();
}
else {
tab.focus().show();
}
}

and in the json tree:
i have entries like:
{text : "Text", id : 2002, leaf : true, cls : "folder", href: "javascript:loadForm('FormExample')"}

lormitto
15 Feb 2010, 6:49 AM
I will test it asap.
However I wonder if I could use not only tabPanel,
I will let myself ask for advise if I've more problems with that ok?

umit
15 Feb 2010, 6:54 AM
ok
of corse you can make a global var tab panel.
you can ask me if you have problems, my tab is already working