[code="js"]login = function() {
loginForm = new Ext.form.FormPanel({
renderTo : Ext.getBody(),
frame : true,
labelAlign : 'right',
width : 300,
height : 140,
title : "登陆",
plain : true, // 透明
bodyStyle : "padding:15px", // 控件上边距
items : [{
xtype : "textfield",
fieldLabel : "用户名"
}, {
xtype : "textfield",
fieldLabel : "密码"
}],
buttons : [{
text : "登陆",
handler : this.onlogin
}, {
text : "取消"
}],
onlogin : function() {
alert("提交");
},
loginS : function(_conn, _response, _options) {
alert("提交完成");
}
});
}[/code]
为什么无法找到onlogin??
请单独看
[code="js"]var a = {
text : "登陆",
handler : this.onlogin
}[/code]
你就会明白，this指的是a的作用域，明显这个作用域内是没有onlogin方法的。
当然，一般人很少直接扩展Ext.form.FormPanel方法。但是就你以上例子而言，只需要改为
[code="js"]{
text : "登陆",
handler : loginForm.onlogin
}[/code]
就OK了，其实这是直接调用loginForm的作用域方法。
这个原理还是使用js的call和apply方法。
如果你使用firebug的话，就可以详细找出当前的作用域所在，就很方便调试了
loginForm = Ext.extend(Ext.form.FormPanel, {
renderTo : Ext.getBody(),
frame : true,
labelAlign : 'right',
width : 300,
height : 140,
title : "登陆",
plain : true, // 透明
bodyStyle : "padding:15px", // 控件上边距
constructor: function(config) {
this.items =[{
xtype : "textfield",
fieldLabel : "用户名"
}, {
xtype : "textfield",
fieldLabel : "密码"
}];
this.buttons = [{
text : "登陆",
scope:this, //加上这个
handler : this.onlogin
}, {
text : "取消"
}];
loginForm.superclass.constructor.call(this);
},
onlogin : function() {
alert("提交");
},
loginS : function(_conn, _response, _options) {
alert("提交完成");
}
});
new loginForm();
通过继承方式 比较方便
不使用继承 这样解决了
loginForm = new Ext.form.FormPanel({
renderTo : Ext.getBody(),
frame : true,
labelAlign : 'right',
width : 300,
height : 140,
title : "登陆2",
plain : true, // 透明
bodyStyle : "padding:15px", // 控件上边距
items : [{
xtype : "textfield",
fieldLabel : "用户名"
}, {
xtype : "textfield",
fieldLabel : "密码"
}],
buttons : [{
text : "登陆",
handler : function(){
this.ownerCt.onlogin()
}
}, {
text : "取消"
}],
onlogin : function() {
alert("提交");
},
loginS : function(_conn, _response, _options) {
alert("提交完成");
}
});