數據篇(8)：ExtJs中強大的GridPanel組件進階

1、數據篇數據篇(8)：ExtJs中強大的中強大的GridPanel組件組件進階進階講師：風舞煙ExtJs版版國訊教育通用智能國訊教育通用智能OA辦公平臺辦公平臺Ext.grid.GridPanel簡介Ext.grid.GridPanel用法示例GridPanel+SimpleStoreGridPanel+JsonStoreGridPanel+XmlStoreGroupingStore結合GroupView的使用 GridPanel中renderer詳解GridPanel的CRUD功能模擬類類Ext.grid.GridPanel 包： Extgrid 定義的文件： GridPanel.js 類全稱

2、： Ext.grid.GridPanel 繼承自于： Ext.Panel 此類系基于Grid控件的一個面板組件，呈現了Grid的主要交互接口。Store :數據記錄的模型（行為單位 ） Column model : 列怎么顯示View : 封裝了用戶界面 selection model : 選擇行為的模型 ExtJS中的表格功能非常強大，包括了排序、緩存、拖動、隱藏某一列、自動顯示行號、列匯總、單元格編輯等實用功能。 表格由類Ext.grid.GridPanel定義，繼承自Panel，其xtype為grid。ExtJS中，表格Grid必須包含列定義信息，并指定表格的數據存儲器Store。表格的

3、列信息由類Ext.grid.ColumnModel定義、而表格的數據存儲器由Ext.data.Store定義，數據存儲器根據解析的數據不同分為SimpleStroe、JsonStore、GroupingStore等。 1、首先來看最簡單的使用表格(SimpleStroe)的代碼：GridPanel+ SimpleStroeExt.onReady(function() var data= 1, EasyJWeb, EasyJF, 2, jfox, huihoo,, 3, jdon, jdon, 4, springside, springside, ; var stor

4、e=new Ext.data.SimpleStore(data:data,fields:id,name,organization,homepage); var grid = new Ext.grid.GridPanel( renderTo:hello, title:中國Java開源產品及團隊, height:150, width:600, columns:header:項目名稱,dataIndex:name, header:開發(fā)團隊,dataIndex:organization, header:網址,dataIndex:homepage, store:store, autoExpandColu

5、mn:2 ); );表格的排序及隱藏列特性 Ext.onReady(function() var data= 1, EasyJWeb, EasyJF, 2, jfox, huihoo,, 3, jdon, jdon, 4, springside, springside, ; var store=new Ext.data.SimpleStore(data:data,fields:id,name,organization,homepage); var colM=new Ext.grid.ColumnModel(header:項目名稱,dataIndex:name, hi

6、dden :true, header:開發(fā)團隊,dataIndex:organization,sortable:true, header:網址,dataIndex:homepage); var grid = new Ext.grid.GridPanel( renderTo:hello, title:中國Java開源產品及團隊, height:200, width:600, cm:colM, store:store, autoExpandColumn:2 ); );給列添加超鏈結function showUrl(value) return +value+;Ext.onReady(function

7、() var data= 1, EasyJWeb, EasyJF, 2, jfox, huihoo,, 3, jdon, jdon, 4, springside, springside, ; var store=new Ext.data.SimpleStore(data:data,fields:id,name,organization,homepage); var colM=new Ext.grid.ColumnModel(header:項目名稱,dataIndex:name,sortable:true,header:開發(fā)團隊,dataIndex:organizat

8、ion,sortable:true, header:網址,dataIndex:homepage,renderer:showUrl); var grid = new Ext.grid.GridPanel( renderTo:hello, title:中國Java開源產品及團隊, height:200, width:600, cm:colM, store:store, autoExpandColumn:2 ); );GridPanel+JsonStore var data=id:1, name:EasyJWeb, organization:EasyJF, homepage:, id:2, name

9、:jfox, organization:huihoo, homepage:, id:3, name:jdon, organization:jdon, homepage:, id:4, name:springside, organization: springside, homepage: ; var store=new Ext.data.JsonStore(data:data,fields:id,name,organization,homepage); var colM=new Ext.grid.ColumnModel(header:項目名稱,dataIndex:n

10、ame,sortable:true, header:開發(fā)團隊,dataIndex:organization,sortable:true, header:網址,dataIndex:homepage,renderer:showUrl); var grid = new Ext.grid.GridPanel( renderTo:hello, title:中國Java開源產品及團隊, height:200, width:600, cm:colM, store:store, autoExpandColumn:2 );GridPanel+XmlStore 1 EasyJWeb EasyJF 2 jfox h

11、uihoo 3 jdon jdon 4 springside springside var store=new Ext.data.Store( url:dataXml.xml, reader:new Ext.data.XmlReader( record:row, id,name,organization,homepage) );function showUrl(value) return +value+;Ext.onReady(function() var store=new Ext.data.Store( url:dataXml.xml, reader:new

12、Ext.data.XmlReader( record:row, id,name,organization,homepage) ); var colM=new Ext.grid.ColumnModel(header:項目名稱,dataIndex:name,sortable:true, header:開發(fā)團隊,dataIndex:organization,sortable:true, header:網址,dataIndex:homepage,renderer:showUrl); var grid = new Ext.grid.GridPanel( renderTo:hello, title:中國J

13、ava開源產品及團隊, height:200, width:600, cm:colM, store:store, autoExpandColumn:2 ); store.load(); );類類Ext.data.GroupingStore 包： Ext.data 定義的文件： GroupingStore.js 類全稱： Ext.data.GroupingStore 繼承自于： Ext.data.Store 一個特殊的Store實現，提供由字段中提取某一個來劃分記錄的功能。GroupingStore通常和Ext.grid.GroupingView一起用，來證明為分組GridPanel劃分data

14、 model。繼承自Ext.data.Store,為Store增加了分組功能.其它用法與Store一致,惟一需要注意的是使用GroupingStore時必須指定sortInfo信息增加了配置屬性groupField : String/用于分組的字段groupOnSort : Boolean/如果為真,將依排序字段重新分組,默認為假remoteGroup : Boolean/遠程排序當然也會多一個group方法groupBy( String field, Boolean forceRegroup ) : void顧名思義都是重新排序用的 下面是個簡單的示例 var arr= 1, 本, 拉登,

15、2, 笨, 拉登,3, 笨, 拉燈 ; var reader = new Ext.data.ArrayReader( id: 0, name: name, mapping: 1, name: occupation, mapping: 2 ); var store=new Ext.data.GroupingStore( reader:reader, groupField:name, groupOnSort:true, sortInfo:field: name, direction: ASC /使用GroupingStore時必須指定sortInfo信息 ); store.loadData(arr

16、); /GridPanel var grid = new Ext.grid.GridPanel( ds: store, columns: header: name, width: 20, sortable: true,dataIndex: name, header: occupation, width: 20,sortable: true, dataIndex: occupation , view: new Ext.grid.GroupingView( forceFit:true, groupTextTpl: text (values.rs.length values.rs.length 1

17、? Items : Item) ), frame.:true, width: 700, height: 450, collapsible: true, animCollapse: false, title: Grouping Example, renderTo: Div_GridPanel ); GridPanel中的renderer詳解gridpanel 列中 renderer函數參數說明 一、col : NumberThe column index二、fn : FunctionThe function to use to process the cells raw data to retu

18、rn HTML markup for the grid view. The render function is called with the following parameters:1、value : Object The data value for the cell.(單元格的值)2、metadata : Object An object in which you may set the following attributes一個可以設置下邊兩個屬性的對象) *css : String A CSS class name to add to the cells TD element. (給單元格的TD元素設置CSS的class名稱) *attr : String An HTML attribute definition string to apply to the data container element within the table cell (e.g. style=color:red;). (給單元格元素增加一個html的屬性)3、record : Ext.data.record The Ext.data.R