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 相关文章推荐
使用Microsoft Ajax Minifier减小JavaScript文件大小的方法
Apr 01 Javascript
JS实现的通用表单验证插件完整实例
Aug 20 Javascript
JavaScript中的数组遍历forEach()与map()方法以及兼容写法介绍
May 19 Javascript
js实现文本上下来回滚动
Feb 03 Javascript
javascript基本数据类型和转换
Mar 17 Javascript
web前端vue filter 过滤器
Jan 12 Javascript
Bootstrap table中toolbar新增条件查询及refresh参数使用方法
May 18 Javascript
vue-cli 使用vue-bus来全局控制的实例讲解
Sep 15 Javascript
详解element-ui日期时间选择器的日期格式化问题
Apr 08 Javascript
Vue 实现html中根据类型显示内容
Oct 28 Javascript
浅析微信小程序自定义日历组件及flex布局最后一行对齐问题
Oct 29 Javascript
vue组件是如何解析及渲染的?
Jan 13 Vue.js
关于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实现图片文件与下载文件防盗链的方法
2014/11/03 PHP
PHP变量赋值、代入给JavaScript中的变量
2015/06/29 PHP
js nextSibling属性和previousSibling属性概述及使用注意
2013/02/16 Javascript
jQuery获取(选中)单选,复选框,下拉框中的值
2014/02/21 Javascript
js 实现的可折叠留言板(附源码下载)
2014/07/01 Javascript
js日期相关函数dateAdd,dateDiff,dateFormat等介绍
2016/09/24 Javascript
vue.js声明式渲染和条件与循环基础知识
2017/07/31 Javascript
vue中使用极验验证码的方法(附demo)
2019/12/04 Javascript
node.js使用yargs处理命令行参数操作示例
2020/02/11 Javascript
微信小程序中target和currentTarget的区别小结
2020/11/06 Javascript
Python ValueError: invalid literal for int() with base 10 实用解决方法
2015/06/21 Python
python导入时小括号大作用
2017/01/10 Python
pandas数据分组和聚合操作方法
2018/04/11 Python
python实现对文件中图片生成带标签的txt文件方法
2018/04/27 Python
python批量获取html内body内容的实例
2019/01/02 Python
安装好Pycharm后如何配置Python解释器简易教程
2019/06/28 Python
python对绑定事件的鼠标、按键的判断实例
2019/07/17 Python
Pytorch加载部分预训练模型的参数实例
2019/08/18 Python
Python 3.8正式发布,来尝鲜这些新特性吧
2019/10/15 Python
python中图像通道分离与合并实例
2020/01/17 Python
python对接ihuyi实现短信验证码发送
2020/05/10 Python
基于python实现监听Rabbitmq系统日志代码示例
2020/11/28 Python
台湾深度自由行旅游平台:Tripbaa趣吧
2017/10/10 全球购物
销售顾问的岗位职责
2013/11/13 职场文书
婚礼证婚人证婚词
2014/01/08 职场文书
24岁生日感言
2014/01/13 职场文书
2014年维修电工工作总结
2014/11/20 职场文书
新员工入职欢迎词
2015/01/23 职场文书
辞职书格式样本
2015/02/26 职场文书
2015年幼儿园班主任工作总结
2015/05/12 职场文书
十七岁的单车观后感
2015/06/12 职场文书
2016年寒假生活小结
2015/10/10 职场文书
2019年年中职场激励人心语录30条
2019/08/07 职场文书
CSS中em的正确打开方式详解
2021/04/08 HTML / CSS
如何Tomcat中使用ipv6地址
2022/05/06 Servers
Linux服务器离线安装 nginx的详细步骤
2022/06/16 Servers