Javascript Sencha touch 2-选项卡面板内的表单

我是一个新手Sencha用户。我会编写一个选项卡面板，并在每个表中放入一个表单。 我试图定义mainformvar并放入2-tab，但如果单击2-tab按钮，我返回了一个空白面板

我做错了什么？ 多谢各位

    //<debug>
Ext.Loader.setPath({
    'Ext': '../../src'
});
//</debug>

/**
 * This is a simple example that demonstrates the Ext.TabPanel component.
 *
 * It will simply create a Ext.tab.Panel component with three children and add it to the viewport.
 */
Ext.application({
    glossOnIcon: false,
    icon: {
        57: 'resources/icons/icon.png',
        72: 'resources/icons/icon@72.png',
        114: 'resources/icons/icon@2x.png',
        144: 'resources/icons/icon@114.png'
    },

    phoneStartupScreen: 'resources/loading/Homescreen.jpg',
    tabletStartupScreen: 'resources/loading/Homescreen~ipad.jpg',

    //next we require any components we are using in our application.
    requires: [
        'Ext.tab.Panel',
        'Ext.form.*',
        'Ext.field.*',
        'Ext.Button',

        'Ext.data.Store'
    ],

    /**
     * The launch function is called when the browser and the framework is ready
     * for the application to launch.
     *
     * All we are going to do is create a simple tabpanel with 3 items, and add
     * it to the global Ext.Viewport instance.
     */
    launch: function() {
        //we send a config block into the Ext.Viewport.add method which will
        //create our tabpanel
        var mainForm = Ext.create('Ext.form.Panel', {
            fullscreen: true,
            items: [
                {
                    xtype: 'textfield',
                    name : 'name',
                    label: 'Name'
                },
                {
                    xtype: 'emailfield',
                    name : 'email',
                    label: 'Email'
                },
                {
                    xtype: 'passwordfield',
                    name : 'password',
                    label: 'Password'
                }
            ]
        });


        Ext.Viewport.add({
            //first we define the xtype, which is tabpanel for the Tab Panel component
            xtype: 'tabpanel',

            //next we define the items that will appear inside our tab panel
            items: [
                {
                    //each item in a tabpanel requires the title configuration. this is displayed
                    //on the tab for this item
                    title: '1-tab',

                    //next we give it some simple html
                    items: {
                        html: '1',
                        centered: true
                    },

                    //then a custom cls so we can style it
                    cls: 'card1'
                },
                {
                    //title
                    title: '2-tab',

                    //the items html
                    items: [mainForm],

                    //custom cls
                    cls: 'card2'
                },
                {
                    //title
                    title: '3-tabs',

                    //the items html
                    items: {
                        html: '3',
                        centered: true
                    },

                    //custom cls
                    cls: 'card3'
                }
            ]
        });
    }
});

//
Ext.Loader.setPath({
“Ext”：“../../src”
});
//
/**
*这是一个演示Ext.TabPanel组件的简单示例。
*
*它只需创建一个包含三个子项的Ext.tab.Panel组件，并将其添加到视口中。
*/
外部应用程序({
格洛松尼康：错，
图标：{
57:'resources/icons/icon.png'，
72:'资源/图标/icon@72.png',
114:'资源/图标/icon@2x.png',
144:'资源/图标/icon@114.png'
},
phoneStartupScreen:'resources/loading/Homescreen.jpg'，
tabletStartupScreen:“资源/加载/主屏幕~ipad.jpg”，
//接下来，我们需要在应用程序中使用的任何组件。
要求：[
“外部选项卡面板”，
“Ext.form.*”，
“Ext.field.*”，
“外部按钮”，
“Ext.data.Store”
],
/**
*当浏览器和框架准备就绪时，将调用启动函数
*用于启动应用程序。
*
*我们要做的就是创建一个包含3项的简单选项卡面板，然后添加
*将其添加到全局外部视口实例。
*/
启动：函数（）{
//我们将一个配置块发送到Ext.Viewport.add方法，该方法将
//创建我们的选项卡面板
var mainForm=Ext.create（'Ext.form.Panel'{
全屏：对，
项目：[
{
xtype:'textfield'，
姓名：'姓名'，
标签：“名称”
},
{
xtype:'emailfield'，
名称：'电子邮件'，
标签：“电子邮件”
},
{
xtype:'密码字段'，
名称：“密码”，
标签：“密码”
}
]
});
Ext.Viewport.add({
//首先我们定义xtype，它是tabpanel组件的tabpanel
xtype:'tabpanel'，
//接下来，我们定义将出现在选项卡面板中的项目
项目：[
{
//选项卡面板中的每个项目都需要标题配置。这将显示
//在该项的选项卡上
标题：“1-tab”，
//接下来我们给它一些简单的html
项目：{
html:'1'，
对
},
//然后是一个定制的cls，这样我们就可以设计它了
cls:“card1”
},
{
//头衔
标题：“2-tab”，
//这些项目是html
项目：[主表格]，
//自定义cls
cls:“card2”
},
{
//头衔
标题：“3个标签”，
//这些项目是html
项目：{
html:'3'，
对
},
//自定义cls
cls:“card3”
}
]
});
}
});

您做得不对

您将

mainForm

嵌套在

items[]

数组中。事实不应该如此

相反，单独创建每个项并添加到TabPanel的items数组中

演示：-

Ext.Loader.setConfig({
    enabled: true
});

Ext.application({
    name: 'SenchaFiddle',

    launch: function() {
         var mainForm = Ext.create('Ext.form.Panel', {
            fullscreen: true,
            title:'2-tab',
            items: [
                {
                    xtype: 'textfield',
                    name : 'name',
                    label: 'Name'
                },
                {
                    xtype: 'emailfield',
                    name : 'email',
                    label: 'Email'
                },
                {
                    xtype: 'passwordfield',
                    name : 'password',
                    label: 'Password'
                }
            ]
        });

        var htmlForm1 = Ext.create('Ext.form.Panel',{
              title: '1-tab',

              //next we give it some simple html
              items: {
                 html: '1',
                 centered: true
              },

              //then a custom cls so we can style it
              cls: 'card1'
         });

         var htmlForm3 = Ext.create('Ext.form.Panel',{
             title: '3-tab',

              //next we give it some simple html
             items: {
                html: '3',
                centered: true
             },

             //then a custom cls so we can style it
             cls: 'card3'
         });

        Ext.Viewport.add({
            //first we define the xtype, which is tabpanel for the Tab Panel component
            xtype: 'tabpanel',

            //next we define the items that will appear inside our tab panel
            items: [htmlForm1,mainForm,htmlForm3]
        });
    }
});

---

输出：