代码:
// 采用向导方式
function navigate(panel, direction) {
// 获取Panel布局管理器
var layout = panel.getLayout();
//根据"prev"或"next"字符串控制显示上一个,下一个Card中的组件
layout[direction]();
//如果layout没有上一张Card,则禁用move-prev按钮,否则启用该按钮。
cardPanel.query('button[text="上一步"]')[0].setDisabled(!layout.getPrev());
//如果layout没有下一张Card,则禁用move-next按钮,否则启用该按钮。
cardPanel.query('button[text="下一步"]')[0].setDisabled(!layout.getNext());
}
var cardPanel = Ext.create('Ext.panel.Panel', {
title : '',
width : 300,
height : 200,
layout : 'card', //指定卡片布局
frame : true,
closeAction : 'hide',
//对所有的子组件设置
defaults : {
border : false //不使用边框
},
buttonAlign : 'right',
//底部工具栏
bbar : [
{
text : '上一步',
handler : function() {
//调用navigate函数打开上一个Card中的组件
navigate(this.up('panel'), 'prev');
},
disabled : true //默认不可用
}
,{
text : '下一步',
handler : function() {
//调用navigate函数打开下一个Card中的组件
navigate(this.up('panel'), 'next');
}
}
}
],
//定义子组件
后面代码省略....
你是要使用点击button 的时候,异步取数据和更新页面吗?
可以使用:
Ext.Ajax.request
可是不同的卡片表单需要发不同的请求,我想知道的是通过拿到获取Panel布局管理器,怎么去判断当前显示的这个面板是否需要发Ajax请求,比如在
卡片面板做个标记,然后可以取得以此判断。这样需要怎么实现?
function navigate(panel, direction) {
// 获取Panel布局管理器
var layout = panel.getLayout();
//根据"prev"或"next"字符串控制显示上一个,下一个Card中的组件
if (direction == 'next') {//下一步
Ext.Ajax.request({
url: 'xxxxxxxx',
params: { id: 1 },
success: function (response) {
var text = response.responseText;
// process server response here
}
});
}
layout[direction]();
//如果layout没有上一张Card,则禁用move-prev按钮,否则启用该按钮。
cardPanel.query('button[text="上一步"]')[0].setDisabled(!layout.getPrev());
//如果layout没有下一张Card,则禁用move-next按钮,否则启用该按钮。
cardPanel.query('button[text="下一步"]')[0].setDisabled(!layout.getNext());
}