Question

大家好！

我正在使用ExtJS创建一个应用程序，我已经定义了一个tabpanel。我还得到一个treepanel菜单，其中包含所有项目和每个项目的类。我想要实现的是当我单击一个菜单项时，它会自动向tabpanel添加一个新选项卡，但是根据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个选项卡 - 一个从classname创建，另一个只有title。 IMO你应该将标题应用于从classname创建的标签，这就是为什么它应该作为Ext.create的第二个参数。

ExtJS动态添加标签

1 个答案: