ExtJs筆記

1.Ext簡介

.Extjs是一個Ajax框架，是一個用javascript寫的，用於在客戶端建立豐富多彩的web應用程序界面。ExtJs能夠用來開發RIA（Rich Internet Application,富互聯網應用系統）的Ajax應用框架。
ExtJs是一個用javascript寫的，主要用於建立前端用戶界面，是一個與後臺技術無關的前端ajax框架。所以，能夠把ExtJs用在.Net,Java.Php等各類開發語言開發的應用中

2.Ext庫文件說明                                                                

.要使用extjs，那麼首先要獲得extjs庫文件，該框架是開源的，能夠直接從官方網站下載。
解壓後看到文件有：
adapter: 負責將裏面提供的第三方底層庫（包括ext自帶的底層庫）映射爲Ext所支持的底層庫。
build ：壓縮後的ext所有源碼（裏面分類存放）
docs ： API幫助文檔
examples ：提供使用ExtJS技術作出的小實驗
resources ：ExtUI資源文件目錄，如CSS、圖片文件都存放在這裏。
source :  沒有通過壓縮的Ext所有的源碼（裏面分類存放），聽從Lesser GNU開源的協議。
Ext-all.js ： 壓縮後的Ext所有源碼
ext-all-debug.js ：未經壓縮的Ext所有的源碼（用於調試）
ext-core.js ：壓縮後的Ext的核心組件，包括sources/core下的全部類。
ext-core-debug.js： 未經壓縮的Ext核心組件，包括sources/core下的全部類。

3.應用ExtJs

應用extjs須要在頁面中引入extjs的樣式及extjs庫文件。樣式文件爲resources/css/ext-all.css，extjs的js庫文件主要包含兩個：adapter/ext/ext-base.js及ext-all.js。其中ext-base.js表示框架基礎庫，ext-all.js是extjs的核心庫。Adapter表示適配器，也就是說能夠有多種適配器，所以能夠把adapter/ext/ext-base.js換成adapter/jquery/ext-jquery-adapter.js,或adapter/prototype/ext-prototype-adapter.js等。

一個要使用extjs框架的頁面中通常要包括下面幾句：

<link rel=」stylesheet」  type=」text/css」 href=」extjs/resources/css/ext-all.css」/>

<script  type=」text/javascript」 src=」extjs/adapter/ext/ext-base.js」></script>

<script  type=」text/javascript」 src=」extjs/ext-all.js」></script>

在ExtJs庫文件及頁面內容加載完後，ExtJs會執行Ext.onReady中指定的函數。通常狀況下用戶的ExtJs應用都是從Ext.onReady開始的，使用ExtJs應用程序的代碼大體以下：

<script>

Function fn()

{

  Alert(‘ExtJs 庫以加載’);

}

Ext.onReady(fn);

</script>

Fn也能夠寫成一個匿名函數的形式，所以上面的代碼也能夠改爲下面的形式。

<script>

Ext.onReady(function()

{

   Alert(‘ExtJs庫已加載’);

})；

</script>

4.Ext類庫組成

ExtJs由一系列的類庫組成，一旦頁面成功加載了ExtJs庫後，咱們就能夠在頁面中經過javascript調用ExtJs的類及控件來實現須要的功能。ExtJs的類庫由如下幾部分組成（在source文件夾下）

底層API（core）：底層API中提供了對DOM操做.事件處理.DOM查詢器等基礎的功能.

控件（widgets）：是指能夠直接在頁面中建立的可視化組件，好比面板、選項板、表格、樹、窗口等。

使用工具Utils：Ext提供了不少的使用工具，能夠方便咱們實現如數據內容格式化、json數據編碼或解碼、發送Ajax請求、cookie管理、css管理等擴展功能等。



<script>

var panel=new Ext.Panel({

title:’hello’,

width:300,

height:200,

html:’<h1>Hello,easyjf open source</h1>’

});

panel.render(「hello」);

</script>

對於容器中的子元素組件，都支持延遲加載的方式建立控件，此時能夠直接在父組件的構造函數中，經過items傳遞數組方式來構造組件對象。

var panel=new Ext.TabPanel({

renderTo:’hello’,

width:300,

height:200,

items:[{

title:’面板’,

height:300

},{

title:’面板2’,

height:30

}]

});

或者

var panel=new Ext.TabPanel({

renderTo:’hello’,

width:300,

height:200,

items:[

new Ext.Panel({title:」面板1」,height:30}),

new Ext.Panel({title:」面板2」,height:30})

]

});

前者不但省略掉了new Ext.Panel這個構造函數，最重要前者只有在初始化TabPanel的時候，纔會建立子面板，而第二種方式則在程序一開始就會建立子面板。也就是說前者是經過延長加載的方式建立組件。



5.ExtJs中的事件

1.  <script>

     function a()

{

     alert(‘some thing’);

}

Ext.onReady(function(){

  // Ext.get("btnAlert").addListener("click",a);

  //Ext.get("btnAlert").on("click",a);

  Ext.get("btnAlert").on("click",a,this,{delay:2000});  //點擊按鈕2000毫秒也就是2秒後會彈出提示信息框});

  </script>

  <input type=」button」  value=」alert」  id=」btnAlert」>



2.<script>

Ext.onReady(function(){

  var win=new Ext.Window({

     title:"不能關閉的窗口",

     height:200,

     width:300,

     listeners:{"beforedestroy":function(obj){

        alert("想關閉我，這是不可能的");

        obj.show();

        return false;

     }}

  });

//  win.on("beforedestroy",function(obj){

//    alert("想關閉我，這是不可能的");

//  obj.show();

//  return false;

//  });

  win.show();

});

</script>

3. <script>

Ext.onReady(function(){

function handlerClick(e)  //e就是一個EventObject對象

{

  e.preventDefault();

  var target=e.getTarget();

  alert(e.getCharCode()+"   "+e.getXY());

}

Ext.get("myDiv").on("click",handlerClick);

});

</script>



6.ExtJs核心組件

1.Component也就是組件，Ext中使用Ext.Component類來定義組件，其它具體的組件及控件都是繼承該類實現。Component定義了一個標準的Ext組件生命週期管理：建立、渲染、銷燬等。另外還包含了全部組件公有的一些基本屬性及行爲好比顯示或隱藏、啓用或禁用等。能夠經過Ext.getCmp方法來得到一個組件。全部的組件均可以放到Ext.Container中，並自動支持延遲渲染。Ext中全部須要放到一個layout中渲染顯示的可視化部件須要繼承Component或其子類。

全部component都有一個Ext組件類型值，即xtype屬性，可使用getXType方法獲得組件的xtype值，isXType是用來判斷一個組件是否屬於指定的類型。



2.BoxComponent，父類是Ext.Component，全部盒狀組件的基類，全部具備邊界屬性的組件的基類。全部的容器類都繼承了Ext.BoxComponent 

屬性： autoHeight 自動高度適應，設置爲true則使用樣式height：‘auto’，不然爲固定的高度，默認爲false

       autoWidth 自動寬度適應，設置爲true則使用樣式width：‘auto’， 不然爲固定的高度，默認爲false



3.Container 容器 父類Ext.BoxComponent 。是Ext中全部具備容器功能的組件的基類。容器組件包含處理子項的一些基本行爲，負責添加、插入、刪除這些子項。容器提供佈局支持功能，能夠經過佈局來可視化渲染容器中的子組件。這個類是用於共其它容器類繼承，通常不直接使用new關鍵字建立這個類的實例。



7 使用面板

面板Panel是ExtJs控件的基礎，不少高級控件都是在面板的基礎上擴展的，還有其它大多數控件也都直接或間接與它有關係。應用程序的界面通常狀況下是由一個一個的面板經過不一樣的組織方式造成。

面板組成部分：一個頂部工具欄（tbar），一個底部工具欄（bbar），面板頭部（header），面板尾部（bottom），面板主區域（body）幾個部分組成。  面板的類名爲Ext.Panel，其xtype爲panel. 如例子：panel2.html



屬性： autoScroll     是否自動添加滾動條。爲true則在面板的body元素中使用樣式 overflow：‘auto‘，

                    從而在學要的時候會顯示一個滾動條。爲false則表示不顯示滾動條，會致使截斷多餘的內容，默認值爲false。

       hideCollapseTool   在collapsible爲true時，是否顯示關閉/開啓面板的按鈕，默認爲false



7.1工具欄Toolbar

面板中能夠有工具欄，工具欄能夠位於面板的頂部和底部，Ext中的工具欄是由Ext.Toolbar類表示的。是其它工具欄的基類。工具欄上能夠放按鈕、文本、分隔符等內容。能夠直接經過面板的tools配置選項往面板頭部加入預約義的工具欄選項。還能夠在頂部或底部工具欄中加入各類工具欄選項。（eg。panel2.html）



Ext中的工具欄中的項目主要由下面的類定義：

Ext.Toolbar.Button--------按鈕，xtype爲tbbutton

Ext.Toolbar.TextItem---------文本，xtype爲tbtext

Ext.Toolbar.Fill------------填充區域，xtype爲tbfill

Ext.Toolbar.Separator---------分隔符，xtype爲tbseparator

Ext.Toolbar.Spacer-----------一個空格，xtype爲tbspacer

Ext.Toolbar.SplitButton--------Split按鈕，xtype爲tbsplit

7.2選擇面板TabPanel

選擇面板也就是指包含Tab的面板，一個面板中會有多個tab，同一時刻活動tab只能是一個。選項面板在Ext中由類Ext.TabPanel來定義，該類直接繼承自Panel，所以他實際上也是一個面板。Ext並無針對選項面板中的Tab專門定義一個新的類，每個tab其實也就是普通的Panel而已。（eg。tabPanel.html）

7.3視圖區ViewPort

在前面的實例中，爲了顯示一個面板，咱們須要在頁面上添加一個<div>，而後把Ext控件渲染到這個div上。ViewPort表明整個瀏覽器顯示區域，該對象渲染到頁面的body區域，並會隨着瀏覽器顯示區域的大小自動改變，一個頁面中只能有一個ViewPort實例。

eg。Ext.onReady(function(){

new Ext.ViewPort({

  enableTabScroll:true,

  layout:」fit」,

  items:[{title:」面板」,

html:」」,

bbar:[{text:」button1」},

{text:」button2」}]

}]

});

});

ViewPort不須要在指定renderTo，而咱們也看到ViewPort確實填充了整個瀏覽器顯示區域，並會隨着瀏覽器顯示區域大小的改變而改變。

ViewPort主要用於程序的主頁面，能夠經過使用不一樣的佈局來搭建不一樣風格的應用程序主界面，在ViewPort上經常使用的佈局有fit，border等。（eg。viewPort.html）

8 窗口、對話框及提示框

8.1窗口Window

8.1.1窗口基本應用

ExtJs中窗口是由Ext.Window類定義，該類繼承自Ext.Panel，所以窗口實際上是一種特殊的面板Panel，窗口包含了浮動、可拖動、可關閉、最大化、最小化等特性。（eg、window.html）

8.1.2窗口分組

窗口是分組進行管理的，能夠對一組窗口進行操做，默認狀況下的窗口都是默認組Ext.WindowMgr中。窗口分組由類Ext.WindowGroup定義，該類包括bringToFrong、getActive、hideAll、sendToBack等方法用來對分組中的窗口進行的操做。（eg、windowGroup.html）

8.2對話框MessageBox

8.2.1對話框基本應用

Ext的對話框都封裝在Ext.MessageBox類，該類還有一個簡寫形式即Ext.Msg，能夠直接經過Ext.MessageBox或Ext.Msg類直接調用相應的對話框方法來顯示漂亮的Ext對話框。消息框MessageBox是異步的，不一樣於正常的JavaScript中的alert方法（將中斷瀏覽器的操做）。顯示一個MessageBox的時候不會影響其餘代碼的執行，所以，若是須要用戶在對消息框反饋以後執行一些代碼，就必需要使用回調函數。

1.   Ext.MessageBox.alert(「請注意」, 」 這是ExtJs的提示框 「);

2.   Ext.MessageBox.confirm(「請確認」,」是否真的要刪除指定的內容」,function(button,text){

if(button==」yes」)

{alert(「成功刪除」);}

});

3.  Ext.MessageBox.prompt(「輸入提示框」,」請輸入你的新年願望:」,function(button,text){

if(button==」yes」)

{alert(「你的新年願望是：」+text);}

else

{alert(「你放棄了操做」);}

});

在實際應用中，能夠直接使用MessageBox的show方法來顯示自定義的對話框。eg、

function save(button)

{

  if(button==」yes」)

{

//執行數據保存操做

}

else  if(button==」no」)

{

  //不保存數據

}

else

{

  //取消當前操做

}

}

Ext.MessageBox.show({

   title:’保存數據’,

   msg:’你已經做了一些數據操做，是否要保存當前內容的修改?’,

   buttons:Ext.Msg.YESNOCANCEL,

   fn:save,

   icon:Ext.MessageBox.QUESTION

});

8.2.2提示框Tip

提示框是指當咱們把鼠標移動並停留到頁面上的某一個元素上時，在頁面上會出現一個對該元素說明並懸浮在屏幕上的提示區域，當鼠標移出該元素，則該提示框會自動隱藏。

Tip繼承Panel，也就是說ExtJs中使用Panel來顯示提示框信息。

eg、Ext.onReady(function(){

var tip=new Ext.Tip({

html:」這是一個簡單的提示框」

});

var el=Ext.get(「hello」);

el.on({

「mouseover」:function(){

  tip.showBy(el);

},

「mouseout」:function(){

  tip.hide();

}

});

});

<div id=」hello」>提示框</div>



ExtJs在Tip類的基礎上，提供了專門用於元素提示信息的ToopTip以及在頁面中進行快速提示的QuickTip等類。直接使用ToopTip，則不須要本身在元素的mouseover及mouseout事件響應函數中手動處理信息提示框的隱藏及顯示。

Ext.onReady(function(){

var el=Ext.get(「hello」);

var tip=new Ext.ToolTip({

html:」這是一個簡單的提示框」,

target:el

});

});

…………….

9         佈局layout

9.1基本應用

所謂佈局就是指容器組件中子元素的分佈、排列組合方式。Ext的全部容器組件都支持佈局操做，每個容器都會有一個對應的佈局，佈局負責管理容器組件中子元素的排序、組合及渲染方式等。

ExtJs的佈局基類爲Ext.layout.ContainerLayout，其它佈局都繼承該類。ExtJs的容器組件包含一個layout及layoutConfig配置屬性，這兩個屬性用來指定容器使用的佈局及佈局的詳細配置信息。若是沒有指定容器組件的layout則默認會使用ContainerLayout做爲佈局,有的佈局學要layoutConfig配置，有的則不須要layoutConfig配置。

Ext.onReady(function(){

new Ext.Panel({

  renderTo:」hello」,

  width:400,

  height:200,

  layout:」column」,

  items:[{columnWidth:.5,   //width:100  可用來指定具體的寬度

title:」面板1」},

{columnWidth:.5,

title:」面板2」

}]

});

});

Ext中的一些容器組件都已經指定所使用的佈局，好比TabPanel使用card佈局、FormPanel使用form佈局，GridPanel中的表格使用column佈局等，咱們在使用這些組件的時候，不能給這些容器組件再指定另外的佈局。

9.2    Border區域佈局

Border佈局由類Ext.layout.BorderLayout定義，佈局名稱爲border。該佈局把容器分爲「東」、「南」、「西」、「北」、「中」五塊區域，分別由east , south , west , north , center來表示，在往容器中添加子元素的時候，咱們只須要經過region配置選項來指定這些子元素所在的位置，Border佈局會自動把子元素放到佈局指定的位置。（eg、viewPort.html）

9.3    Column列布局（例子 和上面的同樣）

9.4    Fit佈局

Fit佈局由類Ext.layout.FitLayout定義，名稱爲fit。Fit佈局表示容器組件中的子元素大小與容器組件大小徹底同樣大，也就是說子元素佈滿整個容器組件。若是容器組件中有多個子元素，則只會顯示一個元素。

Ext.onReady(function(){

new Ext.Panel({

renderTo:」hello」,

title:」容器組件」,

layout:」fit」,

width:500,

height:100,

items:[{title:」子元素1」,html:」這是子元素1中的內容」},

{title:」子元素2」,html:」這是子元素2 中的內容」}

]

});

});

9.5 Form佈局

9.6 Accordion佈局

Accordion佈局由類Ext.layout.Accordion定義，名稱爲accordion，表示可摺疊的佈局，也就是說使用該佈局的容器組件中的子元素呈可摺疊的形式。

指定：layout：」accordion」,

      layoutConfig:{animate:true}//表示在執行展開摺疊時是否應用動畫效果。

9.7 Card 佈局

Card佈局由Ext.layout.CardLayout類定義，名稱爲card，該佈局將會在容器組件中某一時刻只顯示一個子元素。能夠知足安裝嚮導、Tab選項板等應用中面板顯示的需求。(eg. cardPanel.html)

10 使用表格控件Grid

ExtJs中的表格功能很是強大，包括了排序、緩存、拖動、隱藏某一列、自動顯示行號、列彙總、單元格編輯等實用功能。

表格由類Ext.grid.GridPanel，繼承自Panel，其xtype爲grid。ExtJs中，表格Grid必須包含列定義信息，並指定表格的數據存儲器store。表格的列信息由類Ext.grid.ColumnModel定義、而表格的數據存儲器由Ext.data.Store定義，數據存儲器根據解析的數據不一樣分爲JsonStore、SimpleStore、GroupingStore等。

var sm=new Ext.grid.CheckboxSelectionModel();//checkbox定義



    var cm=new Ext.grid.ColumnModel([  

    new Ext.grid.RowNumberer(),   

    sm,                         //checkbox引用

    {header:'編號(id)',dataIndex:'id',sortable:true},

    {header:'用戶名(username)',dataIndex:'username',sortable:true},

    {header:'地址(address)',dataIndex:'address',sortable:true},

    {header:'郵件(email)',dataIndex:'email',sortable:true},

    {header:'郵政編碼(zip)',dataIndex:'zip',sortable:true},

    {header:'電話(telephone)',dataIndex:'telephone',sortable:true},

    {header:'手機(mobile)',dataIndex:'mobile',sortable:true},

    {header:'姓名(name)',dataIndex:'name',sortable:true},

    {header:'權限(privilege)',dataIndex:'privilege',renderer:renderPri,sortable:true},

    {header:'註冊日期(createDate)',dataIndex:'createDate',width:160,sortable:true},

    {header:'組號(team)',dataIndex:'team',width:160,sortable:true}

   ]);

   var ds=new Ext.data.Store({  //轉換數據與表中的列一一對應來填充    proxy:newExt.data.HttpProxy({url:'manageruser.do?cmd=queryAllUser'}),

    reader:new Ext.data.JsonReader({

     root:'user',

     totalProperty:'counts',

     fields:['id','username','address','email','zip','telephone','mobile','name','privilege','createDate','team']

   })

   });

    

   var grid=new Ext.grid.GridPanel({  

    ds:ds,//所要顯示的數據

    cm:cm,//表格的樣式即表格的列

    sm:sm,//checkbox

    height:220,

    loadMask:{msg:"數據加載中,請稍候..."},

    bbar:new Ext.PagingToolbar({

       pageSize:30,

       store:ds,

       displayInfo:true,

       displayMsg:'顯示第{0}條到{1}條記錄,一共{2}條',

       emptyMsg:"沒有記錄"

    })

});

ds.load();

數據存儲器Store負責把各類各樣的數據（如二維數組，Json對象數組，xml文本）等轉換成ExtJs的數據記錄集Record，var grid= new Ext.grid.GridPanel({})；負責建立一個表格，表格包含的列由columns配置屬性來表述或則cm，columns是一數組，每一行數據元素描述表格的一列信息，表格的列信息包含列頭顯示文本（header），對應的記錄集字段（dataIndex），是否能夠排序（sorable），列的渲染函數（renderer），寬度（width），格式化信息（format）等。

ds是用來加載數據的。

10.1表格數據的選擇

咱們能夠在程序中經過調用GridPanel的getSelectionModel方法來獲得表格選擇模型對象，該對象包含了表格的選擇信息，該方法返回的值爲RowSelectionModel或CellSelectionModel類型的對象。

function showSel()

{

  var rows=grid.getSelectionModel().getSelections();

  if(rows)

{

alert(「一共選擇了」+rows.length+「行數據」)；

for(var i=0;i<++;i<rows.length)

{

alert(rows[i].get(「name」));

}

}

}

//var cel=grid.getSelectionModel().getSelectedCell();

//if(cel)

//{

//  var h=grid.getColumnModel().getDataIndex(cell[1]);

//  var o=grid.getStore().getAt(cel[0]).get(h);

//  alert(o);

//}

10.2可編輯的表格EditorGridPanel

例子（callcenter無線呼叫系統）

11 使用表單Form

11.1 表單面盤FormPanel

對於傳統的b/s應用來講，數據錄入元素是放在表單<form>標籤裏面的。而對於ExtJs應用來講，則能夠直接使用FormPanel控件來存放表單中的元素。FormPanel繼承自Panel，在Panel的基礎上提供與表單相關的各類特性，好比能夠指定表單提交的url、指定表單提交方式、是不是二進制提交等；另爲FormPanel固定使用form佈局，form佈局也就是專門用戶組織包含輸入元素的佈局。

Ext.onReady(function(){

var form=new Ext.form.FormPanel({

renderTo:」hello」,

title:」用戶信息錄入框」,

height:200,

width:300,

labelWidth:60,

labelAlign:」right」,

frame:true,

defaults:{xtype:」textfield」,width:180},

items:[

{name:」username」,fieldLabel:」姓名」},

{name:」password」,fieldLabel:」密碼」,inputType:」password」},

{name:」email」,fieldLabel:」電子郵件」},

{xtype:」textarea」,name:」intro」,fieldLabel:」簡介」}

],

buttons:[{text:」提交」,

handler:function(){

f.form.submit({

   waitTitle:」請稍候」,

   waitMsg:」正在提交表單數據，請稍候……」

});

}

},{text:」取消」,

handler:function()

{

  f.form.reset();

}

}]

})

});

上面的代碼中，使用new Ext.form.FormPanel來建立表單面板，父類Ext.Panel。經過labelWidth來指定表單中字段標籤的寬度，labelAlign來指定字段標籤的對齊方式，在defaults中指定該容器中全部子元素默認類型都是textfield，也就是錄入文本框。在items定義的子元素中，一共包含三個textfield元素以及一個textarea元素，這些元素都包含一個name屬性，至關於傳統<input>標籤中的name屬性，fieldLabel屬性用來指定字段標籤。

表單面板FormPanel包含一個form屬性，該屬性是一個Ext.form.BasicForm類型的對象，能夠直接訪問，也能夠經過getForm()方法獲得，全部Ext.form.BasicForm的配置選項均可以直接在FormPanel中使用。

FormPanel內部使用Ext.layout.FormLayout做爲佈局，該佈局須要表單字段及字段標籤設置正確。要在FormPanel中使用其餘佈局樣式，須要在FormPanel中嵌入一個Panel或者其它可使用佈局功能的容器。

11.2 FieldSet

有時候，一個表單中會包含許多的元素，若是所有按某一種方式堆在一個表單中會顯得比較亂。所以，ExtJs中提供了一個FieldSet控件，名稱（或xtype）爲fieldset，能夠用來組織表單中的字段元素，一個FieldSet也就是一個字段集合，能夠存放多個字段。

FieldSet類繼承自Panel，默認的佈局爲form，與FormPanel不一樣的是，能夠經過layout來指定FieldSet使用其餘的佈局來管理其中的元素。（eg、fieldSetForm.html）

11.3 TextField

在表單中錄入元素中，最簡單的就是TextField，用來取代傳統的文本框,能夠在TextField中錄入文本信息。TextField由Ext.form.TextField類定義，組件的xtype爲textfield。提供了文本信息錄入相關的各類驗證、提示、選擇等功能。

{

xtype:」textfield」,

name:」username」,

fieldLabel:」姓名」,

allowBlank:false,

maxLength:5,

maxLengthText:」姓名的長度不能大於5!」,

minLength:2,

minLengthText:」姓名的長度不能小於2!」,

blankText:」該項必須填寫」,

selectOnFocus:true  //當文本框得到焦點時，選中文本框中當前的文本。

}

配置參數：regex 類型爲RegExp

一個javascript正則表達式，用於在驗證的時候檢查輸入的值是否與該正則表達式匹配。正則表達式驗證只有在其它的驗證器都執行完併成功經過後才執行，當正則驗證失敗時，將會把字段設置成無效狀態，並顯示regexText做爲驗證提示信息。 



regexText 類型爲String

指定當正則表達式驗證未經過時顯示的驗證信息，默認值爲「」。



validator類型爲Function

客戶端驗證功能將在字段驗證過程執行（默認狀況設置爲空）。若是有效的話，它將在全部基本驗證返回true的情況下執行，而且當前字段值將會傳遞給客戶端驗證方法。若是經過驗證，boolean型值將會被返回，不然返回錯誤提示信息。

11.4 CheckBox 及 Radio

{

xtype:」checkbox」,

name:」chk」,

fieldLabel:」選擇性別」,

boxLabel:」男」,

checked:true

}

使用複選框CheckBox的時候，能夠直接經過其setValue方法來改變複選框的選擇狀態，好比下面的代碼均可以把複選框變成未選狀態：

f.form.findField(「chk」).setValue(false);

f.form.findField(「chk」).setValue(0);

f.form.findField(「chk」).setValue(「off」);



{

xtype:」radio」,

name:」rad」,

fieldLabel:」選擇性別」,

boxLabel:」男」

}

在CheckBox的基礎上，單選框還提供了一個getGroupValue方法，能夠用來得到該單選框所屬組中的選中值。

11.5 ComboBox

列表選擇數據至關於html中的<select>標籤。

{

xtype:」combo」,

name:」country」,

fieldLabel:」選擇國際」,

transform:」countrys」,

lazyRender:true,

triggerAction:」all」

}

在html頁面中加入一個傳統的<select>標籤，id爲countrys，在這個<select>標籤中包含了下拉框中的選項信息，代碼以下：

<select id=」countrys」>

<option value=」1」>中國</option>

<option value=」2」>美國</option>

<option value=」3」>英國</option>

<option value=」4」>日本</option>

<option value=」5」>意大利</option>

<option value=」6」>巴西</option>

<option value=」7」>巴拉圭</option>

</select>

上面的兩段代碼配置在一塊兒，能夠在表單中生成一個下拉列表框，該列表框除了外觀變漂亮了之外，還自動支持選項自動過濾功能，只要在文本框中輸入一個「巴」字，則在下拉列表中會自動把以「巴」開頭的「巴西」、「巴拉圭」等顯示出來。

要從其它數據文件或內容中加載下拉列表框的數據，這就須要使用到數據存儲器Store，經過前面數據存儲器一章中的介紹咱們知道，數據存儲器Store能夠處理內存數組、xml及JSON格式的數據等。

{

xtype:」combo」,

name:」country」,

fieldLabel:」 選擇國際」,

displayField:」name」,

valueField:」code」,

store:store,

typeAhead:true,

mode:’local’,         //mode:’remote’默認爲remote

triggerAction:’all’,

emptyText:’請選擇…’,

selectOnFocus:true

}

其中displayField表示列表框中顯示的字段名稱，valueField表示選項值得字段名稱，store表示該控件使用的存儲器，下拉列表項中的選項值從store中獲得，mode爲local表示從本地加載數據，不須要與服務器交互，這裏用到的store爲SimpleStore，定義store及相關數據的代碼以下：

var countrys=[[「中國」,1],[「美國」,2],[「英國」,3],[「日本」,4],[「意大利」,5],[「巴西」,6],[「巴拉圭」,7]];

var store=new Ext.data.SimpleStore({

fields:[‘name’,’code’],

data:countrys

});

下拉列表框中的數據也能夠存放在服務器端，當用戶要選擇列表框的數據時才加載更新表框中的數據，這裏可使用支持異步加載的JsonStore或自定義Store等。

{

xtype:」combo」,

name:」country」,

fieldLabel:」 選擇國際」,

displayField:」name」,

valueField:」code」,

store:store,

typeAhead:true,

triggerAction:’all’,

emptyText:’請選擇…’,

selectOnFocus:true,

pageSize:7

}

存儲器store的定義

var store=new Ext.data.JsonStore({

url:」data.js」,

fields:[‘name’,’code’],

totalProperty:」total」,

root:」result」,

id:」name」

});

data.js文件中的內容：

{

total:20,

result:[

{name: 「中國」,code:」1」},

{name:「美國」,code:」2」}

。。。

]

}

11.6 DateField

錄入日期的控件

{

xtype:」datefield」,

name:」bornDate」,

fieldLabel:」出生日期」,

width:150,

format:」Y年n月j日」

}

11.7  TimeField

錄入時間的控件

{

xtype:」timefield」,

name:」ontime」,

fieldLabel:」下班時間」,

width:150,

increment:30,//       指定下拉列表中時間選擇項增量爲30分鐘，默認值爲15分鐘。

format:」G點i分」

}

11.8  HtmlEditor

{

xtype:」htmleditor」,

name:」intro」,

fieldLabel:」簡介」,

width:500,

//enableFont:false,

//enableFontSize:false,

//enableSourceEdit:false,

//enableLists:false

}

使用HtmlEditor控件時，能夠在初始化的時候指定在最頂上的工具欄中顯示哪些控件。

11.9  其它字段Field組件

ExtJs還提供了代替傳統隱藏域的Hidden組件、用來錄入數字信息的NumberField組件等其它字段組件。

{

xtype:」hidden」,

name:」h」,

fieldLabel:」隱藏域」

}



{

xtype:」numberfield」,

name:」times」,

fieldLabel:」遲到次數」,

allowDecimals:true,  //是否容許包含小數點值，默認爲true

allowNegative:false, //是否容許負數，默認爲true

decimalPrecision:2,  //表示小數位數的精度

minValue:10,

maxValue:100

}

11.10  表單動做

11.10.1  表單提交動做submit

f.form.submit({

waitTitle:」請稍候」,

waitMsg:」正在提交表單數據，請稍候……」,

url:」person.html」,

method:」POST」,

success:function(action,form)

{

alert(「提交成功」);

},

failure:function(action,form)

{

alert(「表單提交失敗」);

}

});

在表單動做實現中，ExtJs要求服務器端返回相似下面格式的Json數據：

{

success:false,

errors:{

username:」用戶名不能爲空」,

times:」遲到次數必須爲數字」

}

}