ExtJS動態添加標籤

Question

大家好！

我用ExtJS創建了一個應用程序，並且我定義了一個tabpanel。我還會得到一個包含所有項目和每個項目的類的樹形菜單。我試圖達到的是當我點擊一個菜單項時，它會自動添加一個新的選項卡到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); 
    } 
} 

我的一個tabpanel：

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的。國際海事組織你應該將標題應用於從類名創建的標籤，這就是爲什麼它應該作爲Ext.create的第二個參數。