PDA

View Full Version : TreeNode, href and ajax



Aur
19 Aug 2008, 7:05 AM
Hello.

I'm using a TreePanel, AsyncRootNode and a json tree loader. All my node have a href attribute, so the user can see a correct url for the mouse over.

I want to open this URL via an Ajax request, so I'm using a listener with a click event with an prototype.js ajax request (to update a div node).

The event is fired, but the browser handle the <a tag created from the href parameter.

I've found a (bad) solution: use something else than href, but doing so I dont have nice url on mouse over.

Is there a way do to so?

Thanks for your answers.

Condor
19 Aug 2008, 7:08 AM
Use:


listeners: {
click: {
fn: functio() {
...
},
stopEvent: true
}
}

or call e.stopEvent().

Aur
19 Aug 2008, 7:20 AM
Use:


listeners: {
click: {
fn: functio() {
...
},
stopEvent: true
}
}or call e.stopEvent().


Thanks for the quick answer.

It's not working, I still have a full reload of the page through the followed link in the <a tag . I assume the <a tag is not handle by Ext event but rather directly from the browser.

Here is my listeners code from the new TreePanel():

listeners:{
click: {
fn: function(node, e){
href = node.attributes["href"];
if (href != undefined) {
new Ajax.Updater('center', href, {asynchronous:true, evalScripts:true, method:'get'});
}
},
stopEvent: true
}
}


and a sample json node:



{
"text": "Ferronier (0)",
"id": "p-5-v-7",
"href": "/professions/5.html",
"leaf":false,
"iconCls": "file",
"children" : [ ] },

Aur
19 Aug 2008, 8:24 AM
Ok, my bad.

Putting a e.stopEvent() juste after the Ajax call make it.

Thank you very much.

chirayubhatt
21 Feb 2011, 5:51 AM
I have a similar problem with response of href.
i want to open in the same viewPort (contentPanel).

Here is my code structure:
// Go ahead and create the TreePanel now so that we can use it below
var treePanel = new Ext.tree.TreePanel({
id: 'tree-panel',
title: 'Administration Menu',
region:'north',
split: true,
height: 300,
minSize: 150,
autoScroll: true,

// tree-specific configs:
rootVisible: false,
lines: false,
singleExpand: true,
useArrows: true,

loader: new Ext.tree.TreeLoader({
//dataUrl:'tree-data.json'
dataUrl:'tree_data/'
}),
listeners:{
click: {
fn: function(node, e){
href = node.attributes["href"];
if (href != undefined) {
new Ajax.Updater('center', href, {asynchronous:true, evalScripts:true, method:'get'});
e.stopEvent();
}
},
stopEvent: true
}
},
root: new Ext.tree.AsyncTreeNode()
});


Here is the json block;

expanded: true,
children:[{
text:'Manage Property Request',
id:'absolute',
leaf:true,
href:'chirayu'

}

Any help will be appriciated

Condor
21 Feb 2011, 6:08 AM
OK, but what exactly is the question?

chirayubhatt
25 Feb 2011, 12:32 AM
I want to update the content panel on click of any node through Ajax,
So if I click on the tree node, relevent url should be called from the same application and content area should be updated.
I have use the example of the browser-layout.js in example folder of extjs 3.3.1.

any other way will work for me not stick to this browser-layout.js but should be within extjs

24857

Condor
25 Feb 2011, 12:57 AM
No idea why you are using Ajax.Updater. Ext can load HTML content into a panel without needing additional classes.

chirayubhatt
25 Feb 2011, 2:42 AM
I am new to the extjs and saw the example folder and thaught this can help me.

can you suggest any exmple how can i implement ExtJs in my application with the above requirement?
OnClick of each tree node, it should fire the ajax request and response should be updated with the content panel.
this response is generated dynamically as per the params passed in ajax request. the response can be datagrid, panel, or static html...