| 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>'
}]
});
| 配置项 | 定义者 | |
|---|---|---|
|
deferredRender
: Boolean
True表示为处于激活的状态时才渲染每个子项,False表示为在布局渲...
True表示为处于激活的状态时才渲染每个子项,False表示为在布局渲染出来时就逐个渲染子项(缺省为fasle)。
如果这里有相当多数量的内容或包含重型控件需要渲染到面板而又不是等一时间显示的时候,设置为true以提示性能。
|
CardLayout | |
|
CSS
: String
一个可选添加的CSS样式类,加入到组件的容器上(默认为'')。 这为容...
一个可选添加的CSS样式类,加入到组件的容器上(默认为'')。 这为容器或容器的子节点加入标准CSS规则提供了方便。
|
ContainerLayout | |
|
renderHidden
: Boolean
True表示为在渲染时隐藏包含的每一项(缺省为false)。
True表示为在渲染时隐藏包含的每一项(缺省为false)。
|
ContainerLayout | |
| 属性 | 定义者 | |
|---|---|---|
|
activeItem: activeItem
一个已激活Ext.Component的引用 例如,if(myPane...
一个已激活Ext.Component的引用 例如,if(myPanel.layout.activeItem.id == 'item-1') { ... }。 activeItem只会作用在布局样式上。(像Ext.layout.Accordion, Ext.layout.CardLayout和Ext.layout.FitLayout)。只读的。 Related to Ext.Container#activeItem.
|
ContainerLayout | |
| 方法 | 定义者 | |
|---|---|---|
setActiveItem
(
String/Number item
)
设置布局中某项为活动项(可见的项)。
设置布局中某项为活动项(可见的项)。
参数项:
|
CardLayout | |