ExtJS是一套完整的RIA解決方案，也因為功能完整造成了ext-all.js有400多k,由于是基于JS和CSS的功能實現，對客戶端機器性能也有一定的要求，即不支持IE6以下的版本。如果您的項目對網頁響應時間有嚴格的限制，或者客戶端操作系統過于陳舊，一定不要選擇ExtJS。

本文主要是介紹ExtJS的下載和配置以及一些簡單的使用方法。目前最新版本為3.0，但是本文主要介紹2.2版本。

一、ExtJS下載以及配置

1、下載地址：www.extjs.com/(這是官網，大家可以選擇自己喜歡的版本下載)

2、配置過程，假設下載后的目錄為Ext,我們在該目錄下建立我們自己的目錄MyExample(該目錄用于存放你自己寫的代碼)，配置過程如下：

(1) 新建一個頁面文件Helloworld.html

(2) 在

和之間添加如下代碼：

Ext.onReady(function(){

Ext.MessageBox.alert('HelloWorld','Hello World');

})

(3) 這里注意不能用取代

(4) js的導入順序不要更改

(3) 如果彈出一個HelloWorld的對話框，則代表配置成功。

二、表格控件Grid的使用

EXT中的表格功能非常強大，包括排序、緩存、拖動、隱藏某一列、自動顯示行號、列匯總、單元格編輯等使用功能。我們首先介紹如何制作一個簡單的Grid。

1、創建表格的列信息：

var cm=new Ext.grid.ColumnModel([

{header:'編號',dataIndex:'id'},

{header:'名稱',dataIndex:'name'},

{header:'描述',dataIndex:'desn'}

]);

2、添加數據信息：

var data=[

['1','name1','desn1'],

['2',

['3',

['4',

['5','desn1']

];

3、創建數據存儲對象：

var ds=new Ext.data.Store({

proxy:new Ext.data.MemoryProxy(data),

reader:new Ext.data.ArrayReader({},[

{name:'id'},

{name:'name'},

{name:'desn'}

])

});

ds.load();//這個相當的重要.

4、表格的列模型定義好了，原始數據和數據的轉換也已經完成，剩下的只需要把它們裝配在一起，我們的Grid就創建成功了。

var grid=new Ext.grid.GridPanel({

renderTo:"grid",

store: ds,

height:600,

cm:cm

});

5、注意：Ext.grid.Grid的renderTo屬性指示EXT將表格渲染到什么地方，所以，在HTML里應該有一個

6、所有代碼清單如下(已通過測試)：

Grid

Ext.onReady(function(){

var cm=new Ext.grid.ColumnModel([

{header:'編號',dataIndex:'desn'}

]);

var data=[

['1','desn1']

];

var ds=new Ext.data.Store({

proxy:new Ext.data.MemoryProxy(data),

{name:'desn'}

])

});

ds.load();

var grid=new Ext.grid.GridPanel({

renderTo:"grid",

cm:cm

});

});

// -->

實驗效果圖如圖1所示

圖1 一個簡單的Grid

三、表格控件Grid的功能詳解第二部分簡單介紹了如何創建簡單的Grid，本章將對Grid的功能進行詳細的分析。

3.1 部分屬性功能

1、默認情況下，Grid是可以拖放列，也可以改變列的寬度，如果要禁用這兩個功能，在定義Grid對象時分別設置enableColumnMove和enableColumnResize為false即可。

2、如果希望顯示斑馬線效果，可以加上stripeRows:true

3、Grid還支持一種讀取數據時的遮罩和提示功能，設置屬性loadMask:true,在store.load()完成之前一直會顯示"Loading…"

3.2 自主決定每列的寬度

1、如果要定義寬度，只要設置該列的width屬性即可，如下面的代碼所示。效果圖如圖2所示。

var cm=new Ext.grid.ColumnModel([

{header:'編號',dataIndex:'id',width:60},dataIndex:'name',width:180},dataIndex:'desn',width:200}

]);

圖2 自定義每列的寬度

2、這樣需要自己去計算每列的寬度，如果想讓每列自動填滿Grid,只需要viewConfig中的forceFit即可。使用forceFit后，Grid會根據你在cm里設置的width按比例分配，非常智能。實現代碼如下：

var grid=new Ext.grid.GridPanel({

renderTo:"grid",

stripeRows:true,//斑馬線效果

loadMask:true,

cm:cm,

viewConfig:{

forceFit:true

}

});

3、我們也可以考慮autoExpandColumn,它可以讓指定列的寬度自動伸展，從而填充整個表格。代碼如下

var grid=new Ext.grid.GridPanel({

renderTo:"grid",

autoExpandColumn:'desn'

// viewConfig:{

// forceFit:true

// }

});

注意：autoExpandColum只能指定一列的id,注意，必須是id,原來我們設置的cm里面都沒有id,現在為了使用autoExpandColumn,要給cm的desn設置id.于是在渲染時desn就可以自動延伸，否則會出錯。

var cm=new Ext.grid.ColumnModel([

{header:'編號',

{id:'desn',header:'描述',width:200}

]);

3.3 讓Grid支持按列排序

在EXT中可以很方便地實現排序功能，只需要在定義列模型時增加sortable屬性，如下面代碼所示：

var cm=new Ext.grid.ColumnModel([

{header:'編號',width:60,sortable:true},width:200}

]);

效果圖如圖3所示

圖3 按列排序效果

3.4 顯示時間類型數據

盡管返回的JSON里都是數字和字符串，但是在EXT中我們同樣可以從后臺取得日期類型的數據，然后交給Grid進行格式化。

1、首先定義一組數據，其中最后一列是日期格式的數據。

var data=[

['1','desn1','2009-09-17T02:58:04'],'name2','name3','name4','name5','2009-09-17T02:58:04']

];

2、接著我們在reader里面增加一行配置，除了設置name以外，還設置了type和dateFormat兩個屬性。代碼如下：

var store1= new Ext.data.Store({

proxy:new Ext.data.MemoryProxy(data),

{name:'desn'},

{name:'date',type:'date',dateFormat:'Y-m-dTH:i:s'}

])

});

3、同樣的，我們還需要在cm里面增加一行配置：

var cm=new Ext.grid.ColumnModel([

{header:'編號',width:200},

{header:'時間',dataIndex:'date',renderer:Ext.util.Format.dateRenderer('Y年m月d日')}

]);

4、代碼詳細信息如下所示，效果圖如圖4所示。

Grid

Ext.onReady(function(){

var cm=new Ext.grid.ColumnModel([

{header:'編號',renderer:Ext.util.Format.dateRenderer('Y年m月d日')}

]);

var data=[

['1','2009-09-17T02:58:04']

];

var store1= new Ext.data.Store({

proxy:new Ext.data.MemoryProxy(data),dateFormat:'Y-m-dTH:i:s'}

])

});

store1.load();

var grid1=new Ext.grid.GridPanel({

renderTo:"grid1",

store: store1,

height:200,

viewConfig:{

forceFit:true

}

});

});

// -->

圖4 具有時間數據的Grid

3.5 自動顯示行號和復選框

實際上，行號和復選框都是renderer的延伸。當然，復選框的功能要復雜得多。

1、自動顯示行號：修改列模型cm,加入RowNumberer對象；

2、復選框：我們創建一個CheckBoxSelectionModel()

3、詳細代碼如下，效果圖如圖5所示

var sm=new Ext.grid.CheckBoxSelectionModel();

var cm=new Ext.grid.ColumnModel([

new Ext.grid.RowNumberer(),

sm,

{header:'編號',width:40,renderer:Ext.util.Format.dateRenderer('Y年m月d日')}

]);

圖5 自動行號以及復選框效果圖

總結

以上是編程之家為你收集整理的ExtJS 配置和表格控件使用全部內容，希望文章能夠幫你解決ExtJS 配置和表格控件使用所遇到的程序開發問題。

如果覺得編程之家網站內容還不錯，歡迎將編程之家網站推薦給程序員好友。

本圖文內容來源于網友網絡收集整理提供，作為學習參考使用，版權屬于原作者。

小編個人微信號 jb51ccc

喜歡與人分享編程技術與工作經驗，歡迎加入編程之家官方交流群！

總結

以上是生活随笔為你收集整理的extjs 表单设置html5,ExtJS 配置和表格控件使用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。