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> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>DialogExt</title> <!--加載ExtJs資源[當調用Ext.log調試時，需要使用debug方式的js]--> <link rel="stylesheet" type="text/css" href="resources/css/ext-all.css" /> <script type="text/javascript" src="adapter/ext/ext-base.js"></script> <script type="text/javascript" src="ext-all-debug.js"></script> <!--加載我的js文件--> <script type="text/javascript" src="DialogExt.js"></script></head><body> <!--設置Element，以供DialogExt.js調用--> <table cellspacing="5"> <tr> <td><div id="a"></div></td> <td><div id="b"></div></td> <td><div id="c"></div></td> <td><div id="d"></div></td> </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> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>FormExt</title> <!--ExtJS資源引入--> <link rel="stylesheet" type="text/css" href="resources/css/ext-all.css" /> <script type="text/javascript" src="adapter/ext/ext-base.js"></script> <script type="text/javascript" src="ext-all-debug.js"></script> <!--我的js文件--> <script type="text/javascript" src="FormExt.js"></script></head><body> <!--frame--> <div style="width:300px;"> <div class="x-box-tl"><div class="x-box-tr"><div class="x-box-tc"></div></div></div> <div class="x-box-ml"><div class="x-box-mr"><div class="x-box-mc"> <h3 style="margin-bottom:5px;">Ext的form</h3> <div id="frmExt"></div> </div></div></div> <div class="x-box-bl"><div class="x-box-br"><div class="x-box-bc"></div></div></div> </div></body></html>
ExtJS自2.0開始UI庫已經有了極大的豐富，基本可滿足我們日常開發所需的一切效果，而在Java操作中我們習以為常的很多功能，都能夠在Ext找到對應的操作。在下回我將著重介紹Ext中Layout的使用。
PS:由于ExtJS類庫較多，所以將于較后進行介紹，目前僅以實例為主，現階段請參閱ExtJS2.0的doc文檔。
浙公網安備 33010602011771號