ExtJS-Grid框增加复选框checkbox

var gridColumnModel = new Ext.grid.ColumnModel([
                    new Ext.grid.RowNumberer(),
                    new Ext.grid.CheckboxSelectionModel({ singleSelect: false }),//复选框
                    {
                        header : ‘信息ID‘,
                        dataIndex : ‘INFO_ID‘,
                        sortable : true,
                        align : ‘center‘,
                        width : 80
                    }, {
                        header : ‘商品ID‘,
                        dataIndex : ‘PRICE_PLAN_CD‘,
                        sortable : true,
                        align : ‘center‘,
                        width : 100
                    }, {
                        header : ‘商品类型‘,
                        dataIndex : ‘OFFERING_TYPE‘,
                        sortable : true,
                        align : ‘center‘,
                        width : 70
                    }, {
                        header : ‘管理级别‘,
                        dataIndex : ‘MANAGE_LEVEL‘,
                        sortable : true,
                        align : ‘center‘,
                        width : 70
                    }, {
                        header : ‘管理编号‘,
                        dataIndex : ‘MANAGE_CODE‘,
                        sortable : true,
                        align : ‘center‘,
                        width : 110
                    }, {
                        header : ‘目录ID‘,
                        dataIndex : ‘CATEGORY_ID‘,
                        sortable : true,
                        align : ‘center‘,
                        width : 100
                    }, {
                        header : ‘商品名称‘,
                        dataIndex : ‘NAME‘,
                        sortable : true,
                        align : ‘center‘,
                        width : 150
                    }, {
                        header : ‘生效时间‘,
                        dataIndex : ‘START_DT‘,
                        sortable : true,
                        align : ‘center‘,
                        width : 120

                    }, {
                        header : ‘失效时间‘,
                        dataIndex : ‘END_DT‘,
                        sortable : true,
                        align : ‘center‘,
                        width : 120
                    }, {
                        header : ‘员工ID‘,
                        dataIndex : ‘STAFF_CODE‘,
                        sortable : true,
                        align : ‘center‘,
                        width : 110
                    }, {
                        header : ‘创建时间‘,
                        dataIndex : ‘CREATE_DT‘,
                        sortable : true,
                        align : ‘center‘,
                        width : 120

                    }, {
                        header : ‘版本时间 ‘,
                        dataIndex : ‘VERSION‘,
                        sortable : true,
                        align : ‘center‘,
                        width : 120

                    }, {
                        header : ‘地区ID‘,
                        dataIndex : ‘AREA_ID‘,
                        sortable : true,
                        align : ‘center‘,
                        width : 100

                    }, {
                        header : ‘描述‘,
                        dataIndex : ‘DESCRIPTION‘,
                        sortable : true,
                        align : ‘center‘,
                        width : 145

                    }, {
                        header : ‘商品状态‘,
                        dataIndex : ‘OFFERING_STATUS_CD‘,
                        sortable : true,
                        align : ‘center‘,
                        width : 100

                    }]);
 1 var grid = new CDEXT.grid.PageGrid({
 2                         cm : gridColumnModel,
 3                         sm: new Ext.grid.CheckboxSelectionModel ({ singleSelect: false }),//复选框
 4                         store : store,
 5                         title : ‘<div align="center">商品信息</div>‘,
 6                         stripeRows : true,
 7                         region : ‘north‘,
 8                         autoScroll : true,
 9                         height : 300,
10                         tbar : [‘需求单ID:‘ ,reqIdField, ‘-‘, ‘需求单名:‘,requestField, ‘-‘, ‘商品名:‘, textField, ‘-‘, ‘开始时间(创建):‘,
11                                 startDate, ‘-‘, ‘结束时间(创建):‘, endDate, ‘-‘,
12                                 deaSearch,insertSearch],
13                         bbar : true,
14                         stripeRows : true,
15                         loadMask : {
16                             msg : ‘正在加载数据,请稍侯......‘
17                         },
18                         listeners : {
19                             ‘rowclick‘ : function() {
20                                 var record = grid.getSelectionModel()
21                                         .getSelected();
22                                 if (record) {
23                                     var instanceId = record
24                                             .get(‘PRICING_INSTANCE_ID‘);
25                                     pmstore.setBaseParam("search.prInsId",
26                                             instanceId);
27                                     pmgrid.reload();
28                                 }
29                             }
30                         }
31                     });

上述示例,效果如下

关键点:

在ColumnModel中增加:

new Ext.grid.CheckboxSelectionModel({ singleSelect: false })//复选框

在Grid中增加:

sm: new Ext.grid.CheckboxSelectionModel ({ singleSelect: false })//复选框

取值时:

var records=grid.getSelectionModel().getSelections();
          var mycars=new Array();
         
         for(var i=0;i<records.length;i++){
             mycars[i]=records[i].data.INFO_ID;
         };

ExtJS-Grid框增加复选框checkbox

时间: 2024-10-12 06:32:19

ExtJS-Grid框增加复选框checkbox的相关文章

Selenium2+python自动化19-单选框和复选框(radiobox、checkbox)【转载】

本篇主要介绍单选框和复选框的操作 一.认识单选框和复选框 1.先认清楚单选框和复选框长什么样 2.各位小伙伴看清楚哦,上面的单选框是圆的:下图复选框是方的,这个是业界的标准,要是开发小伙伴把图标弄错了,可以先抽他了. 二.radio和checkbox源码 1.上图的html源码如下,把下面这段复杂下来,写到文本里,后缀改成.html就可以了. <html>      <head>      <meta http-equiv="content-type" c

[CSS揭秘]自定义单选框和复选框

很多Web前端工程师肯定都会遇到过,在项目中,UI设计师跑来跟你说,我这个地方的表单控件需要设计成这个样子那个样子.但是用CSS却不能够修改这些控件的默认样式,于是乎,只能通过div+javascript技术来进行模拟.特别是在如今移动端的崛起时代,更加注重用户的体验.于是就更加需要这样一种hack技术. 如果对如今的前端框架有过了解,都会知道组件这个概念.那么在这些框架中,都会提供一些单选框或复选框按钮组件.可见大家之前受到表单元素的默认样式的毒害有多深. 今天先给大家简单介绍一下如何通过CS

vue.js实现单选框、复选框和下拉框

Vue.js可以很方便的实现数据双向绑定,所以在处理表单,人机交互方面具有很大的优势.下边以单选框.复选框和下拉框为例介绍他们在HTML和Vue.js中的具体实现方式. 一.单选框 在传统的HTML中实现单选框的方法如下: <div id="app"> <input type="radio" name="gender" value="man" id="man"/><label

android 单选框和复选框

<?xml version="1.0" encoding="utf-8"?> <TableLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="fill_parent" android:layout_heig

Selenium2+python自动化19-单选框和复选框

本篇主要介绍单选框和复选框的操作 一.认识单选框和复选框 1.先认清楚单选框和复选框长什么样 2.各位小伙伴看清楚哦,上面的单选框是圆的:下图复选框是方的,这个是业界的标准,要是开发小伙伴把图标弄错了,可以先抽他了. 二.radio和checkbox源码 1.上图的html源码如下,把下面这段复杂下来,写到文本里,后缀改成.html就可以了. <html> <head> <meta http-equiv="content-type" content=&qu

html与用户交互中单选框与复选框&amp;下拉列表中的情况

使用单选框.复选框,让用户选择 在使用表单设计调查表时,为了减少用户的操作,使用选择框是一个好主意,html中有两种选择框,即单选框和复选框,两者的区别是单选框中的选项用户只能选择一项,而复选框中用户可以任意选择多项,甚至全选.请看下面的例子: 语法: <input type="radio/checkbox" value="值" name="名称" checked="checked"/> 1.type: 当 typ

20151220学习内容:Web之单选框、复选框

单选框:RadioButton RadioButton中有个属性GroupName,当单选时,必须把各个选项的组名设成同一个 查看按钮是否选中:bool sex = RadioButton1.Checked; Label1.Text = sex.ToString(); 单选按钮列表:RadioButtonList 属性:RepeatDirection:横向或纵向 绑定数据: TextDataContext context = new TextDataContext(); RadioButtonL

使用单选框、复选框,让用户选择

在使用表单设计调查表时,为了减少用户的操作,使用选择框是一个好主意,html中有两种选择框,即单选框和复选框,两者的区别是单选框中的选项用户只能选择一项,而复选框中用户可以任意选择多项,甚至全选.请看下面的例子: 语法: <input type="radio/checkbox" value="值" name="名称" checked="checked"/> 1.type: 当 type="radio&qu

CSS学习笔记三:自定义单选框,复选框,开关

一点一点学习CCS,这次学习了如何自定义单选框,复选框以及开关. 一.单选框 1.先写好body里面的样式,先写几个框 1 <body> 2 <div class="radio-1"> 3 <input type="radio" name="radio-1" id="radio-1-1"> 4 <label for="radio-1-1"></label