根据给定值动态创建选项卡面板内的选项卡

Question

您好，我刚开始学习Sencha。

我需要在视图中创建一个标签面板，并动态添加标签面板......

可以更改选项卡面板的数量

如果数字设置为2，我们需要创建2个选项卡面板，如果设置为4，我们需要创建4个选项卡面板

有人可以指导我吗？

Answer 1

这是一个example fiddle，可以动态地向标签面板添加新标签。

代码：

Ext.define('myapp.view.Tab', {
    extend: 'Ext.panel.Panel',
    alias: 'widget.mytab',
    html: 'Tab content'
});


Ext.application({
    name : 'myapp',

    launch : function() {
        Ext.create('Ext.tab.Panel', {
            reference: 'tabpanel',
            renderTo: Ext.getBody(),
            items: {
                xtype: 'mytab'
                ,title: 'First tab'
            },
            tbar: [{
                xtype: 'numberfield',
                value: 3
            },{
                text: 'Add tabs'
                ,handler: function(btn) {
                    var tabPanel = btn.up('tabpanel'),
                        numTabs = tabPanel.down('numberfield').getValue(),
                        i;
                    for (i = 1; i <= numTabs; i++) {
                        tabPanel.add({
                            xtype: 'mytab',
                            title: 'Tab #'+i,
                            html: 'Content for tab '+i
                        });
                    }                    
                }
            }]
        });        
    }
});