ExtJS4 組件化編程，動態載入，物件導向，Direct

最後更新：2013-10-16 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

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);
}
})
}
}
});

過程已經寫到注釋裡面了，有什麼問題請在下面討論

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More