ExtJS2.0開發與實踐筆記[1]——ExtJS中的Dialog與Form

ExtJS2.0中提供了一整套的web表示層UI解決方案，令我們可以非常輕易的實現平時較為複雜的javascript操作，在此我以表示層開發中使用較多的Dialog與Form功能進行一次ExtJS2.0的實現演示。

ExtJS2.0的配置及執行方式請參閱 ExtJS2.0開發與實踐筆記[0]-初識ExtJS

DialogExt.js (此中包含了ExtJS的確定，分支選擇，進度條，輸入框等四個應用例項)

/**

*

*/

var DialogExt=function(){

/**

* 追蹤輸出

* @param {Object} str

*/

var trace=function(str){

//在ExtJS2.0中，log由Ext統一排程

Ext.log(str);

};

//設定Ext.Button別名為Button

var Button=Ext.Button;

//設定Ext.MessageBox別名為MessageBox

var MessageBox=Ext.MessageBox;

//變數設定，用於儲存DialogExt自身及當中鍵鈕

var root;

var btn0;

var btn1;

var btn2;

var btn3;

//返回操作

return {

//初始化函式

init:function(){

//設定root等於this

root=this;

//生成Ext按鈕，繫結資料到Element，renderTo為繫結的按鈕名，text為輸出內容

btn0=new Button({renderTo:`a`,text:`確定選項`});

btn1=new Button({renderTo:`b`,text:`yes/no選項`});

btn2=new Button({renderTo:`c`,text:`輸入框選項`});

btn3=new Button({renderTo:`d`,text:`進度條選項`});

//確定選項

btn0.on(`click`,function() {

MessageBox.alert(

`訊息框`,

`Ext很簡單。`,

root.onResult);

});

//yes/no選項

btn1.on(`click`,function(evt) {

MessageBox.confirm(

`提問`,

`Ext是否很容易掌握？`,

root.onResult);

});

//輸入框選項

btn2.on(`click`,function(evt) {

MessageBox.prompt(

`輸入框`,

`輸入內容：`,

root.onResult);

});

//進度條選項

btn3.on(`click`,function() {

//生成進度條，分別設定了標題，資訊，寬，是否自動前進進度，是否自動關閉進度5項

MessageBox.show({

title :`進度條`,

msg :`初始化中…`,

width :240,

progress:true,

closable:false

});

//進度條定時處理

var f=function(v) {

return function(){

if (v<=10) {

MessageBox.updateProgress(

v/10,`讀取進度 `+v+`/10`);

} else {

//隱藏Ext訊息框

MessageBox.hide();

}

};

//進度條時間設定

for (var i=1;i<=11;i++) {

setTimeout(f(i),i*1000);

}

});

},

//當前操作物件輸出

onResult:function(button,text){

trace(“點選按鈕:“+button+“ 輸出文字:“+text);

}

};

}();

//設定onReady,Ext將在dom載入完畢後自動呼叫其中操作

Ext.onReady(DialogExt.init,DialogExt,true);

Dialog.html

<html>

<head>

<title>DialogExt</title>

<!–載入ExtJs資源[當呼叫Ext.log除錯時，需要使用debug方式的js]–>

<!–載入我的js檔案–>

</head>

<body>

<!–設定Element，以供DialogExt.js呼叫–>

<tr>

</tr>

</table>

</body>

</html>

效果圖如下：

form應用例項，在此我演示了Ext中簡單的Form生成方式。

FormExt.js

FormExt=function(){

var trace=function(str){

Ext.log(str);

};

//1.1版為Ext.form.Form

var Form=Ext.form.FormPanel;

var MessageBox=Ext.MessageBox;

var TextField=Ext.form.TextField;

//變數設定

var root;

var form;

var textField0;

var textField1;

var textField2;

var textField3;

return {

//初始化FormExt

init:function(){

root=this;

//生成窗體

form=new Form({

//樣式

baseCls: `x-plain`,

//label寬

labelWidth: 75,

//資料提交地址

url:`save.jspa`

});

//生成TextField

textField0=new TextField({

fieldLabel:`姓名`,

name :`name`,

width :175,

allowBlank:false

});

textField1=new TextField({

fieldLabel:`地址`,

name :`address`,

width :175

});

textField2=new TextField({

fieldLabel:`年齢`,

name :`age`,

width :175

});

textField3=new TextField({

fieldLabel:`email`,

name :`email`,

//驗證型別為email

vtype :`email`,

width :175

});

//將TextField載入入form

form.add(textField0,textField1,textField2,textField3);

//生成按鈕

form.addButton(`儲存`,function(){

MessageBox.alert(`訊息框`,`儲存資料`)});

form.addButton(`取消`,function(){

MessageBox.alert(`訊息框`,`取消操作`)});

//將form內容實施到名稱為frmExt的div上

form.render(`frmExt`);

}

};

}();

//設定onReady,Ext將在dom載入完畢後自動呼叫其中操作

Ext.onReady(FormExt.init,FormExt,true);

FormExt.html

<html>

<head>

<title>FormExt</title>

<!–ExtJS資源引入–>

<!–我的js檔案–>

</head>

<body>

<!–frame–>

<h3 style=”margin-bottom:5px;”>Ext的form</h3>

</div></div></div>

</div>

</body>

</html>

ExtJS自2.0開始UI庫已經有了極大的豐富，基本可滿足我們日常開發所需的一切效果，而在Java操作中我們習以為常的很多功能，都能夠在Ext找到對應的操作。在下回我將著重介紹Ext中Layout的使用。

PS:由於ExtJS類庫較多，所以將於較後進行介紹，目前僅以例項為主，現階段請參閱ExtJS2.0的doc文件。

本文轉自 cping 51CTO部落格，原文連結:http://blog.51cto.com/cping1982/129953

ExtJS2.0開發與實踐筆記[1]——ExtJS中的Dialog與Form

相關文章