快捷導(dǎo)航

ExtJS4 組件化編程，動(dòng)態(tài)加載，面向?qū)ο?，Direct

更新時(shí)間：2011年05月12日 23:14:25 作者：

ExtJS4終于出了正式版，體驗(yàn)一下面官方推薦的向?qū)ο缶幊套罴褜?shí)踐過(guò)去的做法是new對(duì)象或者Ext.create一個(gè)對(duì)象，每個(gè)對(duì)象都要先實(shí)例化才能使用

ExtJS4推薦定義類(lèi)的時(shí)候均使用Ext.define，利用xtype動(dòng)態(tài)加載
修改了以前的一個(gè)登陸窗口，感覺(jué)用官方推薦的方法還是很不錯(cuò)的
但還有一些問(wèn)題沒(méi)有想得非常清楚，先把代碼貼出來(lái)一起研究下。請(qǐng)看代碼中的注釋~~
使用Ext+.Net，用Direct模式傳遞數(shù)據(jù)
Default.aspx:

復(fù)制代碼代碼如下:

 
<!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學(xué)習(xí)</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; 
//驗(yàn)證提示信息顯示位置 
Ext.form.Field.prototype.msgTarget = 'side'; 
//如果是繼承Ext.container.Viewport的實(shí)例，直接new出來(lái)就可以，會(huì)自動(dòng)渲染到body 
//本例中Ext.app.LoginDialog繼承自Ext.Window，需要調(diào)用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

復(fù)制代碼代碼如下:

 
//LoginDialog類(lèi)，繼承Ext.Window，上層對(duì)象使用new Ext.app.LoginDialog().show()動(dòng)態(tài)實(shí)例化并顯示。 
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'動(dòng)態(tài)實(shí)例化Ext.app.LoginFormPanel，并使用api參數(shù)指定load和submit的服務(wù)器端方法。本例中只有submit 
items: {itemId: 'loginFormPanel',xtype: 'LoginFormPanel',api: {submit: MyApp.ChcekLogin.Check}} 
}); 

Ext.app.LoginFormPanel.js

復(fù)制代碼代碼如下:

 
//指定遠(yuǎn)程調(diào)用的Provider，注意不能在initComponent中指定，因?yàn)閏onfig屬性設(shè)置是在initComponent之前，會(huì)報(bào)api找不到錯(cuò)誤 
Ext.direct.Manager.addProvider(Ext.app.REMOTING_API); 
//loginForm類(lèi)，繼承Ext.form.FormPanel，使用alias注冊(cè)至ComponentMgr，上層對(duì)象使用xtype:LoginFormPanel動(dòng)態(tài)實(shí)例化。 
//form的submit()方法使用Direct提交，上層對(duì)象實(shí)例化本類(lèi)的時(shí)候使用config中的api屬性指定服務(wù)器端方法。 
//很奇怪的是不能在Ext.define或者Ext.apply中指定api屬性，指定了實(shí)例化之后也會(huì)丟失，然后報(bào)url參數(shù)沒(méi)有的錯(cuò)誤，只能在上層對(duì)象實(shí)例化本類(lèi)得時(shí)候使用config中的api屬性指定api 
//如果在這里使用原始的new方法指定api也可以，是ext4中的問(wèn)題？有誰(shuí)知道的發(fā)mail告訴我，萬(wàn)分感謝~~ 
//使用Ext.define定義本類(lèi)，定義中使用initComponent指定實(shí)例化之前需要執(zhí)行的操作。 
//按面向?qū)ο缶幊趟枷耄绢?lèi)不調(diào)用任何上層對(duì)象，方法中不指定scope: this 
Ext.define('Ext.app.LoginFormPanel',{ 
extend:'Ext.form.FormPanel', 
initComponent: function(){ 
//初始化部分需要完成的功能 
//alert("Ext.form.FormPanel 開(kāi)始加載……"); 
//貌似Ext.apply得來(lái)的屬性和在Ext.define中定義的沒(méi)什么區(qū)別，為什么要用這個(gè)呢？誰(shuí)來(lái)教教我？ 
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: '用戶(hù)名稱(chēng)', 
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: '用戶(hù)密碼', 
allowBlank: false, anchor: '90%', enableKeyEvents: true, 
listeners: { 
keypress: function (field, e) { 
if (e.getKey() == 13) { 
this.nextSibling().focus(); 
} 
} //keypress 
} 
}, 
{ xtype: 'textfield', name: 'txt3', fieldLabel: '驗(yàn)證碼', 
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="如果看不清楚請(qǐng)單擊圖片更換圖片。" 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">*如果圖片不清晰請(qǐng)單擊圖片更換圖片</div>', border: false } 
], //items 
buttons: [ 
{ text: '確定', handler: function () { this.findParentByType('LoginFormPanel').submit(); }}, 
//面向本對(duì)象編程，這里不要加入 scope: this，否則function會(huì)指定到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參數(shù)訪問(wèn)原submit的form 
form.reset(); 
//使用action.result訪問(wèn)結(jié)果集 
Ext.MessageBox.alert('登陸失敗', action.result.data); 
} 
}) 
} 
} 
}); 