Results 1 to 2 of 2

Thread: set href property in ColumnNodeUI object in tree column

  1. #1

    Default set href property in ColumnNodeUI object in tree column

    Hi everybody ,

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

    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 ?

  2. #2

    Default Response

    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...

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •