PDA

View Full Version : Wizard with sidebar nav example



johnterran
10 Oct 2011, 2:16 PM
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
18 Oct 2011, 2:00 AM
I'm looking for a similar functionality... would be nice if someone could share some code :)

twaindev
23 Oct 2011, 7:15 AM
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;
}