单击树节点打开新选项卡

Question

有人可以帮助我吗？

实际上，我已经可以通过 Ext.Msg.alert 在根上的 itemclick 中使用监听器，但我有一个问题，我无法连接 TreeNode 中的单击并打开一个新的选项卡面板.. 谢谢..

这里的我的代码：

Ext.define('User', {
        extend: 'Ext.data.Model',
        fields: ['name']
    });

    var tpanel = new Ext.create('Ext.tree.Panel', {
        height: 500,
        renderTo: Ext.getBody(),
        width: 200,
        region: 'west',
        Title:'Navigation Menu',
        collapseMode: 'undefined/omitted',
        animate: true,
        autoScroll:true,
        buttons: [{text: 'Buton1 '},{text:'Button 2'}],
        columns: [
            {dataIndex: 'name', flex: 1, header: 'Navigation Menu', xtype: 'treecolumn'}
        ],
        store: {
            model: 'User',
            root: {
                name: 'Root',
                expanded:true,
                children: [
                    {
                    name: 'Option 1', 
                    expanded:true,
                    children: 
                        [
                        {name: 'Sub-Option 1', 
                        listeners:{'itemclick':function(n){nsInquiry.callTabMain}},
                        leaf:true},
                        {name:'Sub-Option 2',
                        listeners:{'itemclick':function(){nsInquiry.frmInput}},
                        leaf:true},
                        ],
                    },  
                    {name: 'Option 2',
                    expanded:true,
                        children: [{
                        name:'Sub-Option 3',
                        leaf:true},
                        {name: 'Sub-Option 4',
                        leaf:true}]
                    },

                    {name: 'Option 3',
                    expanded:true,
                        children: [{
                        name:'Sub-Option 5',
                        leaf:true},
                        {name: 'Sub-Option 6',
                        leaf:true}]
                    },

                    {name: 'Option 4',
                    expanded:true,
                        children: [{
                        name:'Sub-Option 7',
                        leaf:true},
                        {name: 'Sub-Option 8',
                        leaf:true}]
                    },

                    {name: 'Option 5',
                    expanded:true,
                        children: [{
                        name:'Sub-Option 9',
                        leaf:true},
                        {name: 'Sub-Option 10',
                        leaf:true}]
                    }
                ]
            }
        },
        viewConfig: {
            plugins: {
                ddGroup: 'user-dd',
                ptype: 'treeviewdragdrop'
            }
        },
    });

以及视口：

Ext.onReady(function () {

    var great= new Ext.create('Ext.container.Viewport', {
    layout: 'border',
    items: [{
        region: 'north',
        html: '<h1 class="x-panel-header">Mohammmad Gavin Renaldi Website</h1>',
        autoHeight: true,
        border: false,
        width:100,
        height:100,
        margins: '0 0 5 0',
        closable:true,

    }, tpanel, {
        region: 'center',
        id:'gavin',
        xtype: 'tabpanel', // TabPanel itself has no title
        activeTab: 0,      // First tab active by default
        items: [{
            title: 'First Menu',
            html: '<div id="detail-compcomm">',
            style:{
                border:'1px solid black'
                },
            closable:true           
        },
        {
            title:'Another Menu',
            closable:true}]
    }]
});
});
Ext.namespace('nsInquiry');

nsInquiry.callTabMain= function(){
    var munculTab= new Ext.Panel({
        title: 'ciba',
        closable:true,
        id:'tab_inquiry',
        bodyStyle:'padding:20px',
        frame:true,
        html:'Ganteng'
        });
        addTabCenter(munculTab);

function addTabCenter(elm){
    var main_tab = Ext.getCmp('gavin');
    if(main_tab.findById(elm.id)){
        main_tab.setActiveTab(elm.id);
        }else{
            var new_tab=main_tab.add(elm);
            main_tab.setActiveTab(new_tab);
            new_tab.doLayout();
            }
            }};

nsInquiry.frmInput=function(){
    var mnuText=new Ext.form.TextField({
        width: 150,
        hideLabel:true,
        labelWidth:0});

    var mnuFrmInput = new Ext.Toolbar({
        defaultText:'Main Menu',
        id:'menu-statusbar',
        items:['->',mnuText,'',{text:'search'}]
        });

    var sbtanggal = new Ext.Toolbar.TextItem('');
        var sbrfm=new Ext.ux.StatusBar({
            id:'sb_input',
            items: [{cls:'x-status-text-panel',
                    text: new Date().format('d F Y')
                    }]
            })
        }