`
musicbox95351
  • 浏览: 229268 次
  • 性别: Icon_minigender_1
  • 来自: 武汉
社区版块
存档分类
最新评论

ext grid 加入checkbox列

    博客分类:
  • ext
EXT 
阅读更多
grid每列前面加checkbox:
    一般的grid使用一个Ext.grid.ColumnModel就可以了,要加入一个多选的列,一种方法是加入一个多选列模板Ext.grid.CheckboxSelectionModel:
    var sm = new Ext.grid.CheckboxSelectionModel();
    var cm = new Ext.grid.ColumnModel(
        [
            sm,
            {id:'company',header: "Company", width: 60, sortable: true, dataIndex: 'company'},
        ]
    );
    另外,实例化EditorGridPanel时还必须指定这个sm为selModel.
    如果不指定EditorGridPanel的selModel,将无法勾选checkbox。
    grid = new Ext.grid.EditorGridPanel(
        {
            id:'editGridTestAjax',
            width:700,
            height:500,
            el:'topic-grid',
            store:ds,
            cm:cm,
            clickToEdit:2,//双击后进入编辑状态
            selModel:sm  //这个 selModel 可简写为sm
        }
    );

    //处理checkbox的勾选事件
    grid.getSelectionModel().on('rowselect', function(sm, rowIdx, r){
alert('勾选了checkbox后,获得选中行的name:'+grid.store.getAt(rowIdx).get('name'));
});
    //处理checkbox的取消勾选事件
    grid.getSelectionModel().on('rowdeselect', function(sm, rowIdx, r){
alert('取消勾选checkbox后,获得的record 中的name:'+grid.store.getAt(rowIdx).get('name'));
});

    另一种方法是在ColumnModel中自己写一个checkbox列
    function changeCheck(value,cellmeta,record,rowIndex,columnIndex,store){
        return "<input type='checkbox' name='adds_checkbox' onclick=oneclick(this) id='adds_checkbox_'"+value+"></input>";
    }
    //上面的oneclick方法定义在Ext.onReady()外面
    var cm = new Ext.grid.ColumnModel( 
        [   
           
            {//自定义的多选列
                header:"<input id='allcheckbox' type='checkbox' onclick=checkall(this)></input>",
                dataIndex:'addsid',
                renderer:changeCheck,
                width:20,
                sortable:false
            },
                    ...
                 ]
                );
分享到:
评论

相关推荐

    flexigrid 插件 加入 CheckBox

    Flexigrid是一个类似于Ext Gird,但基于jQuery开发的Grid。它具有的功能包括:可以调整列宽,合并列标题,分页,排序,显示/隐藏表格等。... 本资源是作者根据原flexigrid 进行修改,首列加入CheckBox 的修改版。

    Ext2.0框架的grid使用

    本文将深入探讨Ext2.0框架下Grid的使用方法,涵盖其基本配置、数据绑定以及高级特性如CheckBox的集成,旨在帮助开发者快速掌握并高效利用这一工具。 #### Grid组件概述 Grid组件在Ext2.0框架中主要用于展示表格...

    ExtJS4如何自动生成控制grid的列显示、隐藏的checkbox

    为了实现这一功能,可以编写一个函数makeCustomMadePanel,该函数负责创建一个checkboxgroup,其中的每个checkbox对应grid中的一列。在checkbox的状态发生变化时,可以通过监听checkbox的change事件来控制对应列的...

    extjs4如何自动生成掌握grid的列显示、隐蔽的checkbox_.docx

    ### ExtJS4自动生成Grid列显示/隐藏Checkbox的实现方法 #### 一、问题背景及需求分析 在ExtJS4的应用开发过程中,有时会遇到这样的需求:需要为GridPanel中的每一列提供一个Checkbox来控制其是否显示。尽管ExtJS4...

    Ext2.0框架的Grid使用介绍

    ### Ext2.0框架的Grid使用介绍 #### 一、Ext2.0框架概述 Ext2.0是一款基于JavaScript的库,它提供了大量的用户界面组件,使得开发人员能够轻松地构建出高度交互式的Web应用程序。相比其他框架如YUI等,Ext2.0拥有...

    Ext2[1].0框架的Grid使用介绍

    本文介绍了Ext2.0框架中Grid控件的基本使用方法,包括如何定义ColumnModel、创建Store以及如何在Grid中添加CheckBox。通过这些基本的操作,我们可以构建出功能丰富且交互性强的数据展示界面。Ext2.0的强大之处在于它...

    Ext 开发指南 学习资料

    2.4.2. 让grid支持按列排序 2.4.3. 中文排序是个大问题 2.5. 让单元格里显示红色的字,图片,按钮,你还能想到什么? 2.6. 更进一步,自动行号和多选checkbox 2.6.1. 自动行号 2.6.2. 全选checkbox的时间了,请允许...

    EXT核心API详解

    45、Ext.form.Field类 …………………… 41 46、Ext.form.Checkbox类 …………… 42 47、Ext.form.Radio类 ………………… 43 48、Ext.form.HtmlEditor类 …………… 43 49、Ext.form.TextField类 …………… 44 50...

    Ext2.0示例讲解

    var grid = new Ext.grid.GridPanel({ el: 'grid', ds: ds, cm: cm }); grid.render(); ``` 扩展到更复杂的需求,例如在表格中添加CheckBox选中功能,可以创建一个CheckboxSelectionModel并将其添加到...

    asp.net Ext grid 显示列表

    new Ext.grid.RowNumberer({ header: "自动显示行号", width: 100 }), // 行号列 { header: '员工编号', dataIndex: 'EmployeeID', sortable: true, width: 100 }, { header: '名字', dataIndex: 'LastName', ...

    Ext js 教程大全

    自动生成行号,支持checkbox全选,动态选择显示哪些列,支持本地以及远程分页,可以对单元格按照自己的想法进行渲染,这些也算可以想到的功能。 再加上可编辑grid,添加新行,删除一或多行,提示脏数据,推拽改变...

    ext.net-extjs

    自动生成行号,支持checkbox全选,动态选择显示哪些列,支持本地以及远程分页,可以对单元格按照自己的想法进行渲染,这些也算可以想到的功能。 再加上可编辑grid,添加新行,删除一或多行,提示多行数据,拖拽改变...

    Extjs Grid 用法 pdf版

    本文将详细介绍 Extjs 中 Grid 组件的基本用法,包括如何创建 Grid、如何配置列模型 (Column Model)、如何处理不同格式的数据源以及如何在 Grid 中添加 CheckBox。 #### 二、Grid 组件基础 ##### 2.1 构建基本的 ...

    Ext js-2.0 带API

     自动生成行号,支持checkbox全选,动态选择显示哪些列,支持本地以及远程分页,可以对单元格按照自己的想法进行渲染,这些也算可以想到的功能。  再加上可编辑grid,添加新行,删除一或多行,提示脏数据,推拽...

    深入浅出Ext JS

     自动生成行号,支持checkbox全选,动态选择显示哪些列,支持本地以及远程分页,可以对单元格按照自己的想法进行渲染,这些也算可以想到的功能。  再加上可编辑grid,添加新行,删除一或多行,提示脏数据,推拽...

    EXT2.0中文教程

    2.4.2. 让grid支持按列排序 2.5. 让单元格里显示红色的字,图片,按钮,你还能想到什么? 2.6. 更进一步,自动行号和多选checkbox 2.6.1. 自动行号 2.6.2. 全选checkbox的时间了,请允许我让2.0先上场。 2.6.3. 1.x...

    Ext组件描述,各个组件含义

    **2.5 Editor Grid Panel (Ext.grid.EditorGridPanel)** - **xtype**: `editorgrid` - **功能描述**:Editor Grid Panel 是一个支持行级编辑的网格面板。 - **主要用途**:适合于需要对表格中的数据进行编辑的场景...

    EXT_JS实例,官方实例

    6. **表单组件**:EXT JS提供了一系列表单组件,如文本框(TextField)、下拉列表(ComboBox)、复选框(Checkbox)、单选按钮(RadioButton)等。这些组件可以轻松创建复杂的表单并实现数据验证。 7. **Ajax通信**...

    Ext 3.0 中文文档.zip

    四、Grid:Grid是Ext最常用的组件之一,用于展示表格数据。它可以处理大量的数据,支持行选择、排序、分页、列调整等功能。Grid的灵活性在于可以通过配置定义列的类型和行为,如使用模板渲染单元格内容,或者添加...

    Ext 可编辑表格

    首先,Ext的可编辑表格通常指的是`Ext.grid.Panel`或`Ext.grid.Viewport`,它们提供了一种交互式的表格展示和编辑数据的方式。在这些表格中,我们可以配置各列的编辑器,使得用户可以直接在单元格内进行输入或选择...

Global site tag (gtag.js) - Google Analytics