ExtJS中表格控件的使用属性设置和数据的获取.docx

1、ExtJS中表格控件的使用属性设置和数据的获取ExtJS中表格控件的使用，属性设置和数据的获取ExtJS中表格的特性简介表格由类Ext.grid.GridPanel定义，继承自Ext.Panel，xtype为grid表格的列信息由Ext.grid.ColumnModel定义表格的数据存储器由Ext.data.Store定义，根据解析数据的不同，数据存储器可具体分为如下几种：JsonStore，SimpleStore，GroupingStore一个表格的基本编写过程：1、创建表格列模型var cm = new Ext.grid.ColumnModel( header: 角色, dataIndex

2、: role, header: 等级, dataIndex: grade, header: 创建日期, dataIndex: createDate, type: date, renderer: Ext.util.Format.dateRenderer(Y年m月d日) /创建日期类型的数据);2、创建数据数组var data = 士兵,7,2011-07-2412:34:56, 将军,10,2011-07-2412:34:56,;3、创建一个数据存储对象store，包含两部分：proxy，获取数据的方式；reader，解析数据的方式ArrayReader的mapping用来设置列的排列顺序var

3、 store = new Ext.data.Store( proxy: new Ext.data.MemoryProxy(data), reader: new Ext.data.ArrayReader(, name: role, mapping: 1, name: grade, mapping: 0 name: createDate, mapping: 2, type:date, dateFormat:Y-m-dH:i:s /创建日期列和显示格式 );store.load();4、创建GridPanel，装配ColumnModel和storevar grid = new Ext.grid.Gr

4、idPanel( renderTo: grid, store: store, cm: cm);另外获取远程数据可以使用ScriptTagProxy,如下所示var store = new Ext.data.Store( proxy: new Ext.data.ScriptTagProxy( url:http:/.), reader: new Ext.data.ArrayReader(, name: role, mapping: 1, name: grade, mapping: 0 ), sortInfo: field: role, direction: ASC /设置默认排序列，ASC/DES

5、C);表格的常用属性功能var grid = new Ext.grid.GridPanel( enableColumnMove: false, /禁止拖放列 enableColumnResize: false, /禁止改变列的宽度 stripeRows: true, /斑马线效果 loadMask: true, /读取数据时的遮罩和提示功能 renderTo: grid, store: store cm: cm);var cm = new Ext.grid.ColumnModel( header: 角色, dataIndex: role, width:90, sortable: true, /

6、width设置列宽度，默认为100px，sortable设置排序功能 id:grade, header: 等级, dataIndex: grade, width:40);var grid = new Ext.grid.GridPanel( renderTo: grid, store: store, cm: cm viewConfig: /让每列自动填充满表格 forceFit: true autoExpandColumn: grade /自动延伸列，列的id在ColumnModel中定义);渲染表格，为表格设置特殊样式只需要在cm里面增加一个renderer属性，添加一个自定义函数来渲染传进来

7、（由EXT自动传递）的参数的样式即可，即在返回value之前拼装上相应的HTML和CSS或者JS响应事件。function renderSex(value) if (value = male) return 男; else return 女; var cm = new Ext.grid.ColumnModel( header:id,dataIndex:id, header:name,dataIndex:name, header:sex,dataIndex:sex,renderer:renderSex,);var data = 1,Jason,male, 2,Kate,female;var st

8、ore = new Ext.data.Store( proxy: new Ext.data.MemoryProxy(data), reader: new Ext.data.ArrayReader(, name: id, name: name, name: sex );store.load();var grid = new Ext.grid.GridPanel( autoHeight: true, renderTo: grid, store: store, cm: cm);自动显示行号，只要在创建cm时创建一个RowNumberer就可以了var cm = new Ext.grid.Column

9、Model( new Ext.grid.RowNumberer(), /显示行号 header:id,dataIndex:id, header:name,dataIndex:name, header:sex,dataIndex:sex,renderer:renderSex,);删除列store.remove(store.getAt(i);刷新表格grid.view.refresh();为表格添加复选框需要使用CheckboxSelectionModelSelectionModel sm在使用时要放到cm和表格中var sm = new Ext.grid.CheckboxSelectionMod

10、el();var cm = new Ext.grid.ColumnModel( new Ext.grid.RowNumberer(), sm, header:编号,dataIndex:id, header:名称,dataIndex:name);var data = 1,name1, 2,name2;var store = new Ext.data.Store( proxy: new Ext.data.MemoryProxy(data), reader: new Ext.data.ArrayReader(, name: id, name: name );store.load();var grid

11、 = new Ext.grid.GridPanel( autoHeight: true, renderTo: grid, store: store, cm: cm, sm: sm);通过RowSelectionModel设置只选择一行var grid = new Ext.grid.GridPanel( autoHeight: true, renderTo: grid, store: store, cm: cm, sm: new Ext.grid.RowSelectionModel(singleSelect:true);使用选择模型获取数据grid.on(click, function() va

12、r selections = grid.getSelectionModel().getSelections(); for (var i = 0; i selections.length; i+) var record = selectionsi; Ext.Msg.alert(record.get(id); );表格视图从MVC的思想来看表格控件：* Ext.data.Store可看做模型* Ext.grid.GridPanel可看做控制器* Ext.grid.GridView可看做视图* 一般GridView由GridPanell自动生成，如果想设置GridView的属性时，可以通过Ext.g

13、rid.GridPanel的getView()获得视图实例Ext.get(button1).on(click, function() grid.getView().scrollToTop(); grid.getView().focusCell(0, 0); var cell = grid.getView().getCell(0, 0); cell.style.backgroundColor = red;);使用GridPanel的viewConfig在创建表格时设置GridView的初始化参数var grid = new Ext.grid.GridPanel( height: 100, wid

14、th: 400, renderTo: grid, store: new Ext.data.Store( autoLoad: true, proxy: new Ext.data.MemoryProxy(data), reader: new Ext.data.ArrayReader(, meta) ), columns: meta, viewConfig: columnsText: 显示的列, /设置下拉菜单提示文字 scrollOffset: 30, /设置右侧滚动条的预留宽度 sortAscText: 升序, /设置下拉菜单提示文字 sortDescText: 降序, /设置下拉菜单提示文字

15、forceFit: true /自动延展每列的长度 );为表格添加分页工具条* 可以使用GridPanel的bbar属性，并创建Ext.PagingToolbar分页工具条对象* 注意，如果配置了分页工具条，store.load()就必须在构造表格以后执行。var grid = new Ext.grid.GridPanel( renderTo: grid, autoHeight: true, store: store, cm: cm, bbar: new Ext.PagingToolbar( pageSize: 10, /每页显示10条数据 store: store, displayInfo:

16、 true, /显示数据信息 displayMsg: 显示第 0 条到 1 条记录，一共 2 条, emptyMsg: 没有记录 /没有数据时显示的信息 );store.load();从后台脚本获取分页数据使用HttpProxy传递请求，获取服务器的JSON数据，交给JsonReader解析var cm = new Ext.grid.ColumnModel( header:编号,dataIndex:id, header:名称,dataIndex:name);var store = new Ext.data.Store( proxy: new Ext.data.HttpProxy(url:pag

17、e.jsp), reader: new Ext.data.JsonReader( totalProperty: totalProperty, root: root , name: id, name: name );var grid = new Ext.grid.GridPanel( renderTo: grid, autoHeight: true, /数据传回来之前高度未知，所以要使用自适应高度 store: store, cm: cm, bbar: new Ext.PagingToolbar( pageSize: 10, store: store, displayInfo: true, di

18、splayMsg: 显示第 0 条到 1 条记录 / 共 2 条, emptyMsg: 没有记录 );store.load(params:start:0,limit:10);如果想让分页工具条显示在表格的顶部，可以使用GridPanel的tbar属性设置添加工具条让ExtJS在对返回的数据进行分页* 需要在页面中引入examples/locale目录下的PagingMemoryProxy.js文件* 再使用PagingMemoryProxy设置代理var store = new Ext.data.Store( proxy: new Ext.data.PagingMemoryProxy(data

19、), reader: new Ext.data.ArrayReader(, name: id, name: name, name: descn );/在创建GridPanel之后调用store.load(params:start:0,limit:3);可编辑表格控件EditorGrid的使用制作一个简单的EditorGrid的步骤1、定义列ColumnModel，在里面添加editor属性var cm = new Ext.grid.ColumnModel( header: 编号, dataIndex: id, editor: new Ext.grid.GridEditor( new Ext.f

20、orm.TextField( allowBlank: false /不允许在TextField中输入空值 ) ), header: 名称, dataIndex: name, editor: new Ext.grid.GridEditor( new Ext.form.TextField( allowBlank: false ) );2、准备一个数组var data = 1,Jason, 2,Jay;3、创建Ext.data.Store，设置内存代理，设置ArrayReader解析数组var store = new Ext.data.Store( proxy: new Ext.data.Memor

21、yProxy(data), reader: new Ext.data.ArrayReader(, name: id, name: name );4、加载数据，创建EditorGridPanelstore.load();var grid = new Ext.grid.EditorGridPanel( autoHeight: true, renderTo: grid, store: store, cm: cm);为可编辑表格添加和删除数据1、使用Record的create方法创建一个记录集MyRecord,MyRecord相当于一个类var MyRecord = Ext.data.Record.c

22、reate( name: id, type: string, name: name, type: string);store.load();2、创建EditorGridPanel面板，在属性tbar中创建Ext.Toolbarvar grid = new Ext.grid.EditorGridPanel( autoHeight: true, renderTo: grid, store: store, cm: cm, tbar: new Ext.Toolbar(-, /-表示菜单分隔符 text: 添加一行, handler: function() var p = new MyRecord( i

23、d:, name: ); grid.stopEditing(); /关闭表格的编辑状态 store.insert(0, p); /创建的Record插入store的第一行 grid.startEditing(0, 0); /激活第一行第一列的编辑状态 , -, text: 删除一行, handler: function() Ext.Msg.confirm(信息, 确定要删除？, function(btn) if (btn = yes) var sm = grid.getSelectionModel(); /获取表格的选择模型 var cell = sm.getSelectedCell(); /

24、获取选中的单元格 var record = store.getAt(cell0); /通过行号得到store这一行对应的Record store.remove(record); /移除数据 ); , -);为可编辑表格保存修改的结果在上面例子的基础之上，添加一个保存按钮text: 保存,handler: function() var m = store.modified.slice(0); /获得store中修改过得数据 for (var i = 0; i m.length; i+) /验证表格信息是否正确，是否包含空格 var record = mi; var fields = record

25、.fields.keys; for (var j = 0; j fields.length; j+) var name = fieldsj; var value = record.dataname; var colIndex = cm.findColumnIndex(name); var rowIndex = store.indexOfId(record.id); var editor = cm.getCellEditor(colIndex).field; if (!editor.validateValue(value) Ext.Msg.alert(提示, 请检查输入的数据是否正确！, fun

26、ction() grid.startEditing(rowIndex, colIndex); ); return; var jsonArray = ; Ext.each(m, function(item) jsonArray.push(item.data); /把修改过得数据放到jsonArray中 ); Ext.lib.Ajax.request( /使用Ajax请求提交给后台 POST, save_data.jsp, success: function(response) /返回成功 Ext.Msg.alert(信息, response.responseText, function() st

27、ore.reload(); ); ,failure: function() /返回失败 Ext.Msg.alert(错误, 服务器保存数据出错！); , data= + encodeURIComponent(Ext.encode(jsonArray) );另外store可以设置属性pruneModifiedRecords: true。这样，每次remove或load操作时store会自动清除modified标记，可以避免出现下次提交时还会把上次那些modified信息都带上的现象。限制表格输入的数据类型NumberField header:ID, dataIndex:id, editor:new Ext.grid.GridEditor(new Ext.form.NumberField( /NumberField限制只能输入数字 allowBlank: false, allowNegative: false, /不能输入减号 maxValue: 10 )ComboBoxvar comboData = 0,Java, 1,Android; header:ComboBox, dataIndex:combo, editor:new Ext.grid.GridEditor(new Ext.form.ComboBox( st