extjs card layout
var navHandler = function(direction) {
var card = Ext.getCmp('wizard');
var layout = card.getLayout();
var index = card.items.indexOf(layout.activeItem);
var count = card.items.getCount();
if (direction == -1) {
index--;
if (index < 0) { index = 0; }
}
if (direction == 1) {
index++;
if (index >= count) { index = count - 1; return false; }
}
var nextButton = Ext.getCmp('move-next');
var previousButton = Ext.getCmp('move-prev');
if (index == 0) {
previousButton.setDisabled(true);
} else {
previousButton.setDisabled(false);
}
if (index == count - 1) {
nextButton.setText("完成");
nextButton.setDisabled(true);
} else {
nextButton.setText("下一步");
nextButton.setDisabled(false);
}
layout.setActiveItem(index);
};
new Ext.Viewport({
title:"create_design_project",
layout:'fit',
renderTo:"pd-grid",
items: [{
id: 'wizard',
autoScroll:true,
layout:'card',
activeItem: 0,
defaults:{
border: false
},
bbar:[{
id: 'move-prev',
text: '上一步',
handler: navHandler.createDelegate(this, [-1]),
disabled: true
}, {
id: 'move-next',
text: '下一步',
handler: navHandler.createDelegate(this, [1])
}],
items: [createProjectForm
,{
id: 'card-1',
autoScroll:true,
html: '<h1>hehe</h1><p>second step, total 3 step</p>'
},{
id: 'card-2',
html: '<h1>hehe</h1><br/><p>finish</p>'
}]
},{
region: 'center',
split: true,
border: true
}]
});
});
