//这个代码就有点通用性了 var navHandler = function(direction) { 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 btnNext = Ext.getCmp('move-next'); var btnBack = Ext.getCmp('move-prev'); if (index == 0) { btnBack.setDisabled(true); } else { btnBack.setDisabled(false); } if (index == count - 1) { btnNext.setText("完 成"); btnNext.setDisabled(true); } else { btnNext.setText("下一步"); btnNext.setDisabled(false); } layout.setActiveItem(index); }; var card = new Ext.Panel({ width: 200, height: 200, title: '注册向导', layout: 'card', activeItem: 0, bodyStyle: 'padding:15px', defaults: { border: false }, listeners: { 'afterrender': { fn: function() { Ext.getCmp('move-prev').setDisabled(true); } } }, bbar: [ '->', { id: 'move-prev', text: '上一步', handler: navHandler.createDelegate(this, [-1]) }, '-', { id: 'move-next', text: '下一步', handler: navHandler.createDelegate(this, [1]) } ], items: [{ id: 'card-0', html: '<h1>欢迎来到注册向导!</h1><p>第1/3步!</p>' }, { id: 'card-1', html: '<h1>请填写注册资料!</h1><p>第2/3步!</p>' }, { id: 'card-2', html: '<h1>注册成功!</h1><p>第3/3步!完成!</p>' }], renderTo: Ext.getBody() });