PropertiesMethodsEventsConfig OptionsDirect Link

Class Ext.layout.CardLayout

Defined In: CardLayout.js
Class: Ext.layout.CardLayout
Extends: Ext.layout.FitLayout

此布局包含的多个面板,里面的每个面板都会填充整个容器,而在同一时候只有一个面板是被显示的。 此布局比较常见的应用场合是Wizards(向导式对话框)、Tab标签页这些的实现等等。 应通过继承此类或设置Ext.Container#layout的配置layout:'card' 的方式创建,一般很少通过关键字new直接使用。

CardLayout的重点方法是#setActiveItem。在某一时刻,只有一个面板显示,而负责移动到下一面板的方法便是这个setActiveItem方法。 方法执行时会有下一个面板的id或索引作为参数传入,布局本身并没有为下一步、上一步的导航提供直接的处理机制,所有这方面的功能应由开发者提供。

在下面的例子中,就演示了一个简单的用法,在包含的面板的底部键入了一组用于导航路由的按钮。 由于自定义的逻辑是未知的,所以这个例子的路由这部分的实现是省略的。 注意CradLayout其他的用法(如Tab控件)会是另外一种不同的实现。对于一些真正的使用场合,应通过扩展此类以提供更多自定义的功能。用法举例:


var navHandler = function(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 card = new Ext.Panel({
    title: 'Example Wizard',
    layout:'card',
    activeItem: 0, // make sure the active item is set on the container config!
    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: navHandler.createDelegate(this, [-1]),
            disabled: true
        },
        '->', // greedy spacer so that the buttons are aligned to each side
        {
            id: 'move-next',
            text: 'Next',
            handler: navHandler.createDelegate(this, [1])
        }
    ],
    // 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>'
    }]
});

配置项

配置项 定义者

公告属性

属性 定义者

公共方法

方法 定义者

公告事件

这个类没公共的事件。