extjs 配置與表格使用

<a href="http://wenku.baidu.com/view/226ce70cba1aa8114431d9bf.html">http://wenku.baidu.com/view/226ce70cba1aa8114431d9bf.html</a>

extjs看你使用的版本，ext有4個版本，extjs1，extjs2，是完全不要錢的，extjs3用于商業用途是要交錢的按使用的人算

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>之間添加如下代碼：

複制代碼代碼如下:

Ext.onReady(function(){

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

})

</script>

(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裡應該有一個<div id='grid'></div>與之對應。

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">

ds.load();

// --></script>

</head>

<body>

</div>

</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所示。

{header:'編号',dataIndex:'id',width:60},

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

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

]);

圖2 自定義每列的寬度

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

stripeRows:true,//斑馬線效果

loadMask:true,

cm:cm,

viewConfig:{

forceFit:true

}

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

autoExpandColumn:'desn'

// viewConfig:{

// forceFit:true

// }

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

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

3.3 讓Grid支援按列排序

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

{header:'編号',dataIndex:'id',width:60,sortable:true},

效果圖如圖3所示

圖3 按列排序效果

3.4 顯示時間類型資料

盡管傳回的JSON裡都是數字和字元串，但是在EXT中我們同樣可以從背景取得日期類型的資料，然後交給Grid進行格式化。

1、首先定義一組資料，其中最後一列是日期格式的資料。

['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({

{name:'desn'},

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

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

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

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

4、代碼詳細資訊如下所示，效果圖如圖4所示。

store1.load();

var grid1=new Ext.grid.GridPanel({

renderTo:"grid1",

store: store1,

height:200,

圖4 具有時間資料的Grid

3.5 自動顯示行号和複選框

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

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

2、複選框：我們建立一個CheckboxSelectionModel()

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

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

new Ext.grid.RowNumberer(),

sm,

{header:'編号',dataIndex:'id',width:40,sortable:true},

圖5 自動行号以及複選框效果圖

3.6 表格分頁

Grid控件對性能要求較高，如果在一個Grid裡面顯示上千條記錄，效率會有明顯下降，是以必須考慮分頁問題。

1、為Grid添加分頁工具條：在前面代碼的基礎上修改grid代碼：

bbar:new Ext.PagingToolbar({

pageSize:10,

displayInfo:true,

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

emptyMsg:"沒有記錄"

2、效果圖如圖6所示：

圖6 添加分頁工具條

3、如果要真正實作分頁，還需要通過背景腳本獲得分頁資料，這部分在此不再給出

四、可編輯表格控件——EditorGrid

EditorGrid可以直接在表格裡面執行添加、删除、修改、查找等功能，然後一次性保持。還有可以動态修改某個單元格，這些單元格我們先暫時不能為空，儲存時會進行檢測，為空就無法儲存，驗證資訊會給予提示。

4.1 制作一個簡單的EditorGrid

1、定義列，代碼如下：

{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(

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

var grid1=new Ext.grid.EditorGridPanel({

clicksToEdit:1,

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

圖7 通過單擊修改單元格

五、屬性表格——PropertyGrid

屬性表格擴充自EditorGridPanel,是以可以直接編輯右邊的内容，注意：隻有右邊的，即使你單擊左邊的單元格，編輯器也會出現在右邊。

定義的方法如下：

var grid=new Ext.grid.PropertyGrid({

title:"屬性表格",

autoHeight:true,

width:400,

renderTo:'grid1',

source:{

"名字":"薛敬明",

"建立時間":new Date(Date.parse('12/15/2009')),

"是否有效":false,

"版本号":.01,

"描述":"估計沒有啥說的"

效果圖如圖8所示：

六、分組表格——Group

分組表格就是在普通表格的基礎上，根據某一列的資料将表格中的資料分組顯示的表格控件。

1、首先定義一組資料

['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、建立表格的列資訊

{header:'性别',dataIndex:'sex',width:180},

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

3、建立資料存儲對象

var store1= new Ext.data.GroupingStore({

{name:'sex'},

]),

groupField:'sex',

sortInfo:{field:'id',direction:"ASC"}

4、設計分組設計表格

height:300,

view:new Ext.grid.GroupingView(),

renderTo:"grid1"

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

<title>分組表格控件</title>

</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所示

var contextmenu=new Ext.menu.Menu({

id:'theContextMenu',

items:[{

text:'檢視詳情',

handler:function(){

}]

grid1.on("rowcontextmenu",function(grid,rowIndex,e){

e.preventDefault();

grid1.getSelectionModel().selectRow(rowIndex);

contextmenu.showAt(e.getXY());

圖11 右鍵菜單

extjs 配置與表格使用

繼續閱讀

主流浏覽器四大綜合性能測試

JavaScript自學筆記【4】函數的聲明與調用目錄二、函數的聲明三、函數的調用

請求逾時VUE axios重新再次請求

nodejs微信開發---授權登入+擷取使用者資訊微信網頁授權

debian9更新4.9.0核心到4.19.2核心過程

Javascript建構Bingo卡片遊戲

JavaScript的那些坑之事件代理事件代理事件階段

javascript的for (var i in data)慎用javascript中的for (var i in data)謹慎用

tab滑鼠經過菜單切換

vue （vue2.0）使用總結(從大體結構總結)

vue搭建過程及出現問題

/\B(?=(?:\d{3})+$)/g 一條令人費解的正規表達式

适用于JavaScript的ECMAScript 2020規範向前發展

JS生成uuid的四種方法

layui多任務上傳添加進度條