Как создать вкладку на вкладке вкладок?

Question

У меня есть actioncolumn в сетке. Я использовал, чтобы открыть окно после того, как я нажал на это, но теперь мы хотим открыть новую вкладку в панели вкладок вместо окон. Это вкладка, которую я хочу создать, когда кто-то нажимает на панель действий:

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;'
});

Но в моем скрипте нет вкладок var. Итак, как я могу добавить вкладку к этому:

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

В этом первом представлении, показанном выше, вы создаете другую панель вкладок, а не отдельную вкладку.Если вы попытаетесь вставить это в панель вкладок, которую вы определили в окне просмотра, у вас будет панель вкладок внутри другой панели вкладок.Я не думаю, что это то, что вы пытаетесь сделать.

Вы можете создать этот первый вид выше как Ext.tab.Tab, который содержит панель сетки или просто создать ее как саму панель сетки и включить параметры конфигурации вкладкив вашем add вызове метода.Чтобы ответить на ваш вопрос о ссылках на панель вкладок, когда она не определена как переменная: вам нужно просто указать ей id config (например, 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){
    	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:
};