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 相关文章推荐
一个js写的日历(代码部分网摘)
Sep 20 Javascript
node.js中的buffer.copy方法使用说明
Dec 14 Javascript
jQuery获取select选中的option的value值实现方法
Aug 29 Javascript
利用jQuery实现打字机字幕效果实例代码
Sep 02 Javascript
javascript 中的事件委托详解
Oct 25 Javascript
Bootstrap面板使用方法
Jan 16 Javascript
如何理解Vue的作用域插槽的实现原理
Aug 19 Javascript
js原生实现移动端手指滑动轮播图效果的示例
Jan 02 Javascript
jQuery利用cookie 实现本地收藏功能(不重复无需多次命名)
Nov 07 jQuery
JavaScript实现动态留言板
Mar 16 Javascript
JS的时间格式化和时间戳转换函数示例详解
Jul 27 Javascript
JS变量提升及函数提升实例解析
Sep 03 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
10个实用的PHP代码片段
2011/09/02 PHP
php中mysql模块部分功能的简单封装
2011/09/30 PHP
解析php php_openssl.dll的作用
2013/07/01 PHP
输入值/表单提交参数过滤有效防止sql注入的方法
2013/12/25 PHP
PHP实现将MySQL重复ID二维数组重组为三维数组的方法
2016/08/01 PHP
Laravel5.5 数据库迁移:创建表与修改表示例
2019/10/23 PHP
laravel excel 上传文件保存到本地服务器功能
2019/11/14 PHP
刷新页面实现方式总结(HTML,ASP,JS)
2008/11/13 Javascript
js Select下拉列表框进行多选、移除、交换内容的具体实现方法
2013/08/13 Javascript
AngularJS控制器controller正确的通信的方法
2016/01/25 Javascript
jQuery获取单击节点对象的方法
2016/06/02 Javascript
JavaScript调试的多个必备小Tips
2017/01/15 Javascript
微信小程序实现无限滚动列表
2020/05/29 Javascript
jQuery选择器之基本过滤选择器用法实例分析
2019/02/19 jQuery
详解Vue demo实现商品列表的展示
2019/05/07 Javascript
浅谈Vue项目骨架屏注入实践
2019/08/05 Javascript
Vue中的this.$options.data()和this.$data用法说明
2020/07/26 Javascript
python3编写C/S网络程序实例教程
2014/08/25 Python
Python栈算法的实现与简单应用示例
2017/11/01 Python
TF-IDF与余弦相似性的应用(二) 找出相似文章
2017/12/21 Python
python实现Oracle查询分组的方法示例
2020/04/30 Python
Python RabbitMQ实现简单的进程间通信示例
2020/07/02 Python
详解纯CSS3制作的20种loading动效
2017/07/05 HTML / CSS
css3中新增的样式使用示例附效果图
2014/08/19 HTML / CSS
奥地利购买珠宝和手表网站:ELLA JUWELEN
2019/09/03 全球购物
温泉秘密:Onsen Secret
2020/07/06 全球购物
北京银河万佳Java面试题
2012/03/21 面试题
介绍一下Prototype的$()函数,$F()函数,$A()函数都是什么作用?
2014/03/05 面试题
会计职业生涯规划范文
2014/01/04 职场文书
竞选文艺委员演讲稿
2014/04/28 职场文书
移交协议书
2014/08/19 职场文书
敬老月活动总结
2014/08/28 职场文书
详解Laravel制作API接口
2021/05/31 PHP
微信小程序实现聊天室功能
2021/06/14 Javascript
ORM模型框架操作mysql数据库的方法
2021/07/25 MySQL
Linux、ubuntu系统下查看显卡型号、显卡信息详解
2022/04/07 Servers