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

Question

我是 Sencha 用户新手。我会编写一个选项卡面板并在每个表中放入一个表单。 我尝试定义 mainForm var 并放入 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'
                }
            ]
        });
    }
});

Answer 1

你的做法是错误的。

您将 mainForm 嵌套在 items[] 数组中。不应该是这样的。

相反，单独创建每个项目并将其添加到 TabPanel 的项目数组中。

演示:-

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

<小时/>

输出: