1. #1
    Sencha User
    Join Date
    Oct 2011
    Posts
    10
    Vote Rating
    0
    johnterran is on a distinguished road

      0  

    Default Unanswered: Wizard with sidebar nav example

    Unanswered: Wizard with sidebar nav example


    Hi,

    Does anyone have example code for a wizard with sidebar navigation?
    each item in the sidebar references a page of the wizard so the user doesn't have to go thru the page one by one

    Thanks
    John

  2. #2
    Sencha User
    Join Date
    Sep 2010
    Location
    Netherlands
    Posts
    120
    Vote Rating
    4
    Answers
    3
    aacoro is on a distinguished road

      0  

    Default


    I'm looking for a similar functionality... would be nice if someone could share some code

  3. #3
    Ext JS Premium Member twaindev's Avatar
    Join Date
    Sep 2009
    Posts
    223
    Vote Rating
    3
    Answers
    15
    twaindev is on a distinguished road

      0  

    Default Exmaple

    Exmaple


    This should get the two of you going:

    Code:
    Ext.onReady(function() {
    
        Ext.create('Ext.window.Window', {
    
            title: 'Wizard with navigation',
    
            width: 800,
            height: 600,
    
            layout: {
                type: 'hbox',
                align: 'stretch'
            },
    
            items: [
                {
                    xtype: 'dataview',
                    width: 150,
                    style: 'background-color: #eee',
                    itemTpl: '{title}',
                    store: Ext.create('Ext.data.ArrayStore', { fields: ['title'] }),
    
                    trackOver: true,
                    overItemCls: 'x-item-hovered',
    
                    listeners: {
                        itemclick: function(view, record, item, index) {
                            this.up('window').navigate(index);
                        },
                        render: function() {
                            var pages = [];
                            this.ownerCt.down('panel').items.each(function(item) {
                                pages.push([item.title]);
                            });
                            this.store.loadData(pages);
                        },
                        viewready: function() {
                            this.ownerCt.navigate(0);
                        }
                    }
                },
                {
                    xtype: 'panel',
                    border: false,
                    flex: 5,
                    layout: 'card',
                    style: 'background-color: #fff',
                    defaults: {
                        bodyPadding: '10',
                        preventHeader: true
                    },
                    items: [
                        {
                            title: 'Page 1',
                            html: '<h1>This is page 1</h1>'
                        },
                        {
                            title: 'Page 2',
                            html: '<h1>This is page 2</h1>'
                        },
                        {
                            title: 'Page 3',
                            html: '<h1>This is page 3</h1>'
                        },
                        {
                            title: 'Page 4',
                            html: '<h1>This is page 4</h1>'
                        },
                        {
                            title: 'Page 5',
                            html: '<h1>This is page 5</h1>'
                        }
                    ]
                }
            ],
    
            fbar: [
                {
                    id: 'btnPrev',
                    text: 'Previous',
                    handler: function(btn) {
                        btn.up('window').navigate('prev');
                    }
                },
                {
                    id: 'btnNext',
                    text: 'Next',
                    handler: function(btn) {
                        btn.up('window').navigate('next');
                    }
                },
                {
                    id: 'btnFinish',
                    text: 'Finish',
                    handler: function(btn) {
                        btn.up('window').close();
                    }
                }
            ],
    
            navigate: function(to) {
                var dv = this.down('dataview'),
                    layout = this.down('panel').getLayout(),
                    items = layout.getLayoutItems(),
                    idx;
    
                if (Ext.isNumber(to)) {
                    layout.setActiveItem(to);
                } else {
                    layout[to]();
                }
    
                this.down('#btnPrev').setDisabled(!layout.getPrev());
                this.down('#btnNext').setDisabled(!layout.getNext());
                this.down('#btnFinish').setDisabled(layout.getNext());
    
                idx = Ext.Array.indexOf(items, layout.getActiveItem());
    
                dv.select(idx);
            },
    
         }).show();
    
    });
    CSS:
    Code:
    .x-dataview-item {
        margin: 10px;
        padding: 2px 4px;
    }
    
    .x-item-hovered {
        background-color: #aaa;
    }
    
    .x-item-selected {
        font-weight: bold;
    }

Thread Participants: 2

Tags for this Thread