點擊下載
本文文檔

當前位置：首頁 - 科技 - 知識百科 - 正文

ExtJS配置和表格控件使用_extjs

來源：懂視網責編：小采時間：2020-11-27 20:44:24

ExtJS配置和表格控件使用_extjs

ExtJS配置和表格控件使用_extjs:ExtJS時一套AJAX控件,本人認為它是目前我見過最好最美的JS控件庫，所以非常有學習和使用價值，如果你還沒有接觸過ExtJS或者壓根對其不感興趣，那么沒有必要看下去了ExtJS是一套完整的RIA解決方案，也因為功能完整造成了ext-all.js有400多k,由于是基

推薦度：

點擊下載本文 文檔為doc格式

導讀ExtJS配置和表格控件使用_extjs:ExtJS時一套AJAX控件,本人認為它是目前我見過最好最美的JS控件庫，所以非常有學習和使用價值，如果你還沒有接觸過ExtJS或者壓根對其不感興趣，那么沒有必要看下去了ExtJS是一套完整的RIA解決方案，也因為功能完整造成了ext-all.js有400多k,由于是基

ExtJS時一套AJAX控件,本人認為它是目前我見過最好最美的JS控件庫，所以非常有學習和使用價值，如果你還沒有接觸過ExtJS或者壓根對其不感興趣，那么沒有必要看下去了

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) 在<head>和</head>之間添加如下代碼：

(3) 這里注意<script></script>不能用</script>取代
(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','name1','desn1'],
['3','name1','desn1'],
['4','name1','desn1'],
['5','name1','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里應該有一個<p id='grid'></p>與之對應。
6、所有代碼清單如下(已通過測試)：

代碼如下:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Grid.aspx.cs" Inherits="Ext_example_Grid" %>
<!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 id="Head1" runat="server">
<title>Grid </title>
<link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css" href="resources/css/ext-all.css" />
<script type="text/javascript" src="../adapter/ext/ext-base.js" src="adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../ext-all.js" src="ext-all.js"></script>
<script type="text/javascript"></script>
</head>
<body>
<form id="form1" runat="server">
<p id="grid">
</p>
</form>
</body>
</html>

實驗效果圖如圖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},
{header:'名稱',dataIndex:'name',width:180},
{header:'描述',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,
store: ds,
height:600,
cm:cm,
viewConfig:{
forceFit:true
}
});

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

代碼如下:

var grid=new Ext.grid.GridPanel({
renderTo:"grid",
stripeRows:true,//斑馬線效果
loadMask:true,
store: ds,
height:600,
cm:cm,
autoExpandColumn:'desn'
// viewConfig:{
// forceFit:true
// }
});

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

代碼如下:

var cm=new Ext.grid.ColumnModel([
{header:'編號',dataIndex:'id',width:60},
{header:'名稱',dataIndex:'name',width:180},
{id:'desn',header:'描述',dataIndex:'desn',width:200}
]);

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

代碼如下:

var cm=new Ext.grid.ColumnModel([
{header:'編號',dataIndex:'id',width:60,sortable:true},
{header:'名稱',dataIndex:'name',width:180},
{id:'desn',header:'描述',dataIndex:'desn',width:200}
]);

效果圖如圖3所示

圖3 按列排序效果
3.4 顯示時間類型數據
盡管返回的JSON里都是數字和字符串，但是在EXT中我們同樣可以從后臺取得日期類型的數據，然后交給Grid進行格式化。
1、首先定義一組數據，其中最后一列是日期格式的數據。

代碼如下:

var data=[
['1','name1','desn1','2009-09-17T02:58:04'],
['2','name2','desn1','2009-09-17T02:58:04'],
['3','name3','desn1','2009-09-17T02:58:04'],
['4','name4','desn1','2009-09-17T02:58:04'],
['5','name5','desn1','2009-09-17T02:58:04']
];

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

代碼如下:

var store1= new Ext.data.Store({
proxy:new Ext.data.MemoryProxy(data),
reader:new Ext.data.ArrayReader({},[
{name:'id'},
{name:'name'},
{name:'desn'},
{name:'date',type:'date',dateFormat:'Y-m-dTH:i:s'}
])
});

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

代碼如下:

var cm=new Ext.grid.ColumnModel([
{header:'編號',dataIndex:'id',width:60,sortable:true},
{header:'名稱',dataIndex:'name',width:180},
{id:'desn',header:'描述',dataIndex:'desn',width:200},
{header:'時間',dataIndex:'date',type:'date',renderer:Ext.util.Format.dateRenderer('Y年m月d日')}
]);

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

代碼如下:

圖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:'編號',dataIndex:'id',width:40,sortable:true},
{header:'名稱',dataIndex:'name',width:180},
{id:'desn',header:'描述',dataIndex:'desn',width:200},
{header:'時間',dataIndex:'date',type:'date',renderer:Ext.util.Format.dateRenderer('Y年m月d日')}
]);

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

3.6 表格分頁
Grid控件對性能要求較高，如果在一個Grid里面顯示上千條記錄，效率會有明顯下降，所以必須考慮分頁問題。
1、為Grid添加分頁工具條：在前面代碼的基礎上修改grid代碼：

代碼如下:

var grid1=new Ext.grid.GridPanel({
renderTo:"grid1",
stripeRows:true,//斑馬線效果
loadMask:true,
store: store1,
height:200,
cm:cm,
viewConfig:{
forceFit:true
},
bbar:new Ext.PagingToolbar({
pageSize:10,
store: store1,
displayInfo:true,
displayMsg:'顯示第{0}條到{1}條記錄,一共{2}條',
emptyMsg:"沒有記錄"
})
});

2、效果圖如圖6所示：

圖6 添加分頁工具條
3、如果要真正實現分頁，還需要通過后臺腳本獲得分頁數據，這部分在此不再給出
四、可編輯表格控件——EditorGrid
EditorGrid可以直接在表格里面執行添加、刪除、修改、查找等功能，然后一次性保持。還有可以動態修改某個單元格，這些單元格我們先暫時不能為空，保存時會進行檢測，為空就無法保存，驗證信息會給予提示。
4.1 制作一個簡單的EditorGrid
1、定義列，代碼如下：

代碼如下:

var cm=new Ext.grid.ColumnModel([
{header:'編號',dataIndex:'id',width:40,editor:new Ext.grid.GridEditor(
new Ext.form.TextField({
allowBlank:false
})
)},
{header:'名稱',dataIndex:'name',width:180,editor:new Ext.grid.GridEditor(
new Ext.form.TextField({
allowBlank:false
})
)},
{id:'desn',header:'描述',dataIndex:'desn',width:200},
{header:'時間',dataIndex:'date',type:'date',renderer:Ext.util.Format.dateRenderer('Y年m月d日')}
]);

2、定義grid,注意此時是EditorGridPanel.

代碼如下:

var grid1=new Ext.grid.EditorGridPanel({
renderTo:"grid1",
store: store1,
height:200,
clicksToEdit:1,
cm:cm
});

3、默認情況下，需要雙擊單元格才能激活編輯器，從而進行修改，不過，也可以給Grid配置clickToEdit:1，這樣就可以單擊單元格激活編輯器，從而進行修改，如圖7所示：

圖7 通過單擊修改單元格
五、屬性表格——PropertyGrid
屬性表格擴展自EditorGridPanel,所以可以直接編輯右邊的內容，注意：只有右邊的，即使你單擊左邊的單元格，編輯器也會出現在右邊。
定義的方法如下：

代碼如下:

效果圖如圖8所示：

六、分組表格——Group
分組表格就是在普通表格的基礎上，根據某一列的數據將表格中的數據分組顯示的表格控件。
1、首先定義一組數據

代碼如下:

var data=[
['1','male','name1','desn1'],
['2','male','name2','desn1'],
['3','female','name3','desn1'],
['4','male','name4','desn1'],
['5','female','name5','desn1'],
['6','male','name6','desn1'],
['7','male','name7','desn1']
];

2、創建表格的列信息

代碼如下:

var sm=new Ext.grid.CheckboxSelectionModel();
var cm=new Ext.grid.ColumnModel([
new Ext.grid.RowNumberer(),
sm,
{header:'編號',dataIndex:'id',width:40,sortable:true},
{header:'性別',dataIndex:'sex',width:180},
{header:'名稱',dataIndex:'name',width:200},
{header:'描述',dataIndex:'desn',width:200}
]);

3、創建數據存儲對象

代碼如下:

4、設計分組設計表格

代碼如下:

var grid1=new Ext.grid.GridPanel({
store: store1,
height:300,
cm:cm,
view:new Ext.grid.GroupingView(),
renderTo:"grid1"
});

5、代碼清單如下，效果圖如圖9所示。

代碼如下:

<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
<title>分組表格控件</title>
<link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css" href="resources/css/ext-all.css" />
<script type="text/javascript" src="../adapter/ext/ext-base.js" src="adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../ext-all.js" src="ext-all.js"></script>
<script type="text/javascript"><!--
Ext.onReady(function(){
var sm=new Ext.grid.CheckboxSelectionModel();
var cm=new Ext.grid.ColumnModel([
new Ext.grid.RowNumberer(),
sm,
{header:'編號',dataIndex:'id',width:40,sortable:true},
{header:'性別',dataIndex:'sex',width:180},
{header:'名稱',dataIndex:'name',width:200},
{header:'描述',dataIndex:'desn',width:200}
]);

// --></script>
</head>
<body>
<form id="form1" runat="server">
<p id="grid1">

</p>
</form>
</body>
</html>

圖9 分組表格

六、可拖放的表格

首先我們看圖10的效果圖：

圖10 可拖放的表格

注意圖10四周的藍色細條，把鼠標放到上面，就可以用拖放改變表格的高度和寬度，實現這一效果并不難，也不需要對寫好的Grid做大的修改，只要在原先的基礎上添加如下代碼：

代碼如下:

var rz=new Ext.Resizable('grid1',{
wrap:true,
minHeight:100,
pinned:true,
handles:'all'
});
rz.on('resize',grid1.syncSize,grid1);

注意：
(1) Resizable必須放在render之后，否則就會出現問題；
(2) handles:'all'代表可以向所有放心拖動表格
七、Grid與右鍵菜單
Grid提供了四個與右鍵菜單相關的事件：
（1） contextmenu:全局性的右鍵事件；
（2）cellcontextmenu:單元格上的右鍵事件
（3）rowcontextmenu:行上的右鍵事件
（4）headercontextmenu:表頭的右鍵事件
以下代碼我們實現一個行上的右鍵事件，代碼清單如下，效果圖如11所示

代碼如下: