0
votes

I am using ExtJs 4.1 tree panel. The model is having 4 fields. I need to search a node by 'Name' field and then I want to update one of the property of the returned node. What is the best way to achieve this?

I can always get the root node and then use following code.

                    var rn = tree .getRootNode();
                    var regex = new RegExp('some value', 'i');
                     rn.findChildBy(function (child) {
                    Ext.onReady(function() {
                    if(child.data.Name == 'XXXX'){
                    //DO soething
                      }
                    });

But is this the best way to search a node?

The actual tree panel

    Ext.QuickTips.init();

    //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'
        }, {
            name: 'done',
            type: 'boolean'
        }]
    });

    var store = Ext.create('Ext.data.TreeStore', {
        model: 'Task',


        proxy: {
            type: 'memory'

        },
        root: {
            "text": ".",
            children: [{
                task: 'First Child',
                duration: 6.5,
                user: 'Tommy Maintz',
                leaf: true,
                iconCls: 'task'

            }, {
                task: 'Testing',
                duration: 2,
                user: 'Core Team',
                iconCls: 'task-folder',
                children: [{
                    task: 'Testing First Child',
                    duration: 6.5,
                    user: 'Tommy',
                    leaf: true,
                    iconCls: 'task'

                }, {
                    task: 'Mac OSX',
                    duration: 0.75,
                    user: 'Tommy Maintz',
                    iconCls: 'task-folder',
                    children: [{
                        task: 'FireFox',
                        duration: 0.25,
                        user: 'Tommy Maintz',
                        iconCls: 'task',
                        leaf: true
                    }, {
                        task: 'Safari',
                        duration: 0.25,
                        user: 'Tommy Maintz',
                        iconCls: 'task',
                        leaf: true
                    }, {
                        task: 'Chrome',
                        duration: 0.25,
                        user: 'Tommy Maintz',
                        iconCls: 'task',
                        leaf: true
                    }]
                }, {
                    task: 'Windows',
                    duration: 3.75,
                    user: 'Darrell Meyer',
                    iconCls: 'task-folder',
                    children: [{
                        task: 'FireFox',
                        duration: 0.25,
                        user: 'Darrell Meyer',
                        iconCls: 'task',
                        leaf: true
                    }, {
                        task: 'Safari',
                        duration: 0.25,
                        user: 'Darrell Meyer',
                        iconCls: 'task',
                        leaf: true
                    }, {
                        task: 'Chrome',
                        duration: 0.25,
                        user: 'Darrell Meyer',
                        iconCls: 'task',
                        leaf: true
                    }, {
                        task: 'Internet Exploder',
                        duration: 3,
                        user: 'Darrell Meyer',
                        iconCls: 'task',
                        leaf: true
                    }]
                }, {
                    task: 'Linux',
                    duration: 0.5,
                    user: 'Aaron Conran',
                    iconCls: 'task-folder',
                    children: [{
                        task: 'FireFox',
                        duration: 0.25,
                        user: 'Aaron Conran',
                        iconCls: 'task',
                        leaf: true
                    }, {
                        task: 'Chrome',
                        duration: 0.25,
                        user: 'Aaron Conran',
                        iconCls: 'task',
                        leaf: true
                    }]
                }]
            }]
        },
        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: 700,
        height: 500,
        renderTo: Ext.getBody(),
        collapsible: true,
        useArrows: true,
        rootVisible: false,
        store: store,
        multiSelect: true,
        singleExpand: false,
        //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
        }]
    });
});
1

1 Answers

0
votes

We can use findChild method - It takes the attribute name & the value that needs to be searched as parameter.

Check following link for answer: Answer