EXT表格
由于這個(gè)比較大所以單獨(dú)一文，
建議先看EXT基礎(chǔ)：
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('提示','當(dāng)前選中的數(shù)據(jù)是：'+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);//右鍵菜單代碼關(guān)鍵部分var rightClick = new Ext.menu.Menu({id:'rightClickCont', //在HTML文件中必須有個(gè)rightClickCont的DIV元素items: [{id: 'rMenu1',handler: rMenu1Fn,//點(diǎn)擊后觸發(fā)的事件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>
?
改變數(shù)據(jù)顏色：
<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?? 這里就不從數(shù)據(jù)庫取數(shù)據(jù)了，直接模擬
{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>
===========================================================================
?
擴(kuò)充閱讀：
如何用三種基本類型的數(shù)據(jù)（Array, Json, Xml）來創(chuàng)建最簡單的表格
最簡單的表格由以下幾個(gè)元素組成：
1. 列定義(ColumnModel)
??? 首先我們知道表格肯定是二維的，橫著叫行，豎著叫列。跟設(shè)計(jì)數(shù)據(jù)庫，新建表一樣，我們要先設(shè)置這個(gè)表有幾列，每列叫啥名字，啥類型，咋顯示，這個(gè)表格的骨架也就出來了。這里我們建立一個(gè)四列的表格，第一列叫編號(id)，第二列叫性別(sex)，第三列叫名稱(name)，第四列叫描述(descn)。
????var?cm?=?new?Ext.grid.ColumnModel([
????????{header:'編號',dataIndex:'id'},
????????{header:'性別',dataIndex:'sex'},
????????{header:'名稱',dataIndex:'name'},
????????{header:'描述',dataIndex:'descn'}
????]);
????cm.defaultSortable?=?true;
?
其中，cm.defaultSortable = true;這句話表示默認(rèn)為可排序的表格，可以先不要去管它
2. 數(shù)據(jù)(Data)
??? 有了表格的骨架，現(xiàn)在我們要向里邊添加數(shù)據(jù)了。這個(gè)數(shù)據(jù)當(dāng)然也是二維了，下面分別介紹三種數(shù)據(jù)類型的使用方法：
(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類型的數(shù)據(jù)一般是由一個(gè).xml文件提供的，通過http請求的方式得到。
3. 數(shù)據(jù)的讀取
??? 定義好數(shù)據(jù)之后，我們需要將其轉(zhuǎn)換為能夠?yàn)間rid所用的頁面，ext為咱們提供了一個(gè)橋梁，Ext.data.Store，通過它我們可以把任何格式的數(shù)據(jù)轉(zhuǎn)化成grid可以使用的形式，這樣就不需要為每種數(shù)據(jù)格式寫一個(gè)grid的實(shí)現(xiàn)了。現(xiàn)在咱們就來看看這個(gè)Ext.data.Store是如何轉(zhuǎn)換三種數(shù)據(jù)的。
(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要對應(yīng)兩個(gè)部分：proxy和reader。proxy告訴我們從哪里獲得數(shù)據(jù)，reader告訴我們?nèi)绾谓馕鲞@個(gè)數(shù)據(jù)。
??? 現(xiàn)在我們用的是Ext.data.MemoryProxy，它是專門用來解析js變量的。你可以看到，我們直接把data作為參數(shù)傳遞進(jìn)去了。 Ext.data.ArrayReader專門用來解析數(shù)組，并且告訴我們它會(huì)按照定義的規(guī)范進(jìn)行解析，每行讀取三個(gè)數(shù)據(jù)，第一個(gè)叫id，第二個(gè)叫 sex，第三個(gè)叫name，第四個(gè)descn。這些是跟cm定義中的dataIndex對應(yīng)的。這樣cm就知道哪列應(yīng)該顯示那條數(shù)據(jù)了。
記得要執(zhí)行一次ds.load()，對數(shù)據(jù)進(jìn)行初始化。
(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'表示取數(shù)據(jù)的時(shí)候取的是'coders'這個(gè)節(jié)點(diǎn)的數(shù)據(jù)，而不是'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'表示每條記錄對應(yīng)的節(jié)點(diǎn)是'item'，下面我會(huì)給出test.xml文件的內(nèi)容，便于更好的理解
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. 下面組裝數(shù)據(jù)，也分三個(gè)表格來顯示
?
??? //?對應(yīng)Array????var?grid1?=?new?Ext.grid.GridPanel({
????????el:?'grid1',
????????ds:?ds1,
????????cm:?cm
????});
????grid1.render();
????
????//?對應(yīng)Json
????var?grid2?=?new?Ext.grid.GridPanel({
????????el:?'grid2',
????????ds:?ds2,
????????cm:?cm
????});
????grid2.render();
????
??? //?對應(yīng)Xml
????var?grid3?=?new?Ext.grid.GridPanel({
????????renderTo:?'example-grid',
????????ds:?ds3,
????????cm:?cm,
????????title:?'HelloWorld',
????????autoHeight:?'true'
????})
?
其中，grid1和grid2中都有個(gè)el屬性以及render()方法，這個(gè)意思是，當(dāng)執(zhí)行該方法的時(shí)候，會(huì)自動(dòng)去找頁面中id=xxx的標(biāo)簽，然后在里面插入表格；效果跟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)}}]
?
?
總結(jié)
- 上一篇： 求一个好听又好看的名字！
- 下一篇： php session 二位数组