ExtJS 4组件化编程 使用Ext+.Net动态加载，面向对象
ExtJS4终于出了正式版，体验一下面官方推荐的向对象编程最佳实践
过去的做法是new对象或者Ext.create一个对象，每个对象都要先实例化才能使用
ExtJS4推荐定义类的时候均使用Ext.define，利用xtype动态加载
修改了以前的一个登陆窗口，感觉用官方推荐的方法还是很不错的
但还有一些问题没有想得非常清楚，先把代码贴出来一起研究下。请看代码中的注释~~
使用Ext+.Net，用Direct模式传递数据
Default.aspx:
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 3 <html xmlns="http://www.w3.org/1999/xhtml"> 4 5 <head> 6 7 <title>ExtJS学习</title> 8 9 <link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css" /> 10 11 <link rel="stylesheet" type="text/css" href="css/application.css" /> 12 13 <script src="ext/ext-all.js" type="text/javascript"></script> 14 15 <script src="ext/ext-lang-zh_CN.js" type="text/javascript"></script> 16 17 <script type="text/javascript" src="ChcekLogin.ashx"></script> 18 19 <script src="js/Ext.app.LoginFormPanel.js" type="text/javascript"></script> 20 21 <script type="text/javascript" src="js/Ext.app.LoginDialog.js"></script> 22 23 </head> 24 25 <body> 26 27 <div id="loading-mask"></div> 28 29 <div id="loading"> 30 31 <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> 32 33 </div> 34 35 <script type="text/javascript"> 36 37 //Ext.Loader.setConfig({ enabled: true }); 38 39 Ext.onReady(function () { 40 41 Ext.BLANK_IMAGE_URL = 'img/s.gif'; 42 43 Ext.QuickTips.init(); 44 45 Ext.Msg.minWidth = 300; 46 47 //验证提示信息显示位置 48 49 Ext.form.Field.prototype.msgTarget = 'side'; 50 51 //如果是继承Ext.container.Viewport的实例，直接new出来就可以，会自动渲染到body 52 53 //本例中Ext.app.LoginDialog继承自Ext.Window，需要调用show()方法才能显示 54 55 new Ext.app.LoginDialog().show(); 56 57 //250毫秒后删除加载提示信息 58 59 setTimeout(function () { 60 61 Ext.get('loading').remove(); 62 63 Ext.get('loading-mask').fadeOut({ remove: true }); 64 65 }, 250); 66 67 68 69 })//onReady 70 71 72 73 </script> 74 75 </body> 76 77 </html>
Ext.app.LoginDialog.js
1 //LoginDialog类，继承Ext.Window，上层对象使用new Ext.app.LoginDialog().show()动态实例化并显示。 2 3 Ext.define('Ext.app.LoginDialog',{ 4 5 extend:'Ext.Window', 6 7 title: '登陆', 8 9 plain: true, 10 11 closable: false, 12 13 closeAction: 'hide', 14 15 width: 400, 16 17 height: 300, 18 19 layout: 'fit', 20 21 border: false, 22 23 modal: true, 24 25 //使用xtype: 'LoginFormPanel'动态实例化Ext.app.LoginFormPanel，并使用api参数指定load和submit的服务器端方法。本例中只有submit 26 27 items: {itemId: 'loginFormPanel',xtype: 'LoginFormPanel',api: {submit: MyApp.ChcekLogin.Check}} 28 29 });
Ext.app.LoginFormPanel.js
1 //指定远程调用的Provider，注意不能在initComponent中指定，因为config属性设置是在initComponent之前，会报api找不到错误 2 3 Ext.direct.Manager.addProvider(Ext.app.REMOTING_API); 4 5 6 7 //loginForm类，继承Ext.form.FormPanel，使用alias注册至ComponentMgr，上层对象使用xtype:LoginFormPanel动态实例化。 8 9 //form的submit()方法使用Direct提交，上层对象实例化本类的时候使用config中的api属性指定服务器端方法。 10 11 //很奇怪的是不能在Ext.define或者Ext.apply中指定api属性，指定了实例化之后也会丢失，然后报url参数没有的错误，只能在上层对象实例化本类得时候使用config中的api属性指定api 12 13 //如果在这里使用原始的new方法指定api也可以，是ext4中的问题？有谁知道的发mail告诉我，万分感谢~~ 14 15 //使用Ext.define定义本类，定义中使用initComponent指定实例化之前需要执行的操作。 16 17 //按面向对象编程思想，本类不调用任何上层对象，方法中不指定scope: this 18 19 Ext.define('Ext.app.LoginFormPanel',{ 20 21 22 23 extend:'Ext.form.FormPanel', 24 25 initComponent: function(){ 26 27 //初始化部分需要完成的功能 28 29 //alert("Ext.form.FormPanel 开始加载……"); 30 31 //貌似Ext.apply得来的属性和在Ext.define中定义的没什么区别，为什么要用这个呢？谁来教教我？ 32 33 Ext.apply(this, { 34 35 //labelAlign: 'left' 36 37 }); 38 39 this.callParent(); 40 41 }, 42 43 alias:'widget.LoginFormPanel', 44 45 labelAlign: 'left', 46 47 buttonAlign: 'center', 48 49 bodyStyle: 'padding:5px', 50 51 frame: true, labelWidth: 80, 52 53 54 55 items: [ 56 57 { xtype: 'textfield', name: 'txt1', fieldLabel: '用户名称', 58 59 allowBlank: false, anchor: '90%', enableKeyEvents: true, 60 61 listeners: { 62 63 keypress: function (field, e) { 64 65 if (e.getKey() == 13) { 66 67 this.nextSibling().focus(); 68 69 } 70 71 } //keypress 72 73 } 74 75 }, 76 77 { xtype: 'textfield', inputType: 'password', name: 'txt2', fieldLabel: '用户密码', 78 79 allowBlank: false, anchor: '90%', enableKeyEvents: true, 80 81 listeners: { 82 83 keypress: function (field, e) { 84 85 if (e.getKey() == 13) { 86 87 this.nextSibling().focus(); 88 89 } 90 91 } //keypress 92 93 } 94 95 }, 96 97 { xtype: 'textfield', name: 'txt3', fieldLabel: '验证码', 98 99 allowBlank: false, anchor: '90%', mixLength: 6, maxLength: 6, enableKeyEvents: true, 100 101 listeners: { 102 103 keypress: function (field, e) { 104 105 if (e.getKey() == 13) { 106 107 this.ownerCt.submit(); 108 109 } 110 111 } //keypress 112 113 } 114 115 }, 116 117 { 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 }, 118 119 { xtype: 'panel', height: 30, html: '<div style="margin:5px 0px 0px 84px;color:red">*如果图片不清晰请单击图片更换图片</div>', border: false } 120 121 ], //items 122 123 buttons: [ 124 125 { text: '确定', handler: function () { this.findParentByType('LoginFormPanel').submit(); }}, 126 127 //面向本对象编程，这里不要加入 scope: this，否则function会指定到window上面 128 129 { text: '重置', handler: function () { this.findParentByType('LoginFormPanel').form.reset(); } } 130 131 ], 132 133 submit: function () { 134 135 if (this.getForm().isValid()) { 136 137 this.getForm().submit({ 138 139 success: function (form, action) { 140 141 window.location = "main.htm"; 142 143 }, 144 145 failure: function (form, action) { 146 147 //使用form参数访问原submit的form 148 149 form.reset(); 150 151 //使用action.result访问结果集 152 153 Ext.MessageBox.alert('登陆失败', action.result.data); 154 155 } 156 157 }) 158 159 } 160 161 } 162 163 });
过程已经写到注释里面了
