PDA

View Full Version : Customized Tree Node Items/ Attributes



speedytangent
7 Jun 2008, 7:22 PM
Hiyee All

Can any Body help me , how to set my own customized Tree Node, when i am getting these elements using php and JSON encoding , and geting that data loaded using a Tree loader in an async Node... but i want there to have customized TreeNode,

Esle This is How i am preparing my JOSN , kindly guide me , how i can add some data in my JSON thats not from Database..

$resultSet = mySQl databse Result


$arr = array();

if (!$resultSet)
//echo '<br>No record found ';
while($obj = mysql_fetch_object($resultSet)) {
$arr[] = $obj;
// i guess this would be the place where i can play with my JSON , but dont know how ?
// echo $obj.Id;
}

mysql_close();

echo json_encode($arr);
?>


Thanx In Advance

para
7 Jun 2008, 8:19 PM
Do it in the JS, not the PHP.

speedytangent
10 Jun 2008, 7:56 AM
Please , Eleborate .... how in JS ...?

speedytangent
10 Jun 2008, 7:57 AM
i am Seriously Stuck with it ?

fangzhouxing
17 Jun 2008, 9:53 PM
When retrieved from server, the json attribute names of node data are not always the same with what ExtJS TreeLoader wanted. For example, this is my data format from server:



[{"is_leaf": true, "tree_code": "1001", "parent_id": 1, "sort_order": 1, "id": 2, "code_level": 2, "name": 'test'}]


How can we map it to ExtJS Treeloader?

My method :

1) add a config item 'nodeConfigFn' to TreeLoader (it is a function):



Ext.override(Ext.tree.TreeLoader,{
processResponse : function(response, node, callback){
var json = response.responseText;
try {
var o = eval("("+json+")");
node.beginUpdate();
for(var i = 0, len = o.length; i < len; i++){
if (this.nodeConfigFn)
var n = this.createNode(this.nodeConfigFn(o[i]));
else
var n = this.createNode(o[i]);
if(n){
node.appendChild(n);
}
}
node.endUpdate();
if(typeof callback == "function"){
callback(this, node);
}
}catch(e){
this.handleFailure(response);
}
}
})


2) use nodeConfigFn as follows:



loader : new Ext.tree.TreeLoader({
requestMethod : 'GET',
dataUrl : '/menus/children',
nodeConfigFn : this.createMyNode
})

..............................................
createMyNode : function(data) {
return {
leaf : data.is_leaf,
id : data.id,
text : data.name,
codeLevel : data.code_level
}
},



As you can see, codeLevel is a custom node attribute added.

wluijk
16 May 2009, 11:31 AM
Ext.override(Ext.tree.TreeLoader,{
processResponse : function(response, node, callback){
var json = response.responseText;
try {
var o = eval("("+json+")");
node.beginUpdate();
for(var i = 0, len = o.length; i < len; i++){
if (this.nodeConfigFn)
var n = this.createNode(this.nodeConfigFn(o[i]));
else
var n = this.createNode(o[i]);
if(n){
node.appendChild(n);
}
}
node.endUpdate();
if(typeof callback == "function"){
callback(this, node);
}
}catch(e){
this.handleFailure(response);
}
}
})

use nodeConfigFn as follows:


loader : new Ext.tree.TreeLoader({
requestMethod : 'GET',
dataUrl : '/menus/children',
nodeConfigFn : this.createMyNode
})

..............................................
createMyNode : function(data) {
return {
leaf : data.is_leaf,
id : data.id,
text : data.name,
codeLevel : data.code_level
}
},



I get the nodeConfigFn not working. Is something changed since you wrote this code?