Wizard Form Layout in Sencha Touch

[jtdiala]

Hi Folks, I would like to know how to create a wizard form layout in sencha touch, calling each xtype per step with next and previous button. BTW, I have the code below for testing but it's not working. Thank you again for you help!

Ext.define('XX.view.TransactionMain',{
    extend: 'Ext.Container',
    xtype: 'transmain',
    requires: [
        'XX.view.TransactionGeneralInfo',
        'XX.view.TransactionPropertyInfo'
    ],
    config: {
        title: 'Test',
        navigationBar: {
            hidden: true
        },
        layout: {
            type: 'card',
            animation: {
                duration: 200,
                easing: 'ease-out',
                type: 'slide',
                direction: 'left'
            }
        },
        items: [{
            title: 'Search',
            layout: 'fit',
            items: [{
                xtype: 'formpanel',
                scrollable: {
                    direction: 'vertical',
                    directionLock: true,
                    indicators: false
                },
                defaults: {
                    margin: 5
                },
                items: [{
                    xtype: 'transgeninfo',
                    flex: 1
                },{
                    xtype: 'propertyinfo',
                    flex: 1
                },{
                    xtype: 'fieldset',
                    items: [{
                        xtype: 'button',
                        text: 'View',
                        ui: 'confirm',
                        itemId: 'buttonView'
                    }]
                }]
            }]
        }]
    }
});

[mitchellsimoens]

A "wizard" layout should be simple to setup. A container (container, panel, form, etc) can use a card layout and have a toolbar with next/prev buttons to navigate. On next, add a new item to the container with setActiveItem and such.

[jtdiala]

Hi Sir Mitchell, Thank you very much for your help. I just did mine like this:

Ext.define('XX.view.TransactionMain',{
    extend: 'Ext.Container',
    xtype: 'transmain',
    alias: 'widget.transmain',
    requires: [
        //'XX.view.TransactionGeneralInfo'
    ],
    config: {
        title: 'Transaction Main',
        navigationBar: {
            hidden: true
        },
        layout: {
            type: 'card',
            animation: {
                duration: 200,
                easing: 'ease-out',
                type: 'slide'//,
                //direction: 'left'
            }
        },
        activeItem: 0,
        fullscreen: true,
        items: [{
            title: 'Test',
            layout: 'fit',
            items: [{
                xtype: 'container',
                scrollable: {
                    direction: 'vertical',
                    directionLock: true,
                    indicators: false
                },
                defaults: {
                    margin: 5
                },
                items: [{
                    xtype: 'panel',
                    items: [{
                        xtype: 'transgeninfo',
                        height: 350
                    },{
                        xtype: 'fieldset',
                        items: [{
                            xtype: 'button',
                            text: 'Step 2',
                            ui: 'confirm',
                            itemId: 'buttonNext'
                        }]
                    }]
                }]
            }]
        },{
            xtype: 'panel',
            items: [{
                xtype: 'transpropdetails1',
                style: 'border: 1px solid red;',
                height: '100%'
            }]
        },{
            xtype: 'panel',
            items: [{
                xtype: 'transsales',
                style: 'border: 1px solid red;',
                height: '100%'
            }]
        },{
            xtype: 'panel',
            items: [{
                xtype: 'translease',
                style: 'border: 1px solid red;',
                height: '100%'
            }]
        },{
            xtype: 'panel',
            items: [{
                xtype: 'transcustomer',
                style: 'border: 1px solid red;',
                height: '100%'
            }]
        },{
            xtype: 'panel',
            items: [{
                xtype: 'transcomm',
                style: 'border: 1px solid red;',
                height: '100%'
            }]
        }]
    }
});

then in controller I call like this:

buttonStep1Tap: function(buttonStep1) { 
console.log('button next clicked'); 
var transPanel = buttonStep1.up('transmain');
 this.getTransmain().setActiveItem(0); }