Card布局:这种布局用来管理多个子组件,并且在任何时刻只能显示一个子组件。这种布局最常用的情况是向导模式,也就是我们所说的分布提交。
Card布局:这种布局用来管理多个子组件,并且在任何时刻只能显示一个子组件。这种布局最常用的情况是向导模式,也就是我们所说的分布提交。Card布局可以使用layout:'card'来创建。注意:由于此布局本身不提供分步导航功能,所以需要用户自己开发该功能。由于只有一个面板处于显示状态,那么在初始时,我们可以使用setActiveItem功能来指定某一个面板的显示。当要显示下一个面板或者上一个面板的时候,我们可以使用getNext()或getPrev()来得到下一个或上一个面板。然后使用setDisabled方法来设置面板的显示。另外,如果面板中显示的是FORM布局,我们在点击下一个面板的时候,处理FORM中提交的元素,通过AJAX将表单中的内容保存到数据库中或者SESSION中。
下面的示例代码展示了一个基本的Card布局,布局中并没有包含form元素,具体情况,还要根据实际情况进行处理:
- var navigate = function(panel, direction){
- 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: 'MHZG.NET-Card布局示例',
- width: 300,
- height: 202,
- layout: 'card',
- activeItem: 0,
- x:30,
- y:60,
- bodyStyle: 'padding:15px',
- defaults: {border: false},
- bbar: [{
- id: 'move-prev',
- text: 'Back',
- handler: function(btn) {
- navigate(btn.up("panel"), "prev");
- },
- disabled: true
- },
- '->',
- {
- id: 'move-next',
- text: 'Next',
- handler: function(btn) {
- navigate(btn.up("panel"), "next");
- }
- }],
- 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()
- });
效果图: