Wizard with sidebar nav example

[johnterran]

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

[aacoro]

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

[twaindev]

This should get the two of you going:

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:

.x-dataview-item {
    margin: 10px;
    padding: 2px 4px;
}

.x-item-hovered {
    background-color: #aaa;
}

.x-item-selected {
    font-weight: bold;
}