Grid视图---Ext.grid.GridView基本方法

Grid视图---Ext.grid.GridView基本方法

2010-08-12 9:40

Ext.grid.GridView 中常用的方法不多，但有些方法特别有用，下面是Ext.grid.GridView 最重要的方法： ² getRows()：返回所有的行，这些行不是Extjs 的封装类对象，而是TR 元素对象， 只能通过dom访问他的属性； ² getRow(row)：返回指定的行，不是Extjs的封装类对象，而是TR元素对象，只能 通过dom访问他的属性； ² getCell(row, col)：返回第row 行第col 列的单元格，返回的单元格不是Extjs 的封 装类对象，而是TD 元素对象，只能通过dom访问他的属性； ² refresh(headersToo)：刷新，如果headersToo为true，则表头也一起刷新； Ø 读取被选行的值 Store由结构和数据构成，每一行都是一个Ext.data.Record，Record的每一个值都由name 标识，通过name属性值可以读取出指定Record的某一列的值。先看下面的代码： grid.getStore().getAt(i).get("Memo"); grid.getStore()获取GridPanel的Store，getAt(i)获取第i个Record，get(“Memo”)获取Record 的Memo的值。应该还记得，我们曾经这样定义过Record： var Human = Ext.data.Record.create([ {name: "Name", type: "string", mapping: "name"}, {name: "Sex", type: "string", mapping: "sex"}, {name: "Birthday", type: "string", mapping: "birthday"}, {name: "Education", type: "string", mapping: "edu"}, {name: "Memo", type: "string", mapping: "memo"} ]); 下面的示例将打印出所有被选行的姓名： var view = grid.getView(); var rsm = grid.getSelectionModel();//得到行选择模型 var r = ""; for(var i = 0; i < view.getRows().length; i ++){ if(rsm.isSelected(i)){//找到选中的行 r += grid.getStore().getAt(i).get("Name") + "<br>"; } } Ext.MessageBox.alert("选择", "您选择的数据有：<br>" + r); Ø 增加新行 我们可以把新行添加到任何位置，这需要调用Ext.data.Store中定义的方法： ² add(records)：将记录添加到行尾，可以一次添加多行，records为Ext.data.Record[] 类型的参数； ² insert(index, records)：将记录添加到指定索引处，可以一次添加多行，records 为Ext.data.Record[]类型的参数； 本章示例中，我们定义了一个描述人类的结构Human，以Human为基础，我们创建数 据： var obj = { Name: "新人物", Sex: "女", Birthday: Date.parseDate("1980-05-12", "Y-m-d"), Education: "本科", Memo: "是新的" }; 这是一个json 对象，也可以是数组，由Reader 的类型决定，json 对象中的属性名必须 和Human的name属性值一致，这是一种映射关系。 我们将obj与Human合并： var human = new Human(obj); 将 human添加到Store中就可以了。最后，刷新GridView，让界面重新显示，GridView 会重新从Store读取数据并更新界面。下面是本操作完整的源代码： var view = grid.getView(); var obj = { Name: "新新人类", Sex: "男", Birthday: Date.parseDate("2009-05-16", "Y-m-d"), Education: "本科", Memo: "我是新新人类，所向无敌！" }; var human = new Human(obj); grid.getStore().insert(0, human);//添加到行首，修改第一个参数可以添加到任何位置 view.refresh(); 如果要添加到行尾，使用下面的语句，其他代码完全相同： grid.getStore().add(human); Ø 删除选择行 删除行的思路和添加行大同小异，基本实现步骤如下： 1. 循环遍历所有行 2. 判断当前行是否被选中 3. 删除选中的行 删除行同样要使用Ext.data.Store 的方法remove()，如果是逐行删除，则应该遵循从后 往前的方向，remove()这样定义： remove (record)：删除指定的记录，record参数为Ext.data.Record类型对象 另外，如果要删除所有行，可以调用removeAll()方法。 看看完整的源代码： { text: "删除选定行", icon: "../extjs/resources/images/default/dd/drop-no.gif", cls: "x-btn-text-icon", handler: function(){ var rsm = grid.getSelectionModel();//得到行选择模型 var view = grid.getView(); var store = grid.getStore(); for(var i = view.getRows().length - 1; i >= 0 ; i --){ if(rsm.isSelected(i)){ store.remove(store.getAt(i)); } } view.refresh(); } } 删除所有行则简单了很多： var store = grid.getStore(); var view = grid.getView(); store.removeAll(); view.refresh();