ExtJS常用代码(一)-Grid

时间：2011-01-27 来源：Sophie_Wang

Ext.grid.ColumnModel：列模型，定义GridPanel的表头
Ext.grid.RowSelectionModel：行选择模型，定义行的选择操作
Ext.grid.GridView：视图，负责表格面板的效果渲染
Ext.grid.Store：数据源，负责为表格面格提供各种不同格式的数据
Ext.grid.RowNumber()：序号生成器，负责为每一行生成一个序号
Ext.grid.CheckboxSelectionModel：带复选框的行选择模型

Ext.grid.GridPanel其实就是一个Panel，Ext.Panel是他的父类。在面板上放置表格数据就成了GridPanel

一个表一般会分为表头（Ext.grid.ColumnModel——Ext.util.Observable的子类）和数据栏（Ext.grid.）两个部分，所以列模型也会触发相应的事件，列模型包含若干列信息，每一个列信息保存在json结构中。一个列的配置选项有：

选项名类型作用

header        String    列头文字说明
dataIndex    String    记录结构中的name属性值
width        Nubmer    列的宽度
sortable    Boolean   是否排序
fixed          Boolean   是否固定宽度
resizable    Boolean   是否能改变列的宽度
menuDisabled    Boolean    单击列头后是否出来菜单
tooltip    String   悬停提示
renderer     Function    自定义单元格内容
align     String       列的对齐方式(left、right、center)

GridView：

grid被定义为Ext.grid.GridView类，Grid视图用来渲染表格，GridPanel的每一行是一个单独的一行多行的table，他以table为单位放在div里面

以下列出Ext.grid.GridView的方法：

getRows()：返回所有的行，这些行不是Extjs封装的对象，而是TR的对象，只能通过Dom访问他的属性
getRow(row)：返回指定的行，这些行不是Extjs封装的对象，而是TR的对象……
getCell(row,col)：返回第row行，第col列的单元格，不是Extjs封装的对象，而是TR的对象……
refresh(headersToo)：刷新，如果headersToo为true则连表头一起刷新

在实际运用中，如动态操作行、动态添加删除行光操作GridView是无法完成的，不管是动态操作行还是获取值，都和Ext.data.Store有关，只要操作Ext.data.Store中的数据就行了，数据一改变就调用refresh()方法刷新界面即可，refresh的另一个作用就是对编号重新编号。

读取选定行的值：

Store由结构和数据组成，每一行都是一个Ext.data.Record，Record的每一个值都由name标识，通过name属性值可以读取出指定Record的某一列的值。

例：grid.getStore().getAt(i).get("Memo");
getStore()：获取Grid里面的Store
getAt(i)：获取第i个Store
get("Memo")：获取Grid的Memo值。（Memo为Ext.data.Record.create时的name对应的值）

例：打印出所选定行的姓名。
var view = grid.getView();
      var rsm = grid.getSelectionModel();
      var value = "";
      for(i=0;i<view.getRows().length;i++){
       if(rsm.isSelected(i)){
        value += grid.getStore().getAt(i).get("Name")+"<br>";
       }
      }
      Ext.MessageBox.alert("所选数据提示：",value);

增加新行：（可以把新行加到任何位置，需要调用Ext.data.store里面的方法）

add(recoreds)：将记录添加到行尾，可以一次添加多行，records为Ext.data.Record[]类型的参数
insert(index,records)：将记录添加到指定的索引处，可以一次加多行，records为Ext.data.Record[]类型的参数

      var view = grid.getView();
      var newRowValue = {
        Id: 1234128732,
        Name: '宋七',
        Sex: '女',
        Birth: "1922-03-22",
        Funcy: '到处游山玩水！'
       };
      var newRecord = new record(newRowValue);
      grid.getStore().add(newRecord);    // 添加到尾部
      // grid.getStore().insert(0,newRecord); // 添加到首条
      view.refresh();

删除行：（调用Ext.data.store里面的方法）——删除行要遵循从后往前的删除顺序

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(i=view.getRows().length-1;i>=0;i--){
       if(rsm.isSelected(i)){
        store.remove(store.getAt(i));
       }
      }
      view.refresh();
     }
    }