Results 1 to 5 of 5

Thread: How to dynamically add or rename a node to treegrid

  1. #1
    Sencha User
    Join Date
    Jan 2011
    Posts
    85
    Answers
    3

    Default Answered: How to dynamically add or rename a node to treegrid

    Does anyone know how to dynamically add or rename a leaf node to a treegrid. I tried doing it via the store, but that didn't work.

    Using the example below, how you would you dynamically add or rename a leaf node under "remodeling"?

    http://dev.sencha.com/deploy/ext-4.1.0-gpl/examples/tree/treegrid.html


    Below is the example code for the above link.

    Code:
    Ext.require([
        'Ext.data.*',
        'Ext.grid.*',
        'Ext.tree.*'
    ]);
    
    
    Ext.onReady(function() {
        //we want to setup a model and store instead of using dataUrl
        Ext.define('Task', {
            extend: 'Ext.data.Model',
            fields: [
                {name: 'task',     type: 'string'},
                {name: 'user',     type: 'string'},
                {name: 'duration', type: 'string'}
            ]
        });
    
    
        var store = Ext.create('Ext.data.TreeStore', {
            model: 'Task',
            proxy: {
                type: 'ajax',
                //the store will get the content from the .json file
                url: 'treegrid.json'
            },
            folderSort: true
        });
    
    
        //Ext.ux.tree.TreeGrid is no longer a Ux. You can simply use a tree.TreePanel
        var tree = Ext.create('Ext.tree.Panel', {
            title: 'Core Team Projects',
            width: 500,
            height: 300,
            renderTo: Ext.getBody(),
            collapsible: true,
            useArrows: true,
            rootVisible: false,
            store: store,
            multiSelect: true,
            singleExpand: true,
            //the 'columns' property is now 'headers'
            columns: [{
                xtype: 'treecolumn', //this is so we know which column will show the tree
                text: 'Task',
                flex: 2,
                sortable: true,
                dataIndex: 'task'
            },{
                //we must use the templateheader component so we can use a custom tpl
                xtype: 'templatecolumn',
                text: 'Duration',
                flex: 1,
                sortable: true,
                dataIndex: 'duration',
                align: 'center',
                //add in the custom tpl for the rows
                tpl: Ext.create('Ext.XTemplate', '{duration:this.formatHours}', {
                    formatHours: function(v) {
                        if (v < 1) {
                            return Math.round(v * 60) + ' mins';
                        } else if (Math.floor(v) !== v) {
                            var min = v - Math.floor(v);
                            return Math.floor(v) + 'h ' + Math.round(min * 60) + 'm';
                        } else {
                            return v + ' hour' + (v === 1 ? '' : 's');
                        }
                    }
                })
            },{
                text: 'Assigned To',
                flex: 1,
                dataIndex: 'user',
                sortable: true
            }]
        }); 
    });

  2. My mistake .. have a look at:

    Code:
        Ext.create('Ext.Button', {
            text: 'Click me',
            renderTo: Ext.getBody(),
            handler: function() {
                var task = store.getRootNode().findChild('task', 'Remodeling', true);
                if (task) {
                   task.insertChild( 0,{ task:'Manual Entry', duration:0.25, user:'Sencha Support', leaf:true, iconCls:'task' } );
                }
            }
        });
    Scott.

  3. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,410
    Answers
    716

    Default

    Have a look at the following:
    http://jsfiddle.net/molecule/4Vvjz/

    Scott.
    Last edited by scottmartin; 6 Jul 2012 at 5:55 PM. Reason: Wrong version

  4. #3
    Sencha User
    Join Date
    Jan 2011
    Posts
    85
    Answers
    3

    Default

    That only works for a tree. Not a tree panel or a treegrid

  5. #4
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,410
    Answers
    716

    Default

    My mistake .. have a look at:

    Code:
        Ext.create('Ext.Button', {
            text: 'Click me',
            renderTo: Ext.getBody(),
            handler: function() {
                var task = store.getRootNode().findChild('task', 'Remodeling', true);
                if (task) {
                   task.insertChild( 0,{ task:'Manual Entry', duration:0.25, user:'Sencha Support', leaf:true, iconCls:'task' } );
                }
            }
        });
    Scott.

  6. #5
    Sencha User
    Join Date
    Jan 2011
    Posts
    85
    Answers
    3

    Default

    I moved to an ajax proxy based solution. But this looks like it would work. Great job.

    This is the part I couldn't get.


    task.insertChild( 0,{ task:'Manual Entry', duration:0.25, user:'Sencha Support', leaf:true, iconCls:'task' } );

Posting Permissions

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