Results 1 to 3 of 3

Thread: Wizard Form Layout in Sencha Touch

  1. #1
    Sencha User
    Join Date
    Nov 2014
    Posts
    18

    Default Answered: Wizard Form Layout in Sencha Touch

    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!

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


  2. 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.

  3. #2
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,448
    Answers
    3997

    Default

    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.
    Mitchell Simoens @LikelyMitch

    Check out my GitHub:
    https://github.com/mitchellsimoens

    Posts are my own, not any current, past or future employer's.

  4. #3
    Sencha User
    Join Date
    Nov 2014
    Posts
    18

    Default

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

    Code:
    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:

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

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •