最近用EXTJS写的一个页面,想实现按钮级别的权限控制,所以用了动态加载的按钮,结果从后台取得的按钮可以显示出来,但是按钮的handler方法不能被执行,在IE中提示错误为“对象不支持此属性或方法”,在FF中提示错误为“this.handler.call is not a function ”下面是相关代码:
js函数---
//新增窗口 ,工具条按钮回调函数
showAddcomp=function(){
Ext.getCmp("EmpForm").form.reset(); //重置表单
//EmpForm.form.isJunk.setvalue('2');
Ext.getCmp("EmpForm").isAdd=true; //设置ISADD附加属性为真
Ext.getCmp("AddEmpWin").setTitle("新增设备信息")
Ext.getCmp("AddEmpWin").show();
}
//编辑窗口
showEditcomp=function(){
Ext.getCmp("EmpForm").form.reset(); //重置表单
Ext.getCmp("EmpForm").isAdd=false; //设置ISADD附加属性为假
var sel=Ext.getCmp("grid_1").getSelectionModel().getSelected();//取得选中的行对应的record
loadForm(sel.get('Id'));//调用加载表单数据函数
Ext.getCmp("AddEmpWin").show();
Ext.getCmp("AddEmpWin").setTitle("修改设备信息")
}
//动态加载工具条中的按钮
SetToolButtons=function(tbr) {
Ext.Ajax.request({
url: 'computer1_getButton.do',
params: '',
method: 'POST',
success: function(response, options){
var rsp = Ext.util.JSON.decode(response.responseText);
var total = rsp.totalProperty;
var arrays = new Array(total);
for (var i = 0; i < total; i++) {
arrays[i] = new Ext.Toolbar.Button({ text: rsp.result[i].text, iconCls: rsp.result[i].iconCls,handler: rsp.result[i].handler,tooltip: rsp.result[i].tooltip});
alert(rsp.result[i].handler);
}
tbr.add(arrays);
tbr.addFill();//加入一个充满工具栏的空白元素
//tbr.addSeparator();//加入工具栏分割符
tbr.doLayout(); //让工具栏更新布局,解决了在表格渲染时不显示的问题
},
failure: function() {
Ext.Msg.alert("提示信息", "按钮加载失败,请稍后重试!");
}
});
}
EXTJS控件区---
Ext.onReady(function(){
Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget='side';//统一指定错误信息的提示方式
//生成工具栏
toolbar= new Ext.Toolbar(
/*
[{
text:'添加',
tooltip:'添加一条记录',
iconCls:'add',
handler:showAddcomp //hidden:true, //隐藏
//disabled:true // 不可用
}, '-', {
id:'editButton',
text:'修改',
tooltip:'修改',
iconCls:'option',
handler:handleEdit
},'-',{
text:'删除',
tooltip:'删除记录',
iconCls:'remove',
handler:handleDelete
}]
*/
);
//执行函数为工具栏动态附加按钮
SetToolButtons(toolbar);
奇怪在new Ext.Toolbar中定义的按钮可以执行动作,但用SetToolButtons函数动态加载的按钮就不行,是不是作用域的问题呀,帮帮我吧,兄弟们!!
你用的是ie什么版本?调试一下比较好,看到底当时运行的堆栈,还有这个方法名为什么不存在之类的具体错误信息。
[quote]
SetToolButtons=function(tbr) {
Ext.Ajax.request({
url: 'computer1_getButton.do',
params: '',
method: 'POST',
success: function(response, options){
var rsp = Ext.util.JSON.decode(response.responseText);
var total = rsp.totalProperty;
var arrays = new Array(total);
for (var i = 0; i < total; i++) {
arrays[i] = new Ext.Toolbar.Button({ text: rsp.result[i].text, iconCls: rsp.result[i].iconCls,handler: rsp.result[i].handler,tooltip: rsp.result[i].tooltip});
alert(rsp.result[i].handler);
}
tbr.add(arrays);
tbr.addFill();//加入一个充满工具栏的空白元素
//tbr.addSeparator();//加入工具栏分割符
tbr.doLayout(); //让工具栏更新布局,解决了在表格渲染时不显示的问题
},
failure: function() {
Ext.Msg.alert("提示信息", "按钮加载失败,请稍后重试!");
}
});
}
[/quote]
问题出在这个里面,Ext的Ajax请求是没有设置sync参数的,默认就是异步,异步的ajax是有有效周期的概念,也就是对象只有在ajax域中才有效,ajax执行完以后就失效了。
具体修改,1.你修改一下Ext的request,增加一个header,让它同步。2.你调数据的时候通过jquery后者自己的ajax来调。
其实你可以试试,在ajax外面定义一个变量赋予一个初值,在ajax里面改变它,alert出来。然后出了ajax域再alert()出来,肯定是不一样的。
请给出computer1_getButton.do返回的数据,谢谢,
估计rsp.result[i].handler只是字符串
如果是字符串就要这样
[code="java"]
arrays[i] = new Ext.Toolbar.Button({
text : rsp.result[i].text,
iconCls : rsp.result[i].iconCls,
handler : eval(rsp.result[i].handler),
tooltip : rsp.result[i].tooltip
});
[/code]
另外下次贴代码时啊好格式化一下,这样看起来不会累