Extjs 基于给定值在选项卡面板内动态创建选项卡

嗨，我刚刚开始学习Sencha

我需要在视图中创建一个选项卡面板，并向其中动态添加选项卡面板

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

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

有人能给我指点迷津吗？

这里有一个新的标签，可以动态地将新标签添加到标签面板中

代码：

Ext.define（'myapp.view.Tab'{
扩展：“Ext.panel.panel”，
别名：“widget.mytab”，
html:“选项卡内容”
});
外部应用程序({
名称：“myapp”，
启动：函数（）{
Ext.create（'Ext.tab.Panel'{
参考：“tabpanel”，
renderTo:Ext.getBody（），
项目：{
xtype:“我的标签”
，标题：“第一个选项卡”
},
待定：[{
xtype:'numberfield'，
价值：3
},{
文本：“添加选项卡”
，处理程序：函数（btn）{
var tabPanel=btn.up（'tabPanel'），
numTabs=tabPanel.down（'numberfield'）.getValue（），
我
对于（i=1；i），您只想创建1个选项卡面板。然后您将向其中添加面板。到目前为止您尝试了哪些代码？'tabpanel.add（）'应该是您的记录。
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
                        });
                    }                    
                }
            }]
        });        
    }
});