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父窗口控制只弹出一个子窗口
Apr 10 Javascript
在模板页面的js使用办法
Apr 01 Javascript
理解Javascript_15_作用域分配与变量访问规则,再送个闭包
Oct 20 Javascript
文本域中换行符的替换示例
Mar 04 Javascript
JS简单测试循环运行时间的方法
Sep 04 Javascript
javascript 判断一个对象为数组的方法
May 03 Javascript
ligerUI---ListBox(列表框可移动的实例)
Nov 28 Javascript
详解Angular2学习笔记之Html属性绑定
Jan 03 Javascript
详解Webpack+Babel+React开发环境的搭建的方法步骤
Jan 09 Javascript
详解vue-cli项目中的proxyTable跨域问题小结
Feb 09 Javascript
轻量级JS Cookie插件js-cookie的使用方法
Mar 22 Javascript
详解jQuery-each()方法
Mar 13 jQuery
关于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
咖啡的传说和历史
2021/03/03 新手入门
PHP音乐采集(部分代码)
2007/02/14 PHP
PHP中Cookie的使用详解(简单易懂)
2017/04/28 PHP
tp框架(thinkPHP)实现三次登陆密码错误之后锁定账号功能示例
2018/05/24 PHP
Jquery从头学起第四讲 jquery入门教程
2010/08/01 Javascript
Jquery刷新页面背景图片随机变换的实现方法
2013/03/15 Javascript
jquery实现select选中行、列合计示例
2014/04/25 Javascript
将HTML的左右尖括号等转义成实体形式的两种实现方式
2014/05/04 Javascript
jQuery实现hover合成事件的方法
2015/08/06 Javascript
全面解析多种Bootstrap图片轮播效果
2016/05/27 Javascript
Angular将填入表单的数据渲染到表格的方法
2017/09/22 Javascript
微信小程序实现折叠面板
2018/01/31 Javascript
浅谈如何通过node.js对数据进行MD5加密
2018/05/16 Javascript
JavaScript之实现一个简单的Vue示例
2019/01/17 Javascript
微信小程序 扭蛋抽奖机css3动画实现详解
2019/07/19 Javascript
Vue 动态组件components和v-once指令的实现
2019/08/30 Javascript
vue中使用v-for时为什么不能用index作为key
2020/04/04 Javascript
javascript实现移动端上传图片功能
2020/08/18 Javascript
vue自定义指令和动态路由实现权限控制
2020/08/28 Javascript
[51:32]Optic vs Serenity 2018国际邀请赛淘汰赛BO3 第一场 8.22
2018/08/23 DOTA
Python中类的定义、继承及使用对象实例详解
2015/04/30 Python
python3批量删除豆瓣分组下的好友的实现代码
2016/06/07 Python
Python 3中的yield from语法详解
2017/01/18 Python
对pandas中时间窗函数rolling的使用详解
2018/11/28 Python
python实现连续图文识别
2018/12/18 Python
Python socket实现多对多全双工通信的方法
2019/02/13 Python
解决.ui文件生成的.py文件运行不出现界面的方法
2019/06/19 Python
python对文件目录的操作方法实例总结
2019/06/24 Python
python3实现带多张图片、附件的邮件发送
2019/08/10 Python
技校毕业生自荐书
2014/05/23 职场文书
2014年小学国庆节活动方案
2014/09/16 职场文书
党委班子纠正“四风”问题整改措施
2014/10/28 职场文书
2015年信息宣传工作总结
2015/05/26 职场文书
HashMap实现保存两个key相同的数据
2021/06/30 Java/Android
Python中的pprint模块
2021/11/27 Python
Python实现Hash算法
2022/03/18 Python