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

发布于 2024-10-17 21:19:25 字数 1632 浏览 3 评论 0原文

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>'  
    }]  
};

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

原文

There was an Ext.ux.wizard for extjs 2.0 which we could create wizard like forms for extjs and easily validate form elements when user clicked (eg)next button.see demo here: http://www.siteartwork.de/wizardcomponent_demo . On extjs 3.2 there is card layout which helps creating wizards.see demo: http://dev.sencha.com/deploy/dev/examples/layout-browser/layout-browser.html .
Code:

/*  
 * ================  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: '« Previous',  
        handler: cardNav.createDelegate(this, [-1]),  
        disabled: true  
    },{  
        id: 'card-next',  
        text: 'Next »',  
        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>'  
    }]  
};

but there seems no validations when i click next or there is no submit button when i reach last step of wizard.does anybody have any examples on a more developed wizard?

分享到QQ

分享到微博