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

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();