如何在tabpanel onclick中創建選項卡？

Question

我在網格中有一個actioncolumn。我在點擊這個按鈕後打開一個窗口，但是現在我們想要在Tabpanel而不是窗口中打開一個新選項卡。這就是我要當有人點擊actionpanel生成標籤：

Ext.define('MyApp.view.MyTabPanel2', { 
extend: 'Ext.tab.Panel', 
alias: 'widget.mytabpanel2', 

closable: true, 
title: 'Report {name}', 
activeTab: 1, 

initComponent: function() { 
    var me = this; 

    Ext.applyIf(me, { 
     dockedItems: [ 
      { 
       xtype: 'toolbar', 
       dock: 'top', 
       items: [ 
        { 
         xtype: 'textfield', 
         fieldLabel: 'Reference', 
         labelAlign: 'top' 
        }, 
        { 
         xtype: 'datefield', 
         fieldLabel: 'From', 
         labelAlign: 'top' 
        }, 
        { 
         xtype: 'datefield', 
         fieldLabel: 'To', 
         labelAlign: 'top' 
        }, 
        { 
         xtype: 'tbfill' 
        }, 
        { 
         xtype: 'button', 
         text: 'Open report' 
        }, 
        { 
         xtype: 'button', 
         text: 'Save report' 
        }, 
        { 
         xtype: 'button', 
         text: 'Export report' 
        }, 
        { 
         xtype: 'button', 
         text: 'Refresh data' 
        } 
       ] 
      } 
     ], 
     items: [ 
      { 
       xtype: 'gridpanel', 
       title: 'Grid', 
       forceFit: true, 
       store: 'resultStore', 
       columns: [ 
        { 
         xtype: 'gridcolumn', 
         dataIndex: 'ccuDesignation', 
         text: 'CCU Designation' 
        }, 
        { 
         xtype: 'gridcolumn', 
         dataIndex: 'carrierName', 
         text: 'Carrier Name' 
        }, 
        { 
         xtype: 'gridcolumn', 
         dataIndex: 'dataPackageName', 
         text: 'Data package name' 
        }, 
        { 
         xtype: 'gridcolumn', 
         dataIndex: 'bytesRx', 
         text: 'bytesRX' 
        }, 
        { 
         xtype: 'gridcolumn', 
         dataIndex: 'bytesTx', 
         text: 'bytesTX' 
        } 
       ], 
       viewConfig: { 

       } 
      }, 
      { 
       xtype: 'panel', 
       title: 'Chart', 
       dockedItems: [ 
        { 
         xtype: 'chart', 
         height: 250, 
         animate: true, 
         insetPadding: 20, 
         store: 'resultStore', 
         dock: 'top', 
         axes: [ 
          { 
           type: 'Category', 
           fields: [ 
            'ccuDesignation' 
           ], 
           position: 'bottom', 
           title: 'CCU Designation' 
          }, 
          { 
           type: 'Numeric', 
           fields: [ 
            'bytesTx' 
           ], 
           position: 'left', 
           title: 'Bytes' 
          }, 
          { 
           type: 'Numeric', 
           fields: [ 
            'bytesRx' 
           ], 
           position: 'left', 
           title: 'Bytes' 
          } 
         ], 
         series: [ 
          { 
           type: 'line', 
           xField: 'x', 
           yField: [ 
            'bytesTx' 
           ], 
           smooth: 3 
          }, 
          { 
           type: 'line', 
           xField: 'x', 
           yField: [ 
            'bytesRx' 
           ], 
           smooth: 3 
          } 
         ], 
         legend: { 

         } 
        } 
       ] 
      } 
     ] 
    }); 

    me.callParent(arguments); 
} 
}); 

我在煎茶閱讀：

// tab generation code 
var index = 0; 
while(index < 3){ 
    addTab(index % 2); 
} 

function addTab (closable) { 
    ++index; 
    tabs.add({ 
     title: 'New Tab ' + index, 
     iconCls: 'tabs', 
     html: 'Tab Body ' + index + '<br/><br/>' + Ext.example.bogusMarkup, 
     closable: !!closable 
    }).show(); 
} 

Ext.createWidget('button', { 
    renderTo: 'addButtonCt', 
    text: 'Add Closable Tab', 
    handler: function() { 
     addTab(true); 
    }, 
    iconCls:'new-tab' 
}); 

Ext.createWidget('button', { 
    renderTo: 'addButtonCt', 
    text: 'Add Unclosable Tab', 
    handler: function() { 
     addTab(false); 
    }, 
    iconCls:'new-tab', 
    style: 'margin-left: 8px;' 
}); 

但是我沒有在我的腳本的變種標籤。所以我怎樣才能加上這個標籤：

Ext.define('MyApp.view.MyViewport', { 
extend: 'Ext.container.Viewport', 

layout: { 
    type: 'border' 
}, 

initComponent: function() { 
    var me = this; 

    Ext.applyIf(me, { 
     items: [ 
      { 
       xtype: 'tabpanel', 
       id: 'tabs', 
       activeTab: 1, 
       region: 'center', 
       items: [ 
        { 
         xtype: 'gridpanel', 
         title: 'Reports', 
         forceFit: true, 
         store: 'ReportsStore', 
         columns: [ 
          { 
           xtype: 'gridcolumn', 
           dataIndex: 'Name', 
           text: 'Name' 
          }, 
          { 
           xtype: 'gridcolumn', 
           dataIndex: 'Type', 
           text: 'Type' 
          }, 
          { 
           xtype: 'gridcolumn', 
           dataIndex: 'Description', 
           text: 'Description' 
          }, 
          { 
           xtype: 'actioncolumn', 
           dataIndex: 'queryFields', 
           items: [ 
            { 
             handler: function(view, rowIndex, colIndex, item, e) { 
              addTab; 
              alert('clicked'); 
             }, 
             altText: 'Open report', 
             icon: 'img/report-arrow.png', 
             tooltip: 'Open report' 
            } 
           ] 
          } 
         ], 
         viewConfig: { 

         }, 
         dockedItems: [ 
          { 
           xtype: 'toolbar', 
           dock: 'bottom', 
           items: [ 
            { 
             xtype: 'tbfill' 
            }, 
            { 
             xtype: 'button', 
             iconCls: 'addReport', 
             text: 'Add report', 
             listeners: { 
              click: { 
               fn: me.onButtonClick, 
               scope: me 
              } 
             } 
            } 
           ] 
          } 
         ] 
        } 
       ] 
      } 
     ] 
    }); 

    me.callParent(arguments); 
}, 

onButtonClick: function(button, e, options) { 
    Ext.create('MyApp.view.addReport').show(); 
} 

}); 
var tabs = Ext.getCmp('tabs'); 

function addTab (closable) { 
alert('yes'); 
tabs.add(Ext.create('MyApp.view.MyTabPanel2')); 
} 

我該怎麼做？我與extjs設計師合作2

Answer 1

在上面顯示的第一個視圖中，您正在創建另一個tabpanel而不是單個選項卡。如果您嘗試將其插入到您在視口中定義的Tabpanel中，那麼您將在另一個Tabpanel內部擁有一個Tabpanel。我不認爲這就是你想要做的。

您可以將上面的第一個視圖創建爲包含網格面板的Ext.tab.Tab，或者只是將其創建爲網格面板本身，並在您的add方法調用中包含選項卡配置選項。要回答你在引用tabpanel時沒有將其定義爲變量的問題：你應該給它一個id配置（例如id: 'tabs'），然後你可以使用Ext.getCmp('tabs')。例如：

// a piece of your viewport config 
Ext.applyIf(me, { 
    items: [ 
     { 
      xtype: 'tabpanel', 
      activeTab: 1, 
      region: 'center', 
      id: 'tabs', // <-- include this config 
      // other configs... 

添加標籤然後可以做這樣的：

// get a reference to the tab panel 
var tabs = Ext.getCmp('tabs'); 

// if you create the view as a gridpanel you could do it like this 
tabs.add({ 
    title: sometitle, 
    iconCls: someicon, 
    closable: yayOrNay, 
    items: [Ext.create('MyApp.view.MyGridPanel')] 
}); 

// OR if you create the view as an Ext.tab.Tab which already contains the gridpanel 
tabs.add(Ext.create('MyApp.view.MyTab')); 

Answer 2

閱讀和使用下面的代碼：

function allExpenseTypeReport(){ 
 
    var reportByExpenseType=Ext.getCmp("reportByExpenseType"); 
 
    if(reportByExpenseType==null){ 
 
    \t reportByExpenseType = new Ext.tm.reports.ExpenseTypeReport({ 
 
     title:WtfGlobal.getLocaleText("ec.reportbyexpensetype"), 
 
     layout:'fit' , 
 
     closable: true, 
 
     iconCls:'pwnd tabreportsWrap', 
 
     id:"reportByExpenseType" 
 
    }); 
 
     Ext.getCmp('as').add(reportByExpenseType); 
 
    } 
 
     
 
    Ext.getCmp("as").setActiveTab(Wtf.getCmp("reportByExpenseType")); 
 
    reportByExpenseType.doLayout(); 
 
} 
 

 

 

 

 

 

 

 
Define Here: 
 

 
Ext.tm.reports.ExpenseTypeReport = function(config){ 
 
    Ext.apply(this, config); 
 
    Ext.tm.reports.ExpenseTypeReport.superclass.constructor.call(this, config); 
 
    
 
    Define your Code Here: 
 
};