ExtJS4 组件化编程，动态加载，面向对象，Direct
- 作者: 头像是神评的丁丁
- 来源: 51数据库
- 2021-08-02
extjs4推荐定义类的时候均使用ext.define，利用xtype动态加载
修改了以前的一个登陆窗口，感觉用官方推荐的方法还是很不错的
但还有一些问题没有想得非常清楚，先把代码贴出来一起研究下。请看代码中的注释~~
使用ext+.net，用direct模式传递数据
default.aspx:
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns="http://www.51sjk.com/Upload/Articles/1/0/263/263039_20210702003826009.jpg">
<head>
<title>extjs学习</title>
<link rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" />
<script src="ext/ext-all.js" type="text/javascript"></script>
<script src="ext/ext-lang-zh_cn.js" type="text/javascript"></script>
<script type="text/javascript" src="chceklogin.ashx"></script>
<script src="js/ext.app.loginformpanel.js" type="text/javascript"></script>
<script type="text/javascript" src="js/ext.app.logindialog.js"></script>
</head>
<body>
<div id="loading-mask"></div>
<div id="loading">
<div class="loading-indicator"><img alt="" src="ext/resources/themes/images/default/shared/large-loading.gif" width="32" height="32" style="margin-right:8px;" align="absmiddle"/>正在加载...</div>
</div>
<script type="text/javascript">
//ext.loader.setconfig({ enabled: true });
ext.onready(function () {
ext.blank_image_url = 'img/s.gif';
ext.quicktips.init();
ext.msg.minwidth = 300;
//验证提示信息显示位置
ext.form.field.prototype.msgtarget = 'side';
//如果是继承ext.container.viewport的实例，直接new出来就可以，会自动渲染到body
//本例中ext.app.logindialog继承自ext.window，需要调用show()方法才能显示
new ext.app.logindialog().show();
//250毫秒后删除加载提示信息
settimeout(function () {
ext.get('loading').remove();
ext.get('loading-mask').fadeout({ remove: true });
}, 250);
})//onready
</script>
</body>
</html>
ext.app.logindialog.js
//logindialog类，继承ext.window，上层对象使用new ext.app.logindialog().show()动态实例化并显示。
ext.define('ext.app.logindialog',{
extend:'ext.window',
title: '登陆',
plain: true,
closable: false,
closeaction: 'hide',
width: 400,
height: 300,
layout: 'fit',
border: false,
modal: true,
//使用xtype: 'loginformpanel'动态实例化ext.app.loginformpanel，并使用api参数指定load和submit的服务器端方法。本例中只有submit
items: {itemid: 'loginformpanel',xtype: 'loginformpanel',api: {submit: myapp.chceklogin.check}}
});
ext.app.loginformpanel.js
//指定远程调用的provider，注意不能在initcomponent中指定，因为config属性设置是在initcomponent之前，会报api找不到错误
ext.direct.manager.addprovider(ext.app.remoting_api);
//loginform类，继承ext.form.formpanel，使用alias注册至componentmgr，上层对象使用xtype:loginformpanel动态实例化。
//form的submit()方法使用direct提交，上层对象实例化本类的时候使用config中的api属性指定服务器端方法。
//很奇怪的是不能在ext.define或者ext.apply中指定api属性，指定了实例化之后也会丢失，然后报url参数没有的错误，只能在上层对象实例化本类得时候使用config中的api属性指定api
//如果在这里使用原始的new方法指定api也可以，是ext4中的问题？有谁知道的发mail告诉我，万分感谢~~
//使用ext.define定义本类，定义中使用initcomponent指定实例化之前需要执行的操作。
//按面向对象编程思想，本类不调用任何上层对象，方法中不指定scope: this
ext.define('ext.app.loginformpanel',{
extend:'ext.form.formpanel',
initcomponent: function(){
//初始化部分需要完成的功能
//alert("ext.form.formpanel 开始加载……");
//貌似ext.apply得来的属性和在ext.define中定义的没什么区别，为什么要用这个呢？谁来教教我？
ext.apply(this, {
//labelalign: 'left'
});
this.callparent();
},
alias:'widget.loginformpanel',
labelalign: 'left',
buttonalign: 'center',
bodystyle: 'padding:5px',
frame: true, labelwidth: 80,
items: [
{ xtype: 'textfield', name: 'txt1', fieldlabel: '用户名称',
allowblank: false, anchor: '90%', enablekeyevents: true,
listeners: {
keypress: function (field, e) {
if (e.getkey() == 13) {
this.nextsibling().focus();
}
} //keypress
}
},
{ xtype: 'textfield', inputtype: 'password', name: 'txt2', fieldlabel: '用户密码',
allowblank: false, anchor: '90%', enablekeyevents: true,
listeners: {
keypress: function (field, e) {
if (e.getkey() == 13) {
this.nextsibling().focus();
}
} //keypress
}
},
{ xtype: 'textfield', name: 'txt3', fieldlabel: '验证码',
allowblank: false, anchor: '90%', mixlength: 6, maxlength: 6, enablekeyevents: true,
listeners: {
keypress: function (field, e) {
if (e.getkey() == 13) {
this.ownerct.submit();
}
} //keypress
}
},
{ xtype: 'panel', height: 100, html: '<div style="margin:5px 0px 0px 84px"><a ><img alt="如果看不清楚请单击图片更换图片。" onclick="this.src=\'vcode.ashx?d=\'+new date();" id="code" height="82" width="242" src="vcode.ashx" border="0"></a></div>', border: false },
{ xtype: 'panel', height: 30, html: '<div style="margin:5px 0px 0px 84px;color:red">*如果图片不清晰请单击图片更换图片</div>', border: false }
], //items
buttons: [
{ text: '确定', handler: function () { this.findparentbytype('loginformpanel').submit(); }},
//面向本对象编程，这里不要加入 scope: this，否则function会指定到window上面
{ text: '重置', handler: function () { this.findparentbytype('loginformpanel').form.reset(); } }
],
submit: function () {
if (this.getform().isvalid()) {
this.getform().submit({
success: function (form, action) {
window.location = "main.htm";
},
failure: function (form, action) {
//使用form参数访问原submit的form
form.reset();
//使用action.result访问结果集
ext.messagebox.alert('登陆失败', action.result.data);
}
})
}
}
});
过程已经写到注释里面了，有什么问题请在下面讨论
修改了以前的一个登陆窗口，感觉用官方推荐的方法还是很不错的
但还有一些问题没有想得非常清楚，先把代码贴出来一起研究下。请看代码中的注释~~
使用ext+.net，用direct模式传递数据
default.aspx:
复制代码 代码如下:
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns="http://www.51sjk.com/Upload/Articles/1/0/263/263039_20210702003826009.jpg">
<head>
<title>extjs学习</title>
<link rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" />
<script src="ext/ext-all.js" type="text/javascript"></script>
<script src="ext/ext-lang-zh_cn.js" type="text/javascript"></script>
<script type="text/javascript" src="chceklogin.ashx"></script>
<script src="js/ext.app.loginformpanel.js" type="text/javascript"></script>
<script type="text/javascript" src="js/ext.app.logindialog.js"></script>
</head>
<body>
<div id="loading-mask"></div>
<div id="loading">
<div class="loading-indicator"><img alt="" src="ext/resources/themes/images/default/shared/large-loading.gif" width="32" height="32" style="margin-right:8px;" align="absmiddle"/>正在加载...</div>
</div>
<script type="text/javascript">
//ext.loader.setconfig({ enabled: true });
ext.onready(function () {
ext.blank_image_url = 'img/s.gif';
ext.quicktips.init();
ext.msg.minwidth = 300;
//验证提示信息显示位置
ext.form.field.prototype.msgtarget = 'side';
//如果是继承ext.container.viewport的实例，直接new出来就可以，会自动渲染到body
//本例中ext.app.logindialog继承自ext.window，需要调用show()方法才能显示
new ext.app.logindialog().show();
//250毫秒后删除加载提示信息
settimeout(function () {
ext.get('loading').remove();
ext.get('loading-mask').fadeout({ remove: true });
}, 250);
})//onready
</script>
</body>
</html>
ext.app.logindialog.js
复制代码 代码如下:
//logindialog类，继承ext.window，上层对象使用new ext.app.logindialog().show()动态实例化并显示。
ext.define('ext.app.logindialog',{
extend:'ext.window',
title: '登陆',
plain: true,
closable: false,
closeaction: 'hide',
width: 400,
height: 300,
layout: 'fit',
border: false,
modal: true,
//使用xtype: 'loginformpanel'动态实例化ext.app.loginformpanel，并使用api参数指定load和submit的服务器端方法。本例中只有submit
items: {itemid: 'loginformpanel',xtype: 'loginformpanel',api: {submit: myapp.chceklogin.check}}
});
ext.app.loginformpanel.js
复制代码 代码如下:
//指定远程调用的provider，注意不能在initcomponent中指定，因为config属性设置是在initcomponent之前，会报api找不到错误
ext.direct.manager.addprovider(ext.app.remoting_api);
//loginform类，继承ext.form.formpanel，使用alias注册至componentmgr，上层对象使用xtype:loginformpanel动态实例化。
//form的submit()方法使用direct提交，上层对象实例化本类的时候使用config中的api属性指定服务器端方法。
//很奇怪的是不能在ext.define或者ext.apply中指定api属性，指定了实例化之后也会丢失，然后报url参数没有的错误，只能在上层对象实例化本类得时候使用config中的api属性指定api
//如果在这里使用原始的new方法指定api也可以，是ext4中的问题？有谁知道的发mail告诉我，万分感谢~~
//使用ext.define定义本类，定义中使用initcomponent指定实例化之前需要执行的操作。
//按面向对象编程思想，本类不调用任何上层对象，方法中不指定scope: this
ext.define('ext.app.loginformpanel',{
extend:'ext.form.formpanel',
initcomponent: function(){
//初始化部分需要完成的功能
//alert("ext.form.formpanel 开始加载……");
//貌似ext.apply得来的属性和在ext.define中定义的没什么区别，为什么要用这个呢？谁来教教我？
ext.apply(this, {
//labelalign: 'left'
});
this.callparent();
},
alias:'widget.loginformpanel',
labelalign: 'left',
buttonalign: 'center',
bodystyle: 'padding:5px',
frame: true, labelwidth: 80,
items: [
{ xtype: 'textfield', name: 'txt1', fieldlabel: '用户名称',
allowblank: false, anchor: '90%', enablekeyevents: true,
listeners: {
keypress: function (field, e) {
if (e.getkey() == 13) {
this.nextsibling().focus();
}
} //keypress
}
},
{ xtype: 'textfield', inputtype: 'password', name: 'txt2', fieldlabel: '用户密码',
allowblank: false, anchor: '90%', enablekeyevents: true,
listeners: {
keypress: function (field, e) {
if (e.getkey() == 13) {
this.nextsibling().focus();
}
} //keypress
}
},
{ xtype: 'textfield', name: 'txt3', fieldlabel: '验证码',
allowblank: false, anchor: '90%', mixlength: 6, maxlength: 6, enablekeyevents: true,
listeners: {
keypress: function (field, e) {
if (e.getkey() == 13) {
this.ownerct.submit();
}
} //keypress
}
},
{ xtype: 'panel', height: 100, html: '<div style="margin:5px 0px 0px 84px"><a ><img alt="如果看不清楚请单击图片更换图片。" onclick="this.src=\'vcode.ashx?d=\'+new date();" id="code" height="82" width="242" src="vcode.ashx" border="0"></a></div>', border: false },
{ xtype: 'panel', height: 30, html: '<div style="margin:5px 0px 0px 84px;color:red">*如果图片不清晰请单击图片更换图片</div>', border: false }
], //items
buttons: [
{ text: '确定', handler: function () { this.findparentbytype('loginformpanel').submit(); }},
//面向本对象编程，这里不要加入 scope: this，否则function会指定到window上面
{ text: '重置', handler: function () { this.findparentbytype('loginformpanel').form.reset(); } }
],
submit: function () {
if (this.getform().isvalid()) {
this.getform().submit({
success: function (form, action) {
window.location = "main.htm";
},
failure: function (form, action) {
//使用form参数访问原submit的form
form.reset();
//使用action.result访问结果集
ext.messagebox.alert('登陆失败', action.result.data);
}
})
}
}
});
过程已经写到注释里面了，有什么问题请在下面讨论
推荐阅读
