0

みんな！

ExtJS を使用してアプリケーションを作成しており、タブパネルが定義されています。また、すべてのアイテムと各アイテムのクラスを含むツリーパネル メニューも取得します。私が達成しようとしているのは、メニュー項目をクリックすると、タブパネルに新しいタブが自動的に追加されますが、parentNode の名前に従ってタイトルが変更されることです。ただし、たとえばホームボタンをクリックすると、2 つの新しいタブが追加されます。他のすべては、クラス定義ファイル ( http://tinypic.com/r/105thyb/5 ) のように構成されます。タイトルとコンテンツを含む 1 つのタブを取得するにはどうすればよいですか?

回答ありがとうございます。

メニュー 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);
                    }
                }
            }
        }]
    }]
});

たとえば、私のメニュー項目の 1 つの定義は次のとおりです。

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

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

1 に答える 1

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 つのタブを追加します。1 つはクラス名から作成され、もう 1 つはタイトルのみです。IMO クラス名から作成されたタブにタイトルを適用する必要があるため、 の2番目の引数として使用する必要がありますExt.create。

于 2013-11-10T09:52:03.667 に答える