PDA

View Full Version : set href property in ColumnNodeUI object in tree column



davidzenou
14 Aug 2009, 6:09 AM
Hi everybody ,

I'm a new fan of extjs , and i have a little question :D.

I built a tree column with simple json data and now i want to bind each node with a url (for example first node clicked link to www.google.com , second node clicked link to www.exjs.com).
I saw that ColumnNodeUI object can maipulate a <a> tag with href property.
But i don't see how to wok it.


My actual code display the tree but i don't know how to set each url node (href property) :

/*!
* Ext JS Library 3.0.0
* Copyright(c) 2006-2009 Ext JS, LLC
* [email protected]
* http://www.extjs.com/license
*/
Ext.onReady(function(){
var tree = new Ext.ux.tree.ColumnTree({
width: 300,
height: 300,
rootVisible:false,
autoScroll:true,
title: 'Example Tasks',
renderTo: Ext.getBody(),

columns:[{
header:'Task',
width:330,
dataIndex:'task'
}],

loader: new Ext.tree.TreeLoader({
uiProviders:{
'col': Ext.ux.tree.ColumnNodeUI
}
}),

root: new Ext.tree.AsyncTreeNode({
text: 'Autos',
draggable:false,
id:'source',
children: json
})

});
});



var json = [{
task:'ColumnTree Example',
duration:'3 hours',
user:'',
uiProvider:'col',
cls:'master-task',
iconCls:'task-folder',
children:[{
task:'Abstract rendering in TreeNodeUI',
uiProvider:'col',
leaf:true,
iconCls:'task'
},{
task:'Create TreeNodeUI with column knowledge',
uiProvider:'col',
leaf:true,
iconCls:'task'
},{
task:'Create TreePanel to render and lock headers',
uiProvider:'col',
leaf:true,
iconCls:'task'
},{
task:'Add CSS to make it look fly',
uiProvider:'col',
leaf:true,
iconCls:'task'
},{
task:'Test and make sure it works',
uiProvider:'col',
leaf:true,
iconCls:'task'
}]
},{
task:'Custom Field Example',
uiProvider:'col',
cls:'master-task',
iconCls:'task-folder',
children:[{
task:'Implement "Live Search" on extjs.com from Alex',
uiProvider:'col',
leaf:true,
iconCls:'task'
},{
task:'Extend TwinTrigger',
uiProvider:'col',
leaf:true,
iconCls:'task'
},{
task:'Testing and debugging',
uiProvider:'col',
leaf:true,
iconCls:'task'
}]
},{
task:'Foo Bar Item',
uiProvider:'col',
cls:'master-task',
iconCls:'task-folder',
children:[{
task:'Abstract rendering in TreeNodeUI',
uiProvider:'col',
leaf:true,
iconCls:'task'
},{
task:'Create TreeNodeUI with column knowledge',
uiProvider:'col',
leaf:true,
iconCls:'task'
},{
task:'Create TreePanel to render and lock headers',
uiProvider:'col',
leaf:true,
iconCls:'task'
},{
task:'Add CSS to make it look fly',
uiProvider:'col',
leaf:true,
iconCls:'task'
},{
task:'Test and make sure it works',
uiProvider:'col',
leaf:true,
iconCls:'task'
}]
},{
task:'WTF Item',
uiProvider:'col',
cls:'master-task',
iconCls:'task-folder',
children:[{
task:'Abstract rendering in TreeNodeUI',
uiProvider:'col',
leaf:true,
iconCls:'task'
},{
task:'Create TreeNodeUI with column knowledge',
uiProvider:'col',
leaf:true,
iconCls:'task'
},{
task:'Create TreePanel to render and lock headers',
uiProvider:'col',
leaf:true,
iconCls:'task'
},{
task:'Add CSS to make it look fly',
uiProvider:'col',
leaf:true,
iconCls:'task'
},{
task:'Test and make sure it works',
uiProvider:'col',
leaf:true,
iconCls:'task'
}]
}];

What do i do ? :)

davidzenou
16 Aug 2009, 7:17 PM
When you want to assign href link to a node it's very easy:
In your JSON , you add href property with the url you want
for example in your code for one node you do :


task:'Create TreeNodeUI with column knowledge',
uiProvider:'col',
leaf:true,
iconCls:'task',
href:'http://www.google.fr'

Do the same for others nodes... :))