卡布局不适用于表格-Sencha Touch 2

Question

I want to 2 forms, & I want to use card layout, so that when the user submits form1, he is taken to form2. But, when I try to MyApp.container.setActiveItem(2) (using console), it does not move to form2(card2).

    Ext.define('MyApp.view.Forms', {
    extend: 'Ext.Container',
    xtype: 'formsPage',
    id: 'formsForm',

    config: {
        title: 'Patient Registration',
        iconCls: 'user',
        layout:{
            type: 'card'
        },

        items: [
        {
            xtype: 'fieldset',
            title: 'Patient Registration1',
            items: [
                {
                    xtype: 'textfield',
                    label: 'Names',
                    name: 'name'
                },
                {
                    xtype: 'textfield',
                    label: 'City',
                    name: 'city'
                }
            ]
        },
        {
            xtype: 'fieldset',
            title: 'Patient Registration1',
            items: [
                {
                    xtype: 'textfield',
                    label: 'Phone',
                    name: 'phone'
                },
                {
                    xtype: 'textfield',
                    label: 'Country',
                    name: 'conutry'
                }
            ]
        }
    ],  
    constructor:function(config) {
            this.initConfig(config);
            return this;
        }

    }

});

MyApp.container = Ext.create('MyApp.view.Forms', {});

Answer 1

Please note that array items in Sencha Touch 2 are indexed from 0, so if you want to activate second one, it should be something like this:

MyApp.container.setActiveItem(1)

Edited: I've figured it out. You should add another config to your view: fullscreen:true and it should work well :)

Answer 2

Is your form xtype of 'formsPage' custom, I can't seem to find it in the doco? If it's not, that might be contributing to the issue.

The doco also suggests that you don't create the card layout directly, but instead use carousel or tab panel. Maybe use a carousel as your base component, then make each card a separate form? This would make your intentions clear that each card/form is to be independent.

Hope that helps

Answer 3

do the following: extend the carousel

1. extend: 'Ext.Carousel',

change the config section to:

1. config: { title: 'Patient Registration', iconCls: 'user', cls: 'card' ----

guess that should fix it