本篇的内容是为表格添加行号，和复选框，最后谈一下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("提示","你还没有选中记录.");
         });
});

ExtJS表格——行号、复选框、选择模型的更多相关文章

  1. ExtJS4.2学习(五)表格渲染与复选框

    鸣谢:http://www.shuyangyang.com.cn/jishuliangongfang/qianduanjishu/2013-11-10/174.html --------------- ...

  2. extjs grid 复选框选择事件

    开发中需求是统计选择的行数,所以要监控checkbox的选择事件包括表头的全选事件 遇到的问题就不赘述了 方案是监控grid的复选框和行加载时绑定事件 baseView: DBEN.controls. ...

  3. 关于表格前面checkbox复选框不打勾的问题

    当点击左边的树节点的时候,让右边的表格自动选中相应的行,但是选中的行前面如果有checkbox,可能复选框虽然选中了但是不打上勾,解决方案,将遍历表格数据那段代码用延时器包裹一下.

  4. ExtJs 4.2.1 复选框数据项动态加载(更新一下)

    最近在做博客项目,后台管理用的是ExtJs4.2.1版本,因为是初学所以在使用的时候也遇到不少的这样或那样的问题,也写了不少这方面的博客,今天要写的博客是关于复选框数据项动态的加载功能,以前也没用过, ...

  5. 转：jQuery LigerUI 使用教程表格篇(3) 复选框、多表头、分组、汇总和明细

    阅读目录 复选框 多表头 分组 汇总 明细 复选框 grid可以设置复选框模式进行多选,只需要简单的配置 checked:true 获取选中行 如果要获取选中的行,可以用getSelecteds方法: ...

  6. jQuery+SpringMVC中的复选框选择与传值

    一.checkbox选择 在jQuery中,选中checkbox通用的两种方式: $("#cb1").attr("checked","checked& ...

  7. [置顶] Python+Django 复选框选择多个 提交只能保存单个

    之前,做表单时使用单选方式,今天修改为复选框方式提交. 问题来了:在选择多个后保存,发现竟然只能最后一个选择. print(request.POST)显示只有最后一个 print(str(reques ...

  8. DevExpress XtraTreeList TreeList复选框选择

    权限管理涉及复选框多勾选. 1.控件属性设置 TreeList.OperationView.ShowCheckBoxes=true;用于显示CheckBox: TreeList.OperationBe ...

  9. input check复选框选择后修改<a>标签超链接href

    1. 给复选框添加onclick事件 获取标签id <tbody> <c:forEach var="file" items="${files}" ...

随机推荐

  1. php判断是手机还是pc访问从而走不同url

    <?php header("Content-type:text/html;charset=utf-8"); function is_mobile(){ $user_agent ...

  2. golang之终端操作，文件操作

    终端操作 操作终端相关的文件句柄常量os.Stdin:标准输入os.Stdout:标准输出os.Stderr:标准错误输出 关于终端操作的代码例子: package main import " ...

  3. csu 1503: 点到圆弧的距离

    1503: 点到圆弧的距离 Time Limit: 1 Sec  Memory Limit: 128 MB  Special JudgeSubmit: 614  Solved: 101[Submit] ...

  4. [你必须知道的.NET]第十八回：对象创建始末（上）

    本文将介绍以下内容: 对象的创建过程 内存分配分析 内存布局研究 1. 引言 了解.NET的内存管理机制,首先应该从内存分配开始,也就是对象的创建环节.对象的创建,是个复杂的过程,主要包括内存分配和初 ...

  5. JS模块化规范CMD之SeaJS

    1. 在接触规范之前,我们用模块化来封装代码大多为如下: ;(function (形参模块名, 依赖项, 依赖项) { // 通过 形参模块名 修改模块 window.模块名 = 形参模块名 })(w ...

  6. 实现手机端上下左右滑屏的jq原生代码和使用库·两种办法

    先来一个原生的.我使用的是jq. 需要注意的地方就是被触发的元素最好不要是body,这个代码也可以修改,如果obj传进来的是body那么,$(this)必须是你的监听元素,不然会冒泡泡,整个项目就…… ...

  7. Firefox 火狐 页面特殊符号乱码解决方法

    这是由于字体问题导致的. 解决方法,参照下图设置,重点是红色标注区域.衬线字体务必选择兼容性最好的,比如思源黑体.宋体.

  8. java总结(方法与对象)

    包 1.用于管理类 2.包名采用公司的域名倒序+项目名+模块名 3.包的引入 类 1.main方法用static 它调用的方法也要static 2.程序要运行必须要main方法 3.类是一种引用数据类 ...

  9. jquery控制元素的显示与隐藏

    比如要控制div的显示与隐藏,一句话就搞定了.$("#id").show()表示display:block,$("#id").hide()表示display:n ...

  10. 2017年浙江工业大学大学生程序设计迎新赛预赛 H - 栗酱的文明

    题目描述         “伟大的勇士兔栽栗女王,所有栗子看到您都不寒而栗,但也非常尊重您.您骑着威风凛凛的小白兔,带领兔栽栗们奋勇前行.伟大史诗告诉我们,烈兔勇栗从大草原飞奔出来,冲在每场战争的前线 ...