1. #1
    Ext User
    Join Date
    Jan 2008
    Posts
    10
    Vote Rating
    0
    willson is on a distinguished road

      0  

    Default How to change a node's column value from a column tree?

    How to change a node's column value from a column tree?


    I use the column tree example to build my application, there are two columns, one is 'taskTitle', another is 'percentage', I need to refresh the 'percentage' column value for all nodes frequently. The first idea is to reload the root, because the tree has many childs, it due to a bad looking when reloading. So, I want to know how to change column value except to reload the column tree?

  2. #2
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    92
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


    Try:

    Code:
    node.ui.elNode.childNodes[colIndex].firstChild.innerHTML = 'other text';

  3. #3
    Ext User
    Join Date
    Jan 2008
    Posts
    10
    Vote Rating
    0
    willson is on a distinguished road

      0  

    Default


    Thank you condor, It works!

  4. #4
    Ext User
    Join Date
    Jan 2009
    Posts
    1
    Vote Rating
    0
    milo24x7 is on a distinguished road

      0  

    Default


    Here it is encapsulated in a method on the ColumnTree object -

    Code:
        setColumnText : function(node) {
            var cols = this.columns, c, value;
            var a = node.attributes;
            for (var i = 0; i < cols.length; i++) {
                c = cols[i];
                value = c.renderer ? c.renderer(a[c.dataIndex], node, a) : a[c.dataIndex];
                if (i == 0)
                    node.ui.elNode.childNodes[i].lastChild.innerHTML = ' ' + value;
                else
                    node.ui.elNode.childNodes[i].firstChild.innerHTML = value;
            }
        }
    The method will update all of the columns for a single node in the tree, using the node attributes and renderer functions defined in the column model. You use this method by simply updating the various attributes on your node object and then calling the function like this:

    Code:
    node.getOwnerTree().setColumnText(node);

  5. #5
    Ext User
    Join Date
    Jun 2009
    Posts
    2
    Vote Rating
    0
    Nicoteo31 is on a distinguished road

      0  

    Question


    Hi there,
    I'm using a ColumnTree component.

    To do what I want, I can't use the "dataUrl" config option to load directly the remote JSON.
    I load separately, from an Ext.data.JsonStore, the data I want to construt my ColumnTree.

    Here is my ColumnTree :

    Code:
    var taches = new Ext.tree.ColumnTree({
            autoHeight: true,
            rootVisible: true,
            autoScroll: true,
            title: '',        
            columns: [
                {
                    header: 'Tâches',
                    width: 330,
                    dataIndex: 'libelle'
                },
                {
                    header: 'Charge initiale',
                    width: 100,
                    dataIndex: 'chargeInitiale'
                },
                {
                    header: 'Date début',
                    width: 100,
                    dataIndex: 'dateDebut'
                },
                {
                    header: 'Date fin',
                    width: 100,
                    dataIndex: 'dateFin'
                },
                {
                    header: 'Ordre',
                    width: 100,
                    dataIndex: 'ordre'
                }
            ],
            loader: new Ext.tree.TreeLoader({
                uiProviders: {
                    'col': Ext.tree.ColumnNodeUI
                },
                baseParams: {
                    id: idProjetSelectionne
                }
            }),
            root: new Ext.tree.AsyncTreeNode(),
            enableDD: true
        });
    I tried to use the examples given in this thread, but it doesn't work for me :

    My ColumnTree is named "taches", so I tried :
    Code:
    var node = taches.getNodeById('node1');
    node.ui.childNodes[0].firstChild.innerHTML = 'test';
    node.ui.childNodes[1].firstChild.innerHTML = 'test';
    node.ui.childNodes[2].firstChild.innerHTML = 'test';
    node.ui.childNodes[3].firstChild.innerHTML = 'test';
    The "test" text is appended before the +/- icon to expand/collapse the node, or after the folder/file icon, but only in the first column...

    If I do an alert(taches.colums[0].dataIndex); I get the "dataIndex" config option value specified in my ColumnTree first column, so : "libelle".

    I suppose that to be able to write what I want in the chosen columns, I should do some kind of mix of these elements.

    Thanks in advance for your precious help.

    Nicolas.

  6. #6
    Ext User
    Join Date
    Jun 2009
    Posts
    2
    Vote Rating
    0
    Nicoteo31 is on a distinguished road

      0  

    Default


    Hello,

    Anyone has an idea please ?

    In the ColumnNodeUI.js given in the API Documentation, there is this code which seems to be populating the different columns of each node :

    Code:
    Ext.tree.ColumnNodeUI = Ext.extend(Ext.tree.TreeNodeUI, {
        focus: Ext.emptyFn, // prevent odd scrolling behavior
    
        renderElements : function(n, a, targetNode, bulkRender){
            this.indentMarkup = n.parentNode ? n.parentNode.ui.getChildIndent() : '';
    
            var t = n.getOwnerTree();
            var cols = t.columns;
            var bw = t.borderWidth;
            var c = cols[0];
    
            var buf = [
                 '<li class="x-tree-node"><div ext:tree-node-id="',n.id,'" class="x-tree-node-el x-tree-node-leaf ', a.cls,'">',
                    '<div class="x-tree-col" style="width:',c.width-bw,'px;">',
                        '<span class="x-tree-node-indent">',this.indentMarkup,"</span>",
                        '<img src="', this.emptyIcon, '" class="x-tree-ec-icon x-tree-elbow">',
                        '<img src="', a.icon || this.emptyIcon, '" class="x-tree-node-icon',(a.icon ? " x-tree-node-inline-icon" : ""),(a.iconCls ? " "+a.iconCls : ""),'" unselectable="on">',
                        '<a hidefocus="on" class="x-tree-node-anchor" href="',a.href ? a.href : "#",'" tabIndex="1" ',
                        a.hrefTarget ? ' target="'+a.hrefTarget+'"' : "", '>',
                        '<span unselectable="on">', n.text || (c.renderer ? c.renderer(a[c.dataIndex], n, a) : a[c.dataIndex]),"</span></a>",
                    "</div>"];
             for(var i = 1, len = cols.length; i < len; i++){
                 c = cols[i];
    
                 buf.push('<div class="x-tree-col ',(c.cls?c.cls:''),'" style="width:',c.width-bw,'px;">',
                            '<div class="x-tree-col-text">',(c.renderer ? c.renderer(a[c.dataIndex], n, a) : a[c.dataIndex]),"</div>",
                          "</div>");
             }
             buf.push(
                '<div class="x-clear"></div></div>',
                '<ul class="x-tree-node-ct" style="display:none;"></ul>',
                "</li>");
    
            if(bulkRender !== true && n.nextSibling && n.nextSibling.ui.getEl()){
                this.wrap = Ext.DomHelper.insertHtml("beforeBegin",
                                    n.nextSibling.ui.getEl(), buf.join(""));
            }else{
                this.wrap = Ext.DomHelper.insertHtml("beforeEnd", targetNode, buf.join(""));
            }
    
            this.elNode = this.wrap.childNodes[0];
            this.ctNode = this.wrap.childNodes[1];
            var cs = this.elNode.firstChild.childNodes;
            this.indentNode = cs[0];
            this.ecNode = cs[1];
            this.iconNode = cs[2];
            this.anchor = cs[3];
            this.textNode = cs[3].firstChild;
        }
    });
    In my opinion, this code could be re-used to do what I want : populate the different columns of each node not when the ColumnTree is renderer, but later with a differed method (it would be done in a "data.on('load', function());"). But how to call the "renderElements" method ? And do I have to pass values for the 4 arguments, or are they automatically filled in by the ExtJS core ?

    Thank you.

  7. #7
    Ext User
    Join Date
    Dec 2010
    Posts
    3
    Vote Rating
    0
    swetta is on a distinguished road

      0  

    Default


    Quote Originally Posted by milo24x7 View Post
    Here it is encapsulated in a method on the ColumnTree object -

    Code:
        setColumnText : function(node) {
            var cols = this.columns, c, value;
            var a = node.attributes;
            for (var i = 0; i < cols.length; i++) {
                c = cols[i];
                value = c.renderer ? c.renderer(a[c.dataIndex], node, a) : a[c.dataIndex];
                if (i == 0)
                    node.ui.elNode.childNodes[i].lastChild.innerHTML = ' ' + value;
                else
                    node.ui.elNode.childNodes[i].firstChild.innerHTML = value;
            }
        }
    The method will update all of the columns for a single node in the tree, using the node attributes and renderer functions defined in the column model. You use this method by simply updating the various attributes on your node object and then calling the function like this:

    Code:
    node.getOwnerTree().setColumnText(node);
    thank you so much milo24x7....
    ur solution really helped!!

  8. #8
    Sencha User
    Join Date
    Jul 2012
    Posts
    1
    Vote Rating
    0
    TammyPi2012 is on a distinguished road

      0  

    Default


    node.ui.elNode.childNodes[colIndex].firstChild.innerHTML = 'other text'; It's very useful,Thank you!