Extjs行选择模型

Extjs行选择模型与Grid视图

Extjs行选择模型：Ext.data.RowSelectionModel，下面为其方法：

selectFirstRow()：选择第一行
selectLastRow(keepExisting)：选择最后一行，keepExisting为true时保留原来选择行，否则清除原来选择
selectNext(keepExisting)：选择下一行
selectPrevious(keepExisting)：选择上一行

selectAll()：选择所有行
selectRows(rows,keepExisting)：选择数组rows中指定行的索引
selectRow(index,keepExisting)：选中指定索引行
selectRange(startRow,endRow,keepExisting)：选择从startRow到endRow结束的所有行
deselectRow(index)：不选定指定索引的行
deselectRange(startRow,endRow)：不选从startRow到endRow结束的所有行

hasNext()：判断是否有下一行
hasPrevious()：判断是否有上一行
isSelected(index)：判断指定的索引是否被选中

getCount()：返回选择的行数

---------------------------------- 代码如下：-----------------------------------------

Ext.onReady(function() {
        
/*** 在这里面添写代码 ***/

var checkColumn = new Ext.grid.CheckboxSelectionModel();

var infoColumn = new Ext.grid.ColumnModel([
   new Ext.grid.RowNumberer(),
   checkColumn,
   {header:"编号", dataIndex:"Id", width:100, tooltip:"可以点击进行排序", sortable:true, menuDisabled:false },
   {header:"姓名", dataIndex:"Name", width:150, sortable:true, menuDisabled:false },
   {header:"性别", dataIndex:"Sex", width:50, sortable:true, menuDisabled:false, renderer: function(v){
    if(v=="男"){
     return "<img src='../extjs/resources/images/access/tree/drop-add.gif' />";
    }else{
     return "<img src='../extjs/resources/images/access/tree/drop-no.gif' />";
    }
   }},
   {header:"生日", dataIndex:"Birth", width:100, sortable:true, menuDisabled:false, renderer: Ext.util.Format.dateRenderer("m/d/Y") },
   {header:"爱好", dataIndex:"Funcy", id:"funcy", sortable:false, menuDisabled:false },
   {header:"操作", dataIndex:"", width:150, menuDisabled:true, renderer: function(v){
    return "<span style='margin-right:10'><a href=# >编辑</a></span><span><a href=# >删除</a></span>";
   }}
]);

   var memberArr = [
   {
    id: 5132804128,
    name: '张三',
    sex: '男',
    birthday: '1986-03-21',
    funcy: '没有什么喜好！'
   },{
    id: 1239234222,
    name: '李四',
    sex: '女',
    birthday: '1932-07-22',
    funcy: '打麻将、斗地主！'
   },{
    id: 2982374233,
    name: '王五',
    sex: '女',
    birthday: '1923-09-01',
    funcy: '喜欢踢中国传统足球！'
   },{
    id: 4238923948,
    name: '赵六',
    sex: '男',
    birthday: '1937-03-21',
    funcy: '喜欢钓鱼！'
   }
];
  
var proxy = new Ext.data.MemoryProxy(memberArr);

var record = new Ext.data.Record.create([
   { name:"Id", type:"int", mapping:"id" },
   { name:"Name", type:"String", mapping:"name" },
   { name:"Sex", type:"String", mapping:"sex" },
   { name:"Birth", type:"String", mapping:"birthday" },
   { name:"Funcy", type:"String", mapping:"funcy" },
]);

var reader = new Ext.data.JsonReader({},record);

var store = new Ext.data.Store({
   proxy: proxy,
   reader: reader,
   autoLoad: true
});

var grid = new Ext.grid.GridPanel({
   title: "数据显示列表",
   autoHeight: true,
   cm: infoColumn,
   sm: checkColumn,
   store: store,
   renderTo: Ext.getBody(),
   autoExpandColumn: "funcy",   // 自动填满宽度
   buttonAlign: "center",
   buttons: [{
     text: "选中第一行",
     handler: function(){
      var rsm = grid.getSelectionModel();   // 得到行选择模型
      rsm.selectFirstRow();
     }
    },{
     text: "选中下一行",
     handler: function(){
      var rsm = grid.getSelectionModel();   // 得到行选择模型
      if(rsm.hasNext()) rsm.selectNext(false);
      else Ext.Msg.alert("警告","已是最后一行！");
     }
    },{
     text: "选中上一行",
     handler: function(){
      var rsm = grid.getSelectionModel();   // 得到行选择模型
      if(rsm.hasPrevious()) rsm.selectPrevious(true);
      else Ext.Msg.alert("警告","已是第一行！");
     }
    },{
     text: "选中所有行",
     handler: function(){
      var rsm = grid.getSelectionModel();   // 得到行选择模型
      rsm.selectAll();
     }
    },{
     text: "取消所有选中",
     handler: function(){
      var rsm = grid.getSelectionModel();   // 得到选择模型
      rsm.deselectRange(0,grid.getView().getRows().length-1);
     }
    },{
     text: "反选",
     handler: function(){
      var rsm = grid.getSelectionModel();   // 得到选择模型
      for(i=grid.getView().getRows().length-1;i>=0;i--){
       if(rsm.isSelected(i)){
        rsm.deselectRow(i);
       }else{
        rsm.selectRows([i],true);   // rsm.selectRow(i,true); 也可以
       }
      }
     }
    }
   ]
});

/*** 在这里面添写代码结束 ***/
        
});