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

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

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

3、re(proxy:newExt.data.MemoryProxy(data),reader:newExt.data.ArrayReader(,name:role,mapping:1,name:grade,mapping:0name:createDate,mapping:2,type:date,dateFormat:Y-m-dH:i:s/创建日期列和显示格式);store.load();4、创建 GridPanel,装配 ColumnModel 和 storevargrid=newExt.grid.GridPanel(renderTo:grid,store:store,cm:cm);另外获取远程

4、数据可以使用 ScriptTagProxy,如下所示varstore=newExt.data.Store(proxy:newExt.data.ScriptTagProxy(url:http:/.),reader:newExt.data.ArrayReader(,name:role,mapping:1,name:grade,mapping:0),sortInfo:field:role,direction:ASC/设置默认排序列，ASC/DESC);表格的常用属性功能vargrid=newExt.grid.GridPanel(enableColumnMove:false,/禁止拖放列enableC

5、olumnResize:false,/禁止改变列的宽度stripeRows:true,/斑马线效果loadMask:true,/读取数据时的遮罩和提示功能renderTo:grid,store:storecm:cm);varcm=newExt.grid.ColumnModel(header:角色，dataIndex:role,width:90,sortable:true,/width设置列宽度，默认为 100Px,sortable 设置排序功能id:grade,header:等级,dataIndex:grade,width:40);vargrid=newExt.grid.GridPanel(r

6、enderTo:grid,store:store,cm:cmviewConfig:/让每列自动填充满表格forceFit:true)autoExpandColumn:grade/);渲染表格，为表格设置特殊样式只需要在 cm 里面增加一个 renderer 属性， 添加一个自定义函数来渲染传进来(由EXT 自动传递)的参数的样式即可， 即在返回 value 之前拼装上相应的 HTMU 口 CSSE者 JS 响应事件。functionrenderSex(value)if(value=male)return男;else自动延伸列，列的 id 在 ColumnModel 中定义return;varc

7、m=newExt.grid.ColumnModel(header:id,dataIndex:id,header:name,dataIndex:name,header:sex,dataIndex:sex,renderer:renderSex,);vardata=1,Jason,male,2,Kate,female;varstore=newExt.data.Store(proxy:newExt.data.MemoryProxy(data),reader:newExt.data.ArrayReader(,name:id,name:name,name:sex);store.load();vargrid

8、=newExt.grid.GridPanel(autoHeight:true,renderTo:grid,store:store,cm:cm);自动显示行号，只要在创建 cm 时创建一个 RowNumbere 就可以了varcm=newExt.grid.ColumnModel(newExt.grid.RowNumberer(),/显示行号header:id,dataIndex:id,header:name,dataIndex:name,header:sex,dataIndex:sex,renderer:renderSex,);删除列store.remove(store.getAt(i);刷新表

9、格grid.view.refresh();为表格添加复选框需要使用 CheckboxSelectionModelSelectionModelsm 在使用时要放到 cm 和表格中varsm=newExt.grid.CheckboxSelectionModel();varcm=newExt.grid.ColumnModel(newExt.grid.RowNumberer(),sm,header:编号,dataIndex:id,header:名称,dataIndex:name);vardata=1,name1,2,name2;varstore=newExt.data.Store(proxy:newE

10、xt.data.MemoryProxy(data),reader:newExt.data.ArrayReader(,name:id,name:name)；store.load();vargrid=newExt.grid.GridPanel(autoHeight:true,renderTo:grid,store:store,cm:cm,sm:sm);通过 RowSelectionModel 设置只选择一行vargrid=newExt.grid.GridPanel(autoHeight:true,renderTo:grid,store:store,cm:cm,sm:newExt.grid.RowS

11、electionModel(singleSelect:true);使用选择模型获取数据grid.on(click,function()varselections=grid.getSelectionModel().getSelections();for(vari=0;iselections.length;i+)varrecord=selectionsi;Ext.Msg.alert(record.get(id););表格视图从 MVC 勺思想来看表格控件：* Ext.data.Store 可看做模型* Ext.grid.GridPanel 可看做控制器* Ext.grid.GridView 可看做

12、视图* 一般 GridView 由 GridPanell 自动生成，如果想设置 GridView 的属性时，可以通过Ext.grid.GridPanel 的 getView()获得视图实例Ext.get(button1).on(click,function。grid.getView().scrollToTop();grid.getView().focusCell(0,0);varcell=grid.getView().getCell(0,0);cell.style.backgroundColor=red;)；使用 GridPanel 的 viewCon 巾 g 在创建表格时设置 GridVie

13、w 的初始化参数vargrid=newExt.grid.GridPanel(height:100,width:400,renderTo:grid,store:newExt.data.Store(autoLoad:true,proxy:newExt.data.MemoryProxy(data),reader:newExt.data.ArrayReader(,meta),显示的列，设置下拉菜单提示文字设置右侧滚动条的预留宽度升序，/设置下拉菜单提示文字降序，设置下拉菜单提示文字自动延展每列的长度为表格添加分页工具条* 可以使用 GridPanel 的 bbar 属性，并创建 Ext.PagingT

14、oolbar 分页工具条对* 注意，如果配置了分页工具条，store.load()就必须在构造表格以后执行。vargrid=newExt.grid.GridPanel(renderTo:grid,autoHeight:true,store:store,cm:cm,bbar:newExt.PagingToolbar(pageSize:10,/每页显示 10 条数据store:store,displayInfo:true,/显示数据信息displayMsg:显示第0条到1条记录，一共2条,emptyMsg:没有记录没有数据时显示的信息);store.load();columns:meta,view

15、Config:columnsText:scrollOffset:30,/sortAscText:sortDescText:forceFit:true/);从后台脚本获取分页数据使用 HttpProxy 传递请求，获取服务器的 JSON&据，交给 JsonReader 解析varcm=newExt.grid.ColumnModel(header:编号,dataIndex:id,header:名称,dataIndex:name);varstore=newExt.data.Store(proxy:newExt.data.HttpProxy(url:page.jsp),reader:newEx

16、t.data.JsonReader(totalProperty:totalProperty,root:root,name:id,name:name);vargrid=newExt.grid.GridPanel(renderTo:grid,autoHeight:true,/数据传回来之前高度未知，所以要使用自适应高度store:store,cm:cm,bbar:newExt.PagingToolbar(pageSize:10,store:store,displayInfo:true,displayMsg:显示第0条到1条记录/共2条，emptyMsg:没有记录);store.load(param

17、s:start:0,limit:10);如果想让分页工具条显示在表格的顶部，可以使用 GridPanel 的 tbar 属性设置添加工具条让 ExtJS 在对返回的数据进行分页* 需要在页面中引入 examples/locale 目录下的 PagingMemoryProxy.js 文件* 再使用 PagingMemoryProxy 设置代理varstore=newExt.data.Store(proxy:newExt.data.PagingMemoryProxy(data),reader:newExt.data.ArrayReader(,name:id,name:name,name:descn

18、)；/在创建 GridPanel 之后调用store.load(params:start:0,limit:3);可编辑表格控件EditorGrid的使用制作一个简单的 EditorGrid 的步骤1、定义列 ColumnModel 在里面添加 editor 属性varcm=newExt.grid.ColumnModel(header:编号,dataIndex:id,editor:newExt.grid.GridEditor(newExt.form.TextField(allowBlank:false/不允许在 TextField 中输入空值),header:名称，dataIndex:name,

19、editor:newExt.grid.GridEditor(newExt.form.TextField(allowBlank:false);2、准备一个数组vardata=1,Jason,2,Jay;3、创建 Ext.data.Store,设置内存代理，设置 ArrayReader 解析数组varstore=newExt.data.Store(proxy:newExt.data.MemoryProxy(data),reader:newExt.data.ArrayReader(,name:id,name:name)；4、加载数据，仓 1J 建 EditorGridPanelstore.load(

20、);vargrid=newExt.grid.EditorGridPanel(autoHeight:true,renderTo:grid,store:store,cm:cm);为可编辑表格添加和删除数据1、使用 Record 的 create 方法创建一个记录集 MyRecord,MyRecord 相当于一个varMyRecord=Ext.data.Record.create(name:id,type:string,name:name,type:string);store.load();2、创建 EditorGridPanel 面板，在属性 tbar 中创建 Ext.Toolbarvargrid

21、=newExt.grid.EditorGridPanel(autoHeight:true,renderTo:grid,store:store,cm:cm,tbar:newExt.Toolbar(-,/-text:添加一行,handler:function()varp=newMyRecord(id:,name:);grid.stopEditing();/store.insert(0,p);/grid.startEditing(0,0);/,-,text:删除一行,handler:function()Ext.Msg.confirm(信息,确定要删除？,function(btn)if(btn=yes

22、)varsm=grid.getSelectionModel();/获取表格的选择模型varcell=sm.getSelectedCell();/获取选中的单元格varrecord=store.getAt(cell0);通过行号得到 store 这一行对表示菜单分隔符关闭表格的编辑状态创建的 Record 插入 store 的第一行激活第一行第一列的编辑状态应的 Recordstore.remove(record);/移除数据);,-);为可编辑表格保存修改的结果在上面例子的基础之上，添加一个保存按钮text:保存,handler:function()varm=store.modified.sl

23、ice(0);获彳#store 中修改过得数据for(vari=0;im.length;i+)/验证表格信息是否正确，是否包含空格varrecord=mi;varfields=record.fields.keys;for(varj=0;jfields.length;j+)varname=fieldsj;varvalue=record.dataname;varcolIndex=cm.findColumnIndex(name);varrowIndex=store.indexOfId(record.id);vareditor=cm.getCellEditor(colIndex).field;if(!

24、editor.validateValue(value)Ext.Msg.alert(提示,请检查输入的数据是否正确！,function()grid.startEditing(rowIndex,colIndex););return;varjsonArray=;Ext.each(m,function(item);Ext.lib.Ajax.request(/使用 Ajax 请求提交给后台POST,save_data.jsp,success:function(response)/返回成功Ext.Msg.alert(信息，response.responseText,function()store.relo

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