在 ExtJs 4.1 树面板中通过 id 或 name 查找节点

Posted 2023-02-26

【中文标题】在 ExtJs 4.1 树面板中通过 id 或 name 查找节点

【英文标题】：Finding a node by id or name in ExtJs 4.1 tree panel

【发布时间】：2013-12-23 13:27:32

【问题描述】：

我正在使用 ExtJs 4.1 树形面板。该模型有 4 个字段。我需要通过“名称”字段搜索节点，然后我想更新返回节点的属性之一。实现这一目标的最佳方法是什么？

我总是可以得到根节点，然后使用下面的代码。

                    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
                      
                    );

但这是搜索节点的最佳方式吗？

实际的树形面板

    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】：

我们可以使用findChild 方法 - 它以属性名称和需要搜索的值作为参数。

查看以下链接以获得答案：Answer