如何在 Extjs 3.2 上使用卡片布局创建高级向导表单？答案

【问题标题】：How to create an advanced wizard form usingcard layout on Extjs 3.2?如何在 Extjs 3.2 上使用卡片布局创建高级向导表单？
【发布时间】：2011-06-30 04:32:00
【问题描述】：

有一个用于 extjs 2.0 的 Ext.ux.wizard，我们可以为 extjs 创建类似表单的向导，并在用户单击（例如）下一个按钮时轻松验证表单元素。在此处查看演示：http://www.siteartwork.de/wizardcomponent_demo。在 extjs 3.2 上，有卡片布局有助于创建向导。参见演示：http://dev.sencha.com/deploy/dev/examples/layout-browser/layout-browser.html。
代码：

/*  
 * ================  CardLayout config (Wizard)  =======================  
 */  
var cardWizard = {  
    id:'card-wizard-panel',  
    title: 'Card Layout (Wizard)',  
    layout:'card',  
    activeItem: 0,  
    bodyStyle: 'padding:15px',  
    defaults: {border:false},  
    bbar: ['->', {  
        id: 'card-prev',  
        text: '&laquo; Previous',  
        handler: cardNav.createDelegate(this, [-1]),  
        disabled: true  
    },{  
        id: 'card-next',  
        text: 'Next &raquo;',  
        handler: cardNav.createDelegate(this, [1])  
    }],  
    items: [{  
        id: 'card-0',  
        html: '<h1>Welcome to the Demo Wizard!</h1><p>Step 1 of 3</p><p>Please click the "Next" button to continue...</p>'  
    },{  
        id: 'card-1',  
        html: '<p>Step 2 of 3</p><p>Almost there.  Please click the "Next" button to continue...</p>'  
    },{  
        id: 'card-2',  
        html: '<h1>Congratulations!</h1><p>Step 3 of 3 - Complete</p>'  
    }]  
};

但是当我点击下一步时似乎没有验证，或者当我到达向导的最后一步时没有提交按钮。有人有任何关于更发达的向导的例子吗？

【问题讨论】：

标签： javascript forms extjs wizard

【解决方案1】：

检查此线程 - http://www.sencha.com/forum/showthread.php?121059-Making-a-Wizard&highlight=wizard
或者使用现成的扩展 - http://code.google.com/p/ext-ux-wiz/（它似乎正在使用 ExtJS 3.2），它的论坛主题在这里 - http://www.sencha.com/forum/showthread.php?36627-2.1-Ext.ux.Wiz-a-wizard-component-for-Ext-JS/page25

【讨论】：

感谢亲爱的 zihotki 富有成效的回答。我检查了 ext-ux-wiz 存储库，最新提交是在 2010 年 1 月：添加了 Ext 3.0.3 兼容性。我将检查它是否适用3.2 与否。