當前位置：首頁 > 人文社科 > 生活经验 >内容正文

生活经验

EXT表格

發布時間：2023/11/27 生活经验 23 豆豆

生活随笔收集整理的這篇文章主要介紹了 EXT表格小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

由于這個比較大所以單獨一文，

建議先看EXT基礎：

http://blog.csdn.net/21aspnet/article/details/6782028

最基本的表格：

<html><head><title>開始EXT</title><meta http-equiv="Content-Type" content="text/html;charset=UTF-8"><link rel="stylesheet" type="text/css"href="extjs/resources/css/ext-all.css" /><script src="extjs/adapter/ext/ext-base.js"></script><script src="extjs/ext-all-debug.js"></script><script src="extjs/build/locale/ext-lang-zh_CN.js"></script><script type="text/javascript">Ext.onReady(function(){var cm = new Ext.grid.ColumnModel([{header:'編號',dataIndex:'id'},{header:'性別',dataIndex:'sex'},{header:'名稱',dataIndex:'name'},{header:'描述',dataIndex:'descn'}
]);
cm.defaultSortable = true;
var data = [['1','男','甲','descn1'],['2','女','乙','descn2'],['3','女','丙','descn3'],['4','男','丁','descn4'],['5','女','戊','descn5']];var ds1 = new Ext.data.Store({proxy: new Ext.data.MemoryProxy(data),reader: new Ext.data.ArrayReader({}, [{name: 'id'},{name: 'sex'},{name: 'name'},{name: 'descn'}])});ds1.load();var grid1 = new Ext.grid.GridPanel({el: 'grid1',ds: ds1,cm: cm,height:140,width:420});grid1.render();
});</script></head>
<body><div id="hello"></div><h1>表格示例</h1>
<div id="grid1"></div><br/>
<div id="grid2"></div><br/>
<div id="example-grid"></div></body>
</html>

帶單選框

<html><head><title>開始EXT</title><meta http-equiv="Content-Type" content="text/html;charset=UTF-8"><link rel="stylesheet" type="text/css"href="extjs/resources/css/ext-all.css" /><script src="extjs/adapter/ext/ext-base.js"></script><script src="extjs/ext-all-debug.js"></script><script src="extjs/build/locale/ext-lang-zh_CN.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'},{header:'性別',dataIndex:'sex'},{header:'名稱',dataIndex:'name'},{header:'描述',dataIndex:'descn'}
]);
cm.defaultSortable = false;
var data = [['1','男','甲','descn1'],['2','女','乙','descn2'],['3','女','丙','descn3'],['4','男','丁','descn4'],['5','女','戊','descn5']];var ds1 = new Ext.data.Store({proxy: new Ext.data.MemoryProxy(data),reader: new Ext.data.ArrayReader({}, [{name: 'id'},{name: 'sex'},{name: 'name'},{name: 'descn'}])});ds1.load();var grid1 = new Ext.grid.GridPanel({el: 'grid1',ds: ds1,cm: cm,sm: sm,height:160,width:450});grid1.render();
});</script></head>
<body><div id="hello"></div><h1>表格示例</h1>
<div id="grid1"></div><br/>
<div id="grid2"></div><br/>
<div id="example-grid"></div></body>
</html>

加表頭：

var grid1 = new Ext.grid.GridPanel({ el: 'grid1', ds: ds1, cm: cm, sm: sm, title:'員工信息表', height:160, width:450 });?

單擊事件：

<html><head><title>開始EXT</title><meta http-equiv="Content-Type" content="text/html;charset=UTF-8"><link rel="stylesheet" type="text/css"href="extjs/resources/css/ext-all.css" /><script src="extjs/adapter/ext/ext-base.js"></script><script src="extjs/ext-all-debug.js"></script><script src="extjs/build/locale/ext-lang-zh_CN.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'},{header:'性別',dataIndex:'sex'},{header:'名稱',dataIndex:'name'},{header:'描述',dataIndex:'descn'}
]);
cm.defaultSortable = false;
var data = [['1','男','甲','descn1'],['2','女','乙','descn2'],['3','女','丙','descn3'],['4','男','丁','descn4'],['5','女','戊','descn5']];var ds1 = new Ext.data.Store({proxy: new Ext.data.MemoryProxy(data),reader: new Ext.data.ArrayReader({}, [{name: 'id'},{name: 'sex'},{name: 'name'},{name: 'descn'}])});ds1.load();var grid1 = new Ext.grid.GridPanel({el: 'grid1',ds: ds1,cm: cm,sm: sm,title:'員工信息表',height:160,width:450});grid1.render();grid1.addListener('cellclick', cellclick);
});function cellclick(grid, rowIndex, columnIndex, e) {var record = grid.getStore().getAt(rowIndex);   //Get the Recordvar fieldName = grid.getColumnModel().getDataIndex(columnIndex);  //Get field namevar data = record.get(fieldName);Ext.MessageBox.alert('提示','當前選中的數據是：'+data);
}
</script></head>
<body><div id="hello"></div><h1>表格示例</h1>
<div id="grid1"></div><br/>
<div id="grid2"></div><br/>
<div id="example-grid"></div></body>
</html>

添加右鍵菜單：

<html><head><title>開始EXT</title><meta http-equiv="Content-Type" content="text/html;charset=UTF-8"><link rel="stylesheet" type="text/css"href="extjs/resources/css/ext-all.css" /><script src="extjs/adapter/ext/ext-base.js"></script><script src="extjs/ext-all-debug.js"></script><script src="extjs/build/locale/ext-lang-zh_CN.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'},{header:'性別',dataIndex:'sex'},{header:'名稱',dataIndex:'name'},{header:'描述',dataIndex:'descn'}
]);
cm.defaultSortable = false;
var data = [['1','男','甲','descn1'],['2','女','乙','descn2'],['3','女','丙','descn3'],['4','男','丁','descn4'],['5','女','戊','descn5']];var ds1 = new Ext.data.Store({proxy: new Ext.data.MemoryProxy(data),reader: new Ext.data.ArrayReader({}, [{name: 'id'},{name: 'sex'},{name: 'name'},{name: 'descn'}])});ds1.load();var grid1 = new Ext.grid.GridPanel({el: 'grid1',ds: ds1,cm: cm,sm: sm,title:'員工信息表',height:160,width:450});grid1.render();grid1.addListener('rowcontextmenu', rightClickFn);//右鍵菜單代碼關鍵部分var rightClick = new Ext.menu.Menu({id:'rightClickCont',  //在HTML文件中必須有個rightClickCont的DIV元素items: [{id: 'rMenu1',handler: rMenu1Fn,//點擊后觸發的事件text: '右鍵菜單1'},{//id: 'rMenu2',//handler: rMenu2Fn,text: '右鍵菜單2'}]
});
function rightClickFn(grid,rowindex,e){e.preventDefault();rightClick.showAt(e.getXY());
}
function rMenu1Fn(){Ext.MessageBox.alert('right','rightClick');
}
});</script></head>
<body><div id="rightClickCont"></div><h1>表格示例</h1>
<div id="grid1"></div><br/>
<div id="grid2"></div><br/>
<div id="example-grid"></div></body>
</html>

改變數據顏色：

<html><head><title>開始EXT</title><meta http-equiv="Content-Type" content="text/html;charset=UTF-8"><link rel="stylesheet" type="text/css"href="extjs/resources/css/ext-all.css" /><script src="extjs/adapter/ext/ext-base.js"></script><script src="extjs/ext-all-debug.js"></script><script src="extjs/build/locale/ext-lang-zh_CN.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'},{header:'性別',dataIndex:'sex',renderer:changeSex},{header:'名稱',dataIndex:'name'},{header:'描述',dataIndex:'descn'}
]);
cm.defaultSortable = false;
var data = [['1','男','甲','descn1'],['2','女','乙','descn2'],['3','女','丙','descn3'],['4','男','丁','descn4'],['5','女','戊','descn5']];var ds1 = new Ext.data.Store({proxy: new Ext.data.MemoryProxy(data),reader: new Ext.data.ArrayReader({}, [{name: 'id'},{name: 'sex'},{name: 'name'},{name: 'descn'}])});ds1.load();var grid1 = new Ext.grid.GridPanel({el: 'grid1',ds: ds1,cm: cm,sm: sm,height:160,width:450});grid1.render();
});
function changeSex(value){if (value == '男') {return "<span style='color:red;font-weight:bold;'>男</span>";} else {return "<span style='color:green;font-weight:bold;'>女</span>";}
}</script></head>
<body><div id="hello"></div><h1>表格示例</h1>
<div id="grid1"></div><br/>
<div id="grid2"></div><br/>
<div id="example-grid"></div></body>
</html>

分頁控件：

<html><head><title>開始EXT</title><meta http-equiv="Content-Type" content="text/html;charset=UTF-8"><link rel="stylesheet" type="text/css"href="extjs/resources/css/ext-all.css" /><script src="extjs/adapter/ext/ext-base.js"></script><script src="extjs/ext-all-debug.js"></script><script src="extjs/build/locale/ext-lang-zh_CN.js"></script><script type="text/javascript">Ext.BLANK_IMAGE_URL="resources/images/default/s.gif"Ext.onReady(function(){var sm = new Ext.grid.CheckboxSelectionModel();var cm = new Ext.grid.ColumnModel([new Ext.grid.RowNumberer(),sm,{header:'編號',dataIndex:'id'},{header:'性別',dataIndex:'sex'},{header:'名稱',dataIndex:'name'},{header:'描述',dataIndex:'descn'}]);cm.defaultSortable = true;var ds = new Ext.data.Store({proxy: new Ext.data.HttpProxy({url:'data.php'}),reader: new Ext.data.JsonReader({totalProperty: 'totalProperty',root: 'root'}, [{name: 'id'},{name: 'name'},{name: 'descn'}])});ds.load({params:{start:0,limit:10}});var grid = new Ext.grid.GridPanel({el: 'grid3',ds: ds,cm: cm,sm: sm,height:320,width:500,title: '分頁演示',bbar: new Ext.PagingToolbar({pageSize: 10,store: ds,displayInfo: true,displayMsg: '顯示第 {0} 條到 {1} 條記錄，一共 {2} 條',emptyMsg: "沒有記錄"}),tbar: new Ext.PagingToolbar({pageSize: 10,store: ds,displayInfo: true,displayMsg: '顯示第 {0} 條到 {1} 條記錄，一共 {2} 條',emptyMsg: "沒有記錄"})});grid.render();
})</script></head>
<body><div id="hello"></div><h1>表格示例</h1>
<div id="grid1"></div><br/>
<div id="grid2"></div><br/>
<div id="grid3"></div><br/>
<div id="example-grid"></div></body>
</html>

data.php?? 這里就不從數據庫取數據了，直接模擬

{totalProperty:100,root:[{'id':'0','name':'name0','descn':'descn0'},
{'id':'1','name':'name1','descn':'descn1'},{'id':'2','name':'name2','descn':'descn2'},
{'id':'3','name':'name3','descn':'descn3'},{'id':'4','name':'name4','descn':'descn4'},
{'id':'5','name':'name5','descn':'descn5'},{'id':'6','name':'name6','descn':'descn6'},
{'id':'7','name':'name7','descn':'descn7'},{'id':'8','name':'name8','descn':'descn8'},
{'id':'9','name':'name9','descn':'descn9'}]}

表格被panel 控件HOLD住

<html><head><title>開始EXT</title><meta http-equiv="Content-Type" content="text/html;charset=UTF-8"><link rel="stylesheet" type="text/css"href="extjs/resources/css/ext-all.css" /><script src="extjs/adapter/ext/ext-base.js"></script><script src="extjs/ext-all-debug.js"></script><script src="extjs/build/locale/ext-lang-zh_CN.js"></script><script type="text/javascript">Ext.BLANK_IMAGE_URL="resources/images/default/s.gif"Ext.onReady(function(){var sm = new Ext.grid.CheckboxSelectionModel();var cm = new Ext.grid.ColumnModel([new Ext.grid.RowNumberer(),sm,{header:'編號',dataIndex:'id'},{header:'性別',dataIndex:'sex'},{header:'名稱',dataIndex:'name'},{header:'描述',dataIndex:'descn'}]);cm.defaultSortable = true;var ds = new Ext.data.Store({proxy: new Ext.data.HttpProxy({url:'data.php'}),reader: new Ext.data.JsonReader({totalProperty: 'totalProperty',root: 'root'}, [{name: 'id'},{name: 'name'},{name: 'descn'}])});ds.load({params:{start:0,limit:10}});var grid = new Ext.grid.GridPanel({el: 'grid3',ds: ds,cm: cm,sm: sm,height:320,width:500,title: '分頁演示',bbar: new Ext.PagingToolbar({pageSize: 10,store: ds,displayInfo: true,displayMsg: '顯示第 {0} 條到 {1} 條記錄，一共 {2} 條',emptyMsg: "沒有記錄"}),tbar: new Ext.PagingToolbar({pageSize: 10,store: ds,displayInfo: true,displayMsg: '顯示第 {0} 條到 {1} 條記錄，一共 {2} 條',emptyMsg: "沒有記錄"})});grid.render();var panel = new Ext.Panel({renderTo: 'panel',title:'panel',collapsible:true,width:500,height:400,items:[grid] //管理grid
});})</script></head>
<body><div id="panel"></div><div id="grid1"></div><br/>
<div id="grid2"></div><br/>
<div id="grid3"></div><br/>
<div id="example-grid"></div></body>
</html>

===========================================================================

擴充閱讀：

如何用三種基本類型的數據（Array, Json, Xml）來創建最簡單的表格
最簡單的表格由以下幾個元素組成：
1. 列定義(ColumnModel)
??? 首先我們知道表格肯定是二維的，橫著叫行，豎著叫列。跟設計數據庫，新建表一樣，我們要先設置這個表有幾列，每列叫啥名字，啥類型，咋顯示，這個表格的骨架也就出來了。這里我們建立一個四列的表格，第一列叫編號(id)，第二列叫性別(sex)，第三列叫名稱(name)，第四列叫描述(descn)。

??? //?定義一個ColumnModel
????var?cm?=?new?Ext.grid.ColumnModel([
????????{header:'編號',dataIndex:'id'},
????????{header:'性別',dataIndex:'sex'},
????????{header:'名稱',dataIndex:'name'},
????????{header:'描述',dataIndex:'descn'}
????]);
????cm.defaultSortable?=?true;

其中，cm.defaultSortable = true;這句話表示默認為可排序的表格，可以先不要去管它

2. 數據(Data)
??? 有了表格的骨架，現在我們要向里邊添加數據了。這個數據當然也是二維了，下面分別介紹三種數據類型的使用方法：
(1) Array Data

??? //?ArrayData
????var?data?=?[
????????['1','male','name1','descn1'],
????????['2','male','name1','descn2'],
????????['3','male','name3','descn3'],
????????['4','male','name4','descn4'],
????????['5','male','name5','descn5']
????];

(2) Json Data

??? //JsonData
????var?people?=?{?
????????'coders':?[
????????????{?'id':?'1',?'sex':?'male',?'name':'McLaughlin',?'descn':?'brett@newInstance.com'?},
????????????{?'id':?'2',?'sex':?'male','name':'Hunter',?'descn':?'jason@servlets.com'?},
????????????{?'id':?'3',?'sex':?'female','name':'Harold',?'descn':?'elharo@macfaq.com'?}
????????],
????????'musicians':?[
????????????{?'id':?'1',?'name':?'Clapton',?'descn':?'guitar'?},
????????????{?'id':?'2',?'name':?'Rachmaninoff',?'descn':?'piano'?}
????????]
???????}

(3) Xml Data
??? Xml類型的數據一般是由一個.xml文件提供的，通過http請求的方式得到。

3. 數據的讀取
??? 定義好數據之后，我們需要將其轉換為能夠為grid所用的頁面，ext為咱們提供了一個橋梁，Ext.data.Store，通過它我們可以把任何格式的數據轉化成grid可以使用的形式，這樣就不需要為每種數據格式寫一個grid的實現了。現在咱們就來看看這個Ext.data.Store是如何轉換三種數據的。
(1) ArrayReader

??? //?ArrayReader
????var?ds1?=?new?Ext.data.Store({
????????proxy:?new?Ext.data.MemoryProxy(data),
????????reader:?new?Ext.data.ArrayReader({},?[
????????????{name:?'id'},
????????????{name:?'sex'},
????????????{name:?'name'},
????????????{name:?'descn'}
????????])
????});
????ds1.load();

??? ds要對應兩個部分：proxy和reader。proxy告訴我們從哪里獲得數據，reader告訴我們如何解析這個數據。
??? 現在我們用的是Ext.data.MemoryProxy，它是專門用來解析js變量的。你可以看到，我們直接把data作為參數傳遞進去了。 Ext.data.ArrayReader專門用來解析數組，并且告訴我們它會按照定義的規范進行解析，每行讀取三個數據，第一個叫id，第二個叫 sex，第三個叫name，第四個descn。這些是跟cm定義中的dataIndex對應的。這樣cm就知道哪列應該顯示那條數據了。
記得要執行一次ds.load()，對數據進行初始化。

(2) JsonReader

??? //?JsonReader
????var?ds2?=?new?Ext.data.Store({
????????proxy:?new?Ext.data.MemoryProxy(people),
????????reader:?new?Ext.data.JsonReader({root:?'coders'},?[
????????????{name:?'id'},
????????????{name:?'sex'},
????????????{name:?'name'},
????????????{name:?'descn'}
????????])
????});
????ds2.load();

其中，root: 'colders'表示取數據的時候取的是'coders'這個節點的數據，而不是'musician'

(3) XmlReader

??? //?XmlReader
????var?ds3?=?new?Ext.data.Store({
????????url:?'test.xml',
????????reader:?new?Ext.data.XmlReader({record:?'item'},?[
????????????{name:?'id'},
????????????{name:?'sex'},
????????????{name:?'name'},
????????????{name:?'descn'}
????????])
????});
????ds3.load();

其中，record: 'item'表示每條記錄對應的節點是'item'，下面我會給出test.xml文件的內容，便于更好的理解

test.xml

<?xml?version="1.0"?encoding="UTF-8"?>
<dataset>
?????<results>2</results>
?????<item>
???????????<id>1</id>
?????????? <sex>male</sex>
???????????<name>Taylor</name>
???????????<descn>Coder</descn>
?????</item>
?????<item>
???????????<id>2</id>
?????????? <sex>female</sex>
???????????<name>Sophia</name>
???????????<descn>Civil?Servant</descn>
????</item>
????<item>
???????????<id>3</id>
?????????? <sex>male</sex>
???????????<name>Taylor</name>
???????????<descn>Coder</descn>
?????</item>
?????<item>
???????????<id>4</id>
?????????? <sex>female</sex>
???????????<name>Sophia</name>
???????????<descn>Civil?Servant</descn>
????</item>
????<item>
???????????<id>5</id>
?????????? <sex>female</sex>
???????????<name>Sophia</name>
???????????<descn>Civil?Servant</descn>
????</item>
</dataset>

4. 下面組裝數據，也分三個表格來顯示

??? //?對應Array
????var?grid1?=?new?Ext.grid.GridPanel({
????????el:?'grid1',
????????ds:?ds1,
????????cm:?cm
????});
????grid1.render();
????
????//?對應Json
????var?grid2?=?new?Ext.grid.GridPanel({
????????el:?'grid2',
????????ds:?ds2,
????????cm:?cm
????});
????grid2.render();
????
??? //?對應Xml
????var?grid3?=?new?Ext.grid.GridPanel({
????????renderTo:?'example-grid',
????????ds:?ds3,
????????cm:?cm,
????????title:?'HelloWorld',
????????autoHeight:?'true'
????})

其中，grid1和grid2中都有個el屬性以及render()方法，這個意思是，當執行該方法的時候，會自動去找頁面中id=xxx的標簽，然后在里面插入表格；效果跟grid3中的方式是一樣的。

獲取單選框選擇值

buttons:[{text:'開始查詢',handler: function(){var selectedRows = grid.getSelections();if(selectedRows.length<1){alert("請選擇事件");return;}var eventIds = '';for(i=0;i<selectedRows.length;i++){eventIds+= selectedRows[i].data.name+',';}alert(eventIds)}}]

總結

以上是生活随笔為你收集整理的EXT表格的全部內容，希望文章能夠幫你解決所遇到的問題。

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

表格
Ext

上一篇：求一个好听又好看的名字！
下一篇： php session 二位数组