ExtJS 动态添加标签

Question

大家！

我正在使用 ExtJS 创建一个应用程序，并且我已经定义了一个选项卡面板。我还获得了一个包含所有项目的树形面板菜单以及每个项目的类。我想要实现的是，当我单击一个菜单项时，它会自动向选项卡面板添加一个新选项卡，但会根据 parentNode 的名称更改标题。但是，当我单击例如主页按钮时，它会添加两个新选项卡，其中一个具有正确配置的标题，但没有任何内容（http://tinypic.com/r/2whmo2d/5），另一个没有任何标题但内容，其他所有内容都配置为类定义文件(http://tinypic.com/r/105thyb/5)。我怎样才能获得一个带有标题和内容的标签？

感谢您的任何回答。

菜单 JSON 示例：

{
    "children": [
    {
        "text": "Home",
        "leaf": true,
        "dbName": "home"
    },
    {
        "text": "Sveatlo",
        "expanded": false,
        "leaf": false,
        "dbName": "sveatlo",
        "children": [
            {
                "text": "Vydané faktúry",
                "leaf": true,
                "dbName": "vydane-faktury"
            },
            {
                "text": "Prijaté faktúry",
                "leaf": true,
                "dbName": "prijate-faktury"
            }
        ]
    },
    {
        "text": "Hájočka",
        "expanded": false,
        "leaf": false,
        "dbName": "hajocka",
        "children": [
            {
                "text": "Vydané faktúry",
                "leaf": true,
                "dbName": "vydane-faktury"
            },
            {
                "text": "Prijaté faktúry",
                "leaf": true,
                "dbName": "prijate-faktury"
            }
        ]
    }
    ],
    "success": true
}

添加新标签的代码（来自主控制器）：

setMenuItem: function(record){
    var dbName = record.get('dbName');
    var classname;
    if(record.isLeaf()){
        classname = 'Fleximanager.view.pages.' + Ext.String.createVarName(dbName);
    } else {
        classname = 'Fleximanager.view.pages.CorpMain';
    }
    var tabPanel = Ext.getCmp('flexitabs');
    var tabId = dbName + 'tab'
    var tabIndex = tabPanel.items.findIndex('id', tabId)


    if(tabIndex != -1){
        tabPanel.setActiveTab(tabIndex);
    } else {
        if(record.isLeaf() && dbName != 'home'){
            tabPanel.add(Ext.create(classname),{
                title: record.parentNode.get('text') + ' - ' + record.get('text')
            });
        } else {
            tabPanel.add(Ext.create(classname),{
                title: record.get('text')
            });
        }
        tabPanel.setActiveTab(tabId);
    }
}

我的标签面板：

Ext.define('Fleximanager.view.main.TabPanel', {
    extend: 'Ext.tab.Panel',
    alias: 'widget.flexitabs',
    id: 'flexitabs',

    layout: {
        type: 'fit',
    },
    width: '100%',
    height: '100%',

    items: [{
        title: 'Start',
        closable: true,
        layout: 'vbox',
        id: 'starttab',
        items: [{
            xtype: 'panel',
            border: 5,
            html: 'Statistics',
            listeners: {
                click: {
                    element: 'el',
                    fn: function(){
                        Ext.getCmp('statsMenu').expand(true);
                    }
                }
            }
        },{
            xtype: 'panel',
            border: 5,
            html: 'Contacts',
            listeners: {
                click: {
                    element: 'el',
                    fn: function(){
                        Ext.getCmp('contactsMenu').expand(true);
                    }
                }
            }
        },{
            xtype: 'panel',
            border: 5,
            html: 'Calendar',
            listeners: {
                click: {
                    element: 'el',
                    fn: function(){
                        Ext.getCmp('calendarMenu').expand(true);
                    }
                }
            }
        }]
    }]
});

例如我的菜单项之一的定义：

Ext.define('Fleximanager.view.pages.home', {
    extend: 'Ext.panel.Panel',
    xtype: 'hometab',
    id: 'hometab',

    closable: true,
    layout: 'vbox',
    items: [{
        xtype: 'panel',
        html: 'HOME TAB'
    }]
});

Answer 1

您在将选项卡添加到面板的代码中有问题。试试这个：

if (record.isLeaf() && dbName != 'home') {
    tabPanel.add(Ext.create(classname, {
        title: record.parentNode.get('text') + ' - ' + record.get('text')
    }));
} else {
    tabPanel.add(Ext.create(classname, {
        title: record.get('text')
    }));
}

在您的代码中，您添加了 2 个选项卡 - 一个从类名创建，一个只有标题。 IMO 您应该将标题应用于从类名创建的选项卡，这就是为什么它应该作为 Ext.create 的第二个参数。