extjs动态方法调用

最新推荐文章于 2021-06-16 17:44:44 发布

原创最新推荐文章于 2021-06-16 17:44:44 发布 · 155 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#JavaScript #scheme #ViewUI

extjs 专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何利用Ext JS实现一个功能丰富的导航器，通过定义面板布局、按钮栏和面板项来构建ExampleWizard，展示了一种复杂的导航方案，包括前进、后退按钮的启用状态控制和页面间的导航逻辑。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

var navigate = function(panel, direction){
    // This routine could contain business logic required to manage the navigation steps.
    // It would call setActiveItem as needed, manage navigation button state, handle any
    // branching logic that might be required, handle alternate actions like cancellation
    // or finalization, etc.  A complete wizard implementation could get pretty
    // sophisticated depending on the complexity required, and should probably be
    // done as a subclass of CardLayout in a real-world implementation.
    var layout = panel.getLayout();
    layout[direction]();
    Ext.getCmp('move-prev').setDisabled(!layout.getPrev());
    Ext.getCmp('move-next').setDisabled(!layout.getNext());
};

Ext.create('Ext.panel.Panel', {
    title: 'Example Wizard',
    width: 300,
    height: 200,
    layout: 'card',
    bodyStyle: 'padding:15px',
    defaults: {
        // applied to each contained panel
        border: false
    },
    // just an example of one possible navigation scheme, using buttons
    bbar: [
        {
            id: 'move-prev',
            text: 'Back',
            handler: function(btn) {
                navigate(btn.up("panel"), "prev");
            },
            disabled: true
        },
        '->', // greedy spacer so that the buttons are aligned to each side
        {
            id: 'move-next',
            text: 'Next',
            handler: function(btn) {
                navigate(btn.up("panel"), "next");
            }
        }
    ],
    // the panels (or "cards") within the layout
    items: [{
        id: 'card-0',
        html: '<h1>Welcome to the Wizard!</h1><p>Step 1 of 3</p>'
    },{
        id: 'card-1',
        html: '<p>Step 2 of 3</p>'
    },{
        id: 'card-2',
        html: '<h1>Congratulations!</h1><p>Step 3 of 3 - Complete</p>'
    }],
    renderTo: Ext.getBody()
});