如何在 Sencha Extjs 的树列表的特定节点中触发函数？

Question

我是 Sencha ExtJS 的新手。我想在用户单击大学节点时添加一个选项卡。我应该用什么？我在互联网上搜索了很多，但找不到完全解决我的问题的答案。

 items: [{
    region: 'west',
    width: 200,
    reference: 'treelistContainer',
    layout: {
        type: 'vbox',
        align: 'stretch'
    },
    itemId:'addNewTab',
    border: true,
    scrollable: 'y',
    bufferedRenderer: false,
    animate: true,
    rootVisible: false,

    items: [{
        xtype: 'treelist',      
        reference: 'treelist',
        itemId:'childpanel',
        store: {
                root: {
                    expanded: true,
                    children: [{
                        text: 'Home',
                        iconCls: 'x-fa fa-home',
                        children: [{
                            text: 'Messages',
                            iconCls: 'x-fa fa-inbox',
                            leaf: true
                        }]
                    }, {
                        text: 'Users',
                        iconCls: 'x-fa fa-user',
                        children: [{
                            text: 'Tagged',
                            iconCls: 'x-fa fa-tag',
                            leaf: true
                        }, {
                            text: 'Inactive',
                            iconCls: 'x-fa fa-trash',
                            leaf: true
                        }]
                    }, {
                        text: 'Groups',
                        iconCls: 'x-fa fa-group',
                        leaf: true
                    }, {
                        text: 'Settings',
                        iconCls: 'x-fa fa-wrench',
                        children: [{
                            name:'haseeb',
                            text: 'University',   
                            iconCls: 'x-fa fa-university',
                            leaf: true,
                            itemId: 'bar2', 
                           // cls='mycls'
                        }]
                    }]
                }
            },
  },
      }],

Answer 1

您可以监听树上的itemclick事件并检查点击记录的文本是否为University即record.text，喜欢这个：

     listeners:{
            itemclick:function(me, record, item, index, e, eOpts){
                if(record.data.text==='University'){
                   // your adding tab functionality comes here
                 }
          }
        }

示例代码：

Ext.application({
    name: 'Fiddle',

    launch: function () {
var store = Ext.create('Ext.data.TreeStore', {
   root: {
                    expanded: true,
                    children: [{
                        text: 'Home',
                        iconCls: 'x-fa fa-home',
                        children: [{
                            text: 'Messages',
                            iconCls: 'x-fa fa-inbox',
                            leaf: true
                        }]
                    }, {
                        text: 'Users',
                        iconCls: 'x-fa fa-user',
                        children: [{
                            text: 'Tagged',
                            iconCls: 'x-fa fa-tag',
                            leaf: true
                        }, {
                            text: 'Inactive',
                            iconCls: 'x-fa fa-trash',
                            leaf: true
                        }]
                    }, {
                        text: 'Groups',
                        iconCls: 'x-fa fa-group',
                        leaf: true
                    }, {
                        text: 'Settings',
                        iconCls: 'x-fa fa-wrench',
                        children: [{
                            name:'haseeb',
                            text: 'University',   
                            iconCls: 'x-fa fa-university',
                            leaf: true,
                            itemId: 'bar2', 
                           // cls='mycls'
                        }]
                    }]
                }
});

Ext.create('Ext.tree.Panel', {
    title: 'Simple Tree',
    store: store,
     width: 200,
    rootVisible: false,
    renderTo: Ext.getBody(),
    listeners:{
        itemclick:function(me, record, item, index, e, eOpts){
            if(record.data.text==='University')
                alert('University is clicked');
        }
    }
});

    }
});

<link rel="stylesheet" href="https://cdn.sencha.com/ext/gpl/4.2.1/packages/ext-theme-neptune/build/resources/ext-theme-neptune-all.css"><!-- framework javascript --><script type="text/javascript" src="https://cdn.sencha.com/ext/gpl/4.2.1/ext-all-debug.js"></script><script type="text/javascript" src="https://cdn.sencha.com/ext/gpl/4.2.1/packages/ext-theme-neptune/build/ext-theme-neptune-debug.js"></script>

Answer 2

我看到你在 Modern Toolkit。所以你需要先为treelist找到合适的监听器，documentation

listeners: {
        selectionchange : function(tree, rec) {
            if (rec.data.text === 'University')
            {

                //Call the tab from here
            }
        }
    },

您的代码已更新：

items: [{
region: 'west',
width: 200,
reference: 'treelistContainer',
layout: {
    type: 'vbox',
    align: 'stretch'
},
itemId:'addNewTab',
border: true,
scrollable: 'y',
bufferedRenderer: false,
animate: true,
rootVisible: false,

items: [{
    xtype: 'treelist',      
    reference: 'treelist',
    itemId:'childpanel',

    listeners: {
        selectionchange : function(tree, rec) {
            if (rec.data.text === 'University')
            {
                //Call the tab from here

            }
        }
    },


    store: {
            root: {
                expanded: true,
                children: [{
                    text: 'Home',
                    iconCls: 'x-fa fa-home',
                    children: [{
                        text: 'Messages',
                        iconCls: 'x-fa fa-inbox',
                        leaf: true
                    }]
                }, {
                    text: 'Users',
                    iconCls: 'x-fa fa-user',
                    children: [{
                        text: 'Tagged',
                        iconCls: 'x-fa fa-tag',
                        leaf: true
                    }, {
                        text: 'Inactive',
                        iconCls: 'x-fa fa-trash',
                        leaf: true
                    }]
                }, {
                    text: 'Groups',
                    iconCls: 'x-fa fa-group',
                    leaf: true
                }, {
                    text: 'Settings',
                    iconCls: 'x-fa fa-wrench',
                    children: [{
                        name:'haseeb',
                        text: 'University',   
                        iconCls: 'x-fa fa-university',
                        leaf: true,
                        itemId: 'bar2', 
                       // cls='mycls'
                    }]
                }]
            }
        },},}],

如何在 Sencha Extjs 的树列表的特定节点中触发函数？

How to trigger a function in a specific node on treelist in Sencha Extjs?

javascript

extjs

sencha-architect