CODEWITHSUNDEEP
javascriptformssencha-touchextjssencha-touch-2
michele
michele

Reputation: 26598

Sencha-touch 2 - Form inside a tab panel

I am a newbie Sencha user. I would code a tab-panel and put inside each table a form. I try to define mainForm var and put in 2-tab, but if I click on 2-tab button I have returned a blank panel....

What I am doing wrong? Thank you.

    //<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/[email protected]',
        114: 'resources/icons/[email protected]',
        144: 'resources/icons/[email protected]'
    },

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

Upvotes: 0

Views: 5479

Answers (1)

Saurabh Gokhale
Saurabh Gokhale

Reputation: 46425

You are doing it incorrectly.

You are nesting that mainForm inside the items[] array. It should not be the case.

Instead, create each item separately and add to the items array of TabPanel.

Demo : -

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

Output : enter image description here

Upvotes: 2

Related Questions