Ext.form.FormPanel的bug?
2012-02-14 09:15
162 查看
Ext真的强大,所以选择来做后台,在做一个权限时发现了一个问题,也不知道是不是BUG,如果有遇到同样的问题,请指教,3Q
在说明问题之前,先说下我怎么写的Ext,我做采用JS调用,所有JS都是动态加载,就是菜单点击时才加载一个JS(通过网上的Ext.ux.JSLoader,小有改动);
动态加载的好处自认为可以解决在不影响第一次打开加载过多JS而造成的问题,在加载JS到TabPanel后,如果再点同样菜单是不会再加载JS的,脚本做了判断(这个很重要,后面的问题可以排除是多次加载造成的);
下面是问题: Ext.form.FormPanel在加载后出现反复加载items中的控件,而且加载不全,有的没了有的又多了;第一次加载有FormPanel的js,都是正常的,如果再加载一次就会出问题如图那样的反复加载items中的内容;
感觉数据库来的数据不会有问题,道是加到formpanel的静态控件checkbox有问题
Js代码
permission = function(node) {
var checkall = new Ext.form.Checkbox({ id: 'checkall', name: 'checkall', fieldLabel: '功能名称', boxLabel: '全选', inputValue: true,
handler: function() {
if (this.checked) {
Ext.select('input[name^=cbopitem]').each(function() { this.checked = true; });
} else {
Ext.select('input[name^=cbopitem]').each(function() { this.checked = false; });
}
}
});
var form = new Ext.form.FormPanel({
id: 'roleopform',
title: '当前位置:角色管理 > ' + node.text,
border: false,
plain: true,
layout: "form",
buttonAlign: 'center',
bodyStyle: 'padding:0 10px 0;',
items: [checkall],
buttons: [{
text: '保存',
handler: function() {
if (form.getForm().isValid()) {
Ext.MessageBox.show({ title: '提示框', msg: '你确定要修改吗?', buttons: Ext.MessageBox.OKCANCEL, icon: Ext.MessageBox.WARNING,
fn: function(btn) {
if (btn == 'ok') {
form.getForm().submit({
waitMsg: "数据保存中...",
title: "请稍侯",
url: '/sys/permissionsave',
params: { id: node.attributes.id },
success: function(form, response) {
var temp = Ext.util.JSON.decode(response.response.responseText);
Ext.Msg.alert("系统提示!", temp.msg);
},
failure: function(form, response) {
Ext.MessageBox.alert("提示!", "保存信息失败!");
}
});
}
}
});
}
}
}, {
text: '取消',
handler: function() {
form.getForm().reset();
}
}
]
});
//加载角度权限
var conn = Ext.lib.Ajax.getConnectionObject().conn;
conn.open("POST", '/sys/permission/' + node.attributes.id, false);
conn.send(null);
var perJson = Ext.util.JSON.decode(conn.responseText);
//加载功能
var checklist = [];
conn.open("POST", '/sys/loadappselect', false);
conn.send(null);
var respText = Ext.util.JSON.decode(conn.responseText);
Ext.each(respText, function(item) {
var id = item.ID;
var path = item.Path;
var name = item.Name;
name = GetCategoryPath(path, '|') + name;
var checkGroup = [];
//加载功能操作
conn.open("POST", '/sys/operation/' + id, false);
conn.send(null);
var respText1 = Ext.util.JSON.decode(conn.responseText);
Ext.each(respText1, function(item1) {
//加载功能操作是否设置字段
conn.open("POST", '/sys/field/' + item1.ID, false);
conn.send(null);
var respField = Ext.util.JSON.decode(conn.responseText);
var opname = item1.Operation;
if (respField.length > 0) opname += '(<a href="javascript:;">设置字段</a>)';
var chk = { xtype: 'checkbox', boxLabel: opname, name: 'cbopitem', inputValue: item1.ID, checked: getopIscheck(perJson, item1.ID) };
checkGroup.push(chk);
});
if (checkGroup.length > 0)
checklist.push(new Ext.form.CheckboxGroup({ fieldLabel: name, columns: 1, items: checkGroup }));
});
form.add(checklist);
GridMain(node, form);
};
function getopIscheck(perJson, opid) {
var check = false; length
for (var i = 0; i < perJson.length; i++) {
if (perJson[i].OperationID == opid) {
check = true;
break;
}
}
return check;
}
在说明问题之前,先说下我怎么写的Ext,我做采用JS调用,所有JS都是动态加载,就是菜单点击时才加载一个JS(通过网上的Ext.ux.JSLoader,小有改动);
动态加载的好处自认为可以解决在不影响第一次打开加载过多JS而造成的问题,在加载JS到TabPanel后,如果再点同样菜单是不会再加载JS的,脚本做了判断(这个很重要,后面的问题可以排除是多次加载造成的);
下面是问题: Ext.form.FormPanel在加载后出现反复加载items中的控件,而且加载不全,有的没了有的又多了;第一次加载有FormPanel的js,都是正常的,如果再加载一次就会出问题如图那样的反复加载items中的内容;
感觉数据库来的数据不会有问题,道是加到formpanel的静态控件checkbox有问题
Js代码
permission = function(node) {
var checkall = new Ext.form.Checkbox({ id: 'checkall', name: 'checkall', fieldLabel: '功能名称', boxLabel: '全选', inputValue: true,
handler: function() {
if (this.checked) {
Ext.select('input[name^=cbopitem]').each(function() { this.checked = true; });
} else {
Ext.select('input[name^=cbopitem]').each(function() { this.checked = false; });
}
}
});
var form = new Ext.form.FormPanel({
id: 'roleopform',
title: '当前位置:角色管理 > ' + node.text,
border: false,
plain: true,
layout: "form",
buttonAlign: 'center',
bodyStyle: 'padding:0 10px 0;',
items: [checkall],
buttons: [{
text: '保存',
handler: function() {
if (form.getForm().isValid()) {
Ext.MessageBox.show({ title: '提示框', msg: '你确定要修改吗?', buttons: Ext.MessageBox.OKCANCEL, icon: Ext.MessageBox.WARNING,
fn: function(btn) {
if (btn == 'ok') {
form.getForm().submit({
waitMsg: "数据保存中...",
title: "请稍侯",
url: '/sys/permissionsave',
params: { id: node.attributes.id },
success: function(form, response) {
var temp = Ext.util.JSON.decode(response.response.responseText);
Ext.Msg.alert("系统提示!", temp.msg);
},
failure: function(form, response) {
Ext.MessageBox.alert("提示!", "保存信息失败!");
}
});
}
}
});
}
}
}, {
text: '取消',
handler: function() {
form.getForm().reset();
}
}
]
});
//加载角度权限
var conn = Ext.lib.Ajax.getConnectionObject().conn;
conn.open("POST", '/sys/permission/' + node.attributes.id, false);
conn.send(null);
var perJson = Ext.util.JSON.decode(conn.responseText);
//加载功能
var checklist = [];
conn.open("POST", '/sys/loadappselect', false);
conn.send(null);
var respText = Ext.util.JSON.decode(conn.responseText);
Ext.each(respText, function(item) {
var id = item.ID;
var path = item.Path;
var name = item.Name;
name = GetCategoryPath(path, '|') + name;
var checkGroup = [];
//加载功能操作
conn.open("POST", '/sys/operation/' + id, false);
conn.send(null);
var respText1 = Ext.util.JSON.decode(conn.responseText);
Ext.each(respText1, function(item1) {
//加载功能操作是否设置字段
conn.open("POST", '/sys/field/' + item1.ID, false);
conn.send(null);
var respField = Ext.util.JSON.decode(conn.responseText);
var opname = item1.Operation;
if (respField.length > 0) opname += '(<a href="javascript:;">设置字段</a>)';
var chk = { xtype: 'checkbox', boxLabel: opname, name: 'cbopitem', inputValue: item1.ID, checked: getopIscheck(perJson, item1.ID) };
checkGroup.push(chk);
});
if (checkGroup.length > 0)
checklist.push(new Ext.form.CheckboxGroup({ fieldLabel: name, columns: 1, items: checkGroup }));
});
form.add(checklist);
GridMain(node, form);
};
function getopIscheck(perJson, opid) {
var check = false; length
for (var i = 0; i < perJson.length; i++) {
if (perJson[i].OperationID == opid) {
check = true;
break;
}
}
return check;
}
permission = function(node) { var checkall = new Ext.form.Checkbox({ id: 'checkall', name: 'checkall', fieldLabel: '功能名称', boxLabel: '全选', inputValue: true, handler: function() { if (this.checked) { Ext.select('input[name^=cbopitem]').each(function() { this.checked = true; }); } else { Ext.select('input[name^=cbopitem]').each(function() { this.checked = false; }); } } }); var form = new Ext.form.FormPanel({ id: 'roleopform', title: '当前位置:角色管理 > ' + node.text, border: false, plain: true, layout: "form", buttonAlign: 'center', bodyStyle: 'padding:0 10px 0;', items: [checkall], buttons: [{ text: '保存', handler: function() { if (form.getForm().isValid()) { Ext.MessageBox.show({ title: '提示框', msg: '你确定要修改吗?', buttons: Ext.MessageBox.OKCANCEL, icon: Ext.MessageBox.WARNING, fn: function(btn) { if (btn == 'ok') { form.getForm().submit({ waitMsg: "数据保存中...", title: "请稍侯", url: '/sys/permissionsave', params: { id: node.attributes.id }, success: function(form, response) { var temp = Ext.util.JSON.decode(response.response.responseText); Ext.Msg.alert("系统提示!", temp.msg); }, failure: function(form, response) { Ext.MessageBox.alert("提示!", "保存信息失败!"); } }); } } }); } } }, { text: '取消', handler: function() { form.getForm().reset(); } } ] }); //加载角度权限 var conn = Ext.lib.Ajax.getConnectionObject().conn; conn.open("POST", '/sys/permission/' + node.attributes.id, false); conn.send(null); var perJson = Ext.util.JSON.decode(conn.responseText); //加载功能 var checklist = []; conn.open("POST", '/sys/loadappselect', false); conn.send(null); var respText = Ext.util.JSON.decode(conn.responseText); Ext.each(respText, function(item) { var id = item.ID; var path = item.Path; var name = item.Name; name = GetCategoryPath(path, '|') + name; var checkGroup = []; //加载功能操作 conn.open("POST", '/sys/operation/' + id, false); conn.send(null); var respText1 = Ext.util.JSON.decode(conn.responseText); Ext.each(respText1, function(item1) { //加载功能操作是否设置字段 conn.open("POST", '/sys/field/' + item1.ID, false); conn.send(null); var respField = Ext.util.JSON.decode(conn.responseText); var opname = item1.Operation; if (respField.length > 0) opname += '(<a href="javascript:;">设置字段</a>)'; var chk = { xtype: 'checkbox', boxLabel: opname, name: 'cbopitem', inputValue: item1.ID, checked: getopIscheck(perJson, item1.ID) }; checkGroup.push(chk); }); if (checkGroup.length > 0) checklist.push(new Ext.form.CheckboxGroup({ fieldLabel: name, columns: 1, items: checkGroup })); }); form.add(checklist); GridMain(node, form); }; function getopIscheck(perJson, opid) { var check = false; length for (var i = 0; i < perJson.length; i++) { if (perJson[i].OperationID == opid) { check = true; break; } } return check; }
相关文章推荐
- Ext.FormPanel
- ExtJs2.0学习系列(4)--Ext.FormPanel之第一式
- Ext FormPanel布局 (一行显示两对控件元素)
- ExtJs2.0学习系列(4)--Ext.FormPanel之第一式
- Ext Window & FormPanel Component Demo
- Ext JS FormPanel 提交数据总结....
- Ext.form.FormPanel定义的参数说明
- ExtJs2.0学习系列(4)--Ext.FormPanel之第一式
- Ext FormPanel submit 提交与Ext.Ajax.request提交的区别 深究
- ExtJs2.0学习系列(7)--Ext.FormPanel之第四式(其他组件示例篇)
- 关于extjs4的Ext.form.Panel重置问题
- ExtJs2.0学习系列(5)--Ext.FormPanel之第二式
- ExtJs2.0学习系列(5)--Ext.FormPanel之第二式
- Extjs初始化/提交Ext.form.FormPanel,表单中包含textfield,textarea,radio,checkbox,combo等
- 动态设置Ext.form.FormPanel控件里子控件的显示和隐藏
- ExtJS学习笔记 Ext.FormPanel
- ExtJs内的Ext.form.Panel中datefield控件选择日期过后的事件监听select以及比较两个时间的大小
- ExtJs2.0学习系列(6)--Ext.FormPanel之第三式(ComboBox篇)
- 表单Ext.form.FormPanel
- ExtJs2.0学习系列(8)--Ext.FormPanel之第五式(综合篇)