ExtJS4 组件化编程,动态加载,面向对象,Direct


Posted in Javascript onMay 12, 2011

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.w3.org/1999/xhtml"> 
<head> 
<title>ExtJS学习</title> 
<link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css" /> 
<link rel="stylesheet" type="text/css" href="css/application.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 href="#"><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); 
} 
}) 
} 
} 
});

过程已经写到注释里面了,有什么问题请在下面讨论
Javascript 相关文章推荐
JavaScript排序算法之希尔排序的2个实例
Apr 04 Javascript
jQuery中after()方法用法实例
Dec 25 Javascript
JavaScript中return false的用法
Mar 12 Javascript
jfreechart插件将数据展示成饼状图、柱状图和折线图
Apr 13 Javascript
jQuery实现的表格展开伸缩效果实例
Sep 07 Javascript
jquery实现的回旋滚动效果完整实例【附demo源码下载】
Sep 20 Javascript
js复制内容到剪贴板代码,js复制代码的简单实例
Oct 27 Javascript
Javascript实现从小到大的数组转换成二叉搜索树
Jun 13 Javascript
AngularJS实现页面跳转后自动弹出对话框实例代码
Aug 02 Javascript
获取本机IP地址的实例(JavaScript / Node.js)
Nov 24 Javascript
使用 Element UI Table 的 slot-scope方法
Oct 10 Javascript
如何将Node.js中的回调转换为Promise
Nov 10 Javascript
关于js获取radio和select的属性并控制的代码
May 12 #Javascript
js 第二代身份证号码的验证机制代码
May 12 #Javascript
基于JQuery的动态删除Table表格的行和列的代码
May 12 #Javascript
五个jQuery图片画廊插件 推荐
May 12 #Javascript
JavaScript 继承使用分析
May 12 #Javascript
JS焦点图切换,上下翻转
May 12 #Javascript
js 中{},[]中括号,大括号使用详解
May 12 #Javascript
You might like
详解PHP对象的串行化与反串行化
2016/01/24 PHP
php微信公众账号开发之前五个坑(一)
2016/09/18 PHP
基于PHP实现堆排序原理及实例详解
2020/06/19 PHP
在JavaScript中typeof的用途介绍
2013/04/11 Javascript
toggle()隐藏问题的解决方法
2014/02/17 Javascript
jQuery实现切换字体大小的方法
2015/03/10 Javascript
jQuery实现带动画效果的二级下拉导航方法
2015/03/11 Javascript
jquery插件validation实现验证身份证号等
2015/06/04 Javascript
js简单工厂模式用法实例
2015/06/30 Javascript
JS+CSS实现的蓝色table选项卡效果
2015/10/08 Javascript
解析javascript瀑布流原理实现图片滚动加载
2016/03/10 Javascript
javascript实现平滑无缝滚动
2020/08/09 Javascript
自己封装的一个原生JS拖动方法(推荐)
2016/11/22 Javascript
AngularJs导出数据到Excel的示例代码
2017/08/11 Javascript
JS处理数据四舍五入(tofixed与round的区别详解)
2017/10/26 Javascript
10个经典的网页鼠标特效代码
2018/01/09 Javascript
使用JavaScript生成罗马字符的实例代码
2018/06/08 Javascript
Puppeteer环境搭建的详细步骤
2018/09/21 Javascript
kafka调试中遇到Connection to node -1 could not be established. Broker may not be available.
2019/09/17 Javascript
p5.js临摹旋转爱心
2019/10/23 Javascript
Vue+Java 通过websocket实现服务器与客户端双向通信操作
2020/09/22 Javascript
[03:57]《不朽》——2015DOTA2国际邀请赛—中国军团出征主题曲MV
2015/07/15 DOTA
Python中用Decorator来简化元编程的教程
2015/04/13 Python
python 中split 和 strip的实例详解
2017/07/12 Python
使用Python制作简单的小程序IP查看器功能
2019/04/16 Python
python递归法解决棋盘分割问题
2019/07/17 Python
python3+django2开发一个简单的人员管理系统过程详解
2019/07/23 Python
Python 项目转化为so文件实例
2019/12/23 Python
银行职员思想汇报
2013/12/31 职场文书
人事专员的岗位职责
2014/03/01 职场文书
网吧七夕活动策划方案
2014/08/31 职场文书
2014年幼儿园教研工作总结
2014/12/04 职场文书
2015年财务个人工作总结范文
2015/05/22 职场文书
MySQL中日期型单行函数代码详解
2021/06/21 MySQL
Vue + iView实现Excel上传功能的完整代码
2021/06/22 Vue.js
CSS中calc(100%-100px)不加空格不生效
2023/05/07 HTML / CSS