ExtJS表格——行号、复选框、选择模型

浏览数：29 / 时间：2015年06月09日

本篇的内容是为表格添加行号，和复选框，最后谈一下Ext的选择模型。内容比较简单，就直接上代码了。
一、设置行号
   行号的设置主要问题在于删除某一行后需要重新计算行号
  Ext.onReady(function() {
         var cm = new Ext.grid.ColumnModel([
                     new Ext.grid.RowNumberer(),           --在这里设置行号
                    { header: ‘编号‘, dataIndex: ‘id‘ },
                    { header: ‘性别‘, dataIndex: ‘sex‘ },
                    { header: ‘名称‘, dataIndex: ‘name‘ },
                    { header: ‘描述‘, dataIndex: ‘descn‘ }
                 ]);
         var data = [
                        [‘1‘, ‘male‘, ‘name1‘, ‘descn1‘],
                        [‘2‘, ‘female‘, ‘name2‘, ‘descn2‘],
                        [‘3‘, ‘male‘, ‘name3‘, ‘descn3‘],
                        [‘4‘, ‘female‘, ‘name4‘, ‘descn4‘],
                        [‘5‘, ‘male‘, ‘name5‘, ‘descn5‘]
                    ];
         var store = new Ext.data.Store({
                         proxy: new Ext.data.MemoryProxy(data),
                         reader: new Ext.data.ArrayReader({}, [
                                    { name: ‘id‘ },
                                    { name: ‘sex‘ },
                                    { name: ‘name‘ },
                                    { name: ‘descn‘ }
                                ])
                                });

         store.load();
         var grid = new Ext.grid.GridPanel({
             autoHeight: true,
             renderTo: ‘grid‘,
             store: store,
             cm: cm
         });
         Ext.get(‘remove‘).on(‘click‘, function() {   --监听删除按钮的单击事件
             store.remove(store.getAt(1));            --store.getAt(1) 获得第2行数据
             grid.view.refresh();                     --强制grid刷新，重新计算行号
         });
     });
页面代码：
<body>
        <div id="grid"></div>
        <input id="remove" type="button" value="删除第二行数据" />
</body>
二、设置复选框
复选框是通过Ext.grid.CheckboxSelectionModel来设置的，它会在每行数据前加一个复选框，另外它必须添加到列定义和表格装配定义2个部分。默认单击表格的某一行，复选框就会自动选中。可以通过如下设置取消单击即选中，而需要通过单击复选框来选中:
  var sm = Ext.grid.CheckboxSelectionModel(｛ handleMouseDown: Ext.emptyFn ｝);
复选框设置代码：
Ext.onReady(function() {
         var sm = Ext.grid.CheckboxSelectionModel();
         var cm = new Ext.grid.ColumnModel([
                     new Ext.grid.RowNumberer(),           --在这里设置行号
                     sm,                                   --设置复选框
                    { header: ‘编号‘, dataIndex: ‘id‘ },
                    { header: ‘性别‘, dataIndex: ‘sex‘ },
                    { header: ‘名称‘, dataIndex: ‘name‘ },
                    { header: ‘描述‘, dataIndex: ‘descn‘ }
                 ]);
         var data = [
                        [‘1‘, ‘male‘, ‘name1‘, ‘descn1‘],
                        [‘2‘, ‘female‘, ‘name2‘, ‘descn2‘],
                        [‘3‘, ‘male‘, ‘name3‘, ‘descn3‘],
                        [‘4‘, ‘female‘, ‘name4‘, ‘descn4‘],
                        [‘5‘, ‘male‘, ‘name5‘, ‘descn5‘]
                    ];
         var store = new Ext.data.Store({
                         proxy: new Ext.data.MemoryProxy(data),
                         reader: new Ext.data.ArrayReader({}, [
                                    { name: ‘id‘ },
                                    { name: ‘sex‘ },
                                    { name: ‘name‘ },
                                    { name: ‘descn‘ }
                                ])
                                });

         store.load();
         var grid = new Ext.grid.GridPanel({
             autoHeight: true,
             renderTo: ‘grid‘,
             store: store,
             cm: cm，
             sm：sm
         });
     });
三、选择模型
(1).RowSelectionModel 模型
    在定义Ext.grid.GridPanel时，默认使用的是RowSelectionModel——行选择模型，当单击某一个单元格时，默认选中的是却是整行，选择模型默认
支持多选，鼠标单击时按住Shift或Ctrl键就可以选择多行。如果只希望选择一行，需要设置singleSelect参数。
(2).CellSelectionModel模型
    每次只允许选择一个单元格，EditorGrid里默认使用的就是CellSelectionModel. 当然也可以将EditorGrid的选择模型设置为RowSelectionModel，
从而达到选中一整行的效果。
(3).获取选中的行
  Ext.get(‘remove‘).on(‘click‘, function() {
             var selections = grid.getSelectionModel().getSelections();    --先获取选择模型，然后从选择模型中获取选中的记录。
             if (selections.length > 0) {
                 Ext.Msg.confirm(‘提示‘, ‘你确认删除选中的记录吗？‘, function(_btn) {
                     if (_btn == ‘yes‘) {
                         for (var i = 0; i < selections.length; i++) {
                             var record = selections;
                             store.remove(record);
                         }
                         grid.view.refresh();
                     }
                 });
             }
             else
                 Ext.Msg.alert("提示","你还没有选中记录.");
         });
});