首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何将复选框列添加到Extjs Grid

要将复选框列添加到ExtJS Grid,您可以使用Ext.grid.column.CheckColumn类。以下是一个简单的示例,说明如何将复选框列添加到ExtJS Grid中:

  1. 首先,确保您已经包含了ExtJS库的引用。
  2. 在您的JavaScript代码中,创建一个Ext.grid.column.CheckColumn实例,并将其添加到Ext.grid.Panelcolumns配置中。
代码语言:javascript
复制
Ext.create('Ext.grid.Panel', {
    title: 'My Checkbox Grid',
    store: myStore,
    columns: [
        // 添加复选框列
        {
            xtype: 'checkcolumn',
            header: 'Selected',
            dataIndex: 'selected',
            width: 100
        },
        // 其他列配置
        {
            text: 'Name',
            dataIndex: 'name',
            flex: 1
        },
        {
            text: 'Email',
            dataIndex: 'email',
            flex: 1
        }
    ],
    renderTo: Ext.getBody()
});

在这个示例中,我们创建了一个Ext.grid.Panel实例,并添加了一个Ext.grid.column.CheckColumn实例。我们还定义了两个其他列:NameEmail

  1. 确保您的数据存储包含一个selected字段,以便复选框列可以正确显示和更新数据。
代码语言:javascript
复制
var myStore = Ext.create('Ext.data.Store', {
    fields: [
        { name: 'name', type: 'string' },
        { name: 'email', type: 'string' },
        { name: 'selected', type: 'boolean' }
    ],
    data: [
        { name: 'John Doe', email: 'john.doe@example.com', selected: false },
        { name: 'Jane Doe', email: 'jane.doe@example.com', selected: false },
        // 更多数据
    ]
});

在这个示例中,我们创建了一个Ext.data.Store实例,并定义了三个字段:nameemailselectedselected字段的类型为boolean,这样复选框列可以正确显示和更新数据。

现在,您应该已经成功地将复选框列添加到了ExtJS Grid中。用户可以通过单击复选框来选择或取消选择行,并且selected字段将自动更新以反映当前状态。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

  • Extjs grid 组件

    表格面板类Ext.grid.Panel 重要的配置参数 columns : Array 模式(Ext.grid.column.Columnxtype: gridcolumn) 重要的配置参数 text...: String 的标题 默认是"" dataIndex : String 和Model的一一对应的 sortable : true 可以整理,可以进行分类的 field: 可编辑字典配置 重要方法...getStore    返回当前页面所关联的store 重要属性 ownerCt 组件所属的 Container (当前组件被添加到一个容器 中时此值被自动设置) title : String 表格的标题...模式的住类 Ext.grid.column.Action xtype: actioncolumn 在表格中渲染一组图标按钮,并且为他赋予某种功能 altText : String 设置应用image元素上的...invalidateScrollerOnRefresh: false, disableSelection: true,    });  demo 下载 https://github.com/ningmengxs/Extjs.git

    2.5K80

    ExtJs的api文档该怎么看

    写在前面 之前有在ExtJS初体验中说了ExtJs给我们项目开发带来了很多便利,有童鞋在下面留言问extjs的API该怎么看?很多刚入门的童鞋被ExtJs里各种庞大的控件弄晕了,不知道怎么看api。...那么这篇我就简单地说下extjs的api该怎么看。 ExtJs的api文档该怎么看 如果想在本地查看extjs的api,大家自行下载解压查看即可,查看方法网上很多,不再赘述。...下面以Panel类写个例子说明: var subsys_grid = Ext.create('Ext.grid.Panel', { title:'子系统列表', region...比如上面的例子实例化了一个对象subsys_grid ,那么现在你可以取实例化对象的数据了。比如:subsys_grid.title就能取得Panel的标题。...myPanel]); // Array returned var item = myContainer.add(myPanel); // One item is returned 该例子表示的是将一个或多个组件添加到该容器中

    1.9K20

    ExtJs学习笔记(2)_Basic GridPanel

    ,             width: 600,             title: '基本网格示例',             viewConfig: { columnsText: '显示'...grid.getSelectionModel().selectFirstRow();     });     ExtJs_Grid_Demo 中,否则网格上右击,设置显示时,报JS错误,原因不明。...2.WCF的服务端方法,必须设置成JSON格式,另外Method设置为GET,否则运行时,前端页面读不出数据 3.如果设置了autoExpandColumn,则autoExpandColumn对应的,...必须是id对应的,否则出错 4.服务端的类中,如果有DateTime字符的字段,需要手动修改dbml对应的cs文件,把DateTime改成string,否则序列化时,会产生很怪的值,估计是.Net在序列化成

    1.8K90

    GridView利用CheckBox复选框实现单选功能

    自Dev13.2开始,GridView提供了自带的复选框,该功能能实现多选操作,方便了不少,那如果想把这个自带的复选框做成单选,那就需要单独处理了。...先补充一下,GridView的复选框怎么设置,如下代码片段,只要设置前面两个属性即可在GridView看到有一复选框(BandedGridView较老版本不支持这个功能,应该得在19.2或者20之后的版本才支持...,具体可以看看自己的版本,如果设置无效,那么说明不支持): //设置显示复选框 gridview.OptionsSelection.MultiSelectMode = DevExpress.XtraGrid.Views.Grid.GridMultiSelectMode.CheckBoxRowSelect...了解如何显示复选框,那么想实现单选的功能就需要检测选择操作时候对其他行的CheckBox进行取消选择,GridView提供了一个SelectionChanged事件,我们只需要在这个事件监听这个操作...view,string selectCaption="选择") { if (view == null) return; //设置显示复选框

    1.8K20

    python tkinter之 复选、文本、下拉的实现

    设置其在界面中出现的位置 column代表列 row 代表行 numberChosen.current(4) # 设置下拉列表默认显示的值,0为numberChosen['values'] 的下标值 # 复选框...chVarDis = tk.IntVar() # 用来获取复选框是否被勾选,通过chVarDis.get()来获取其的状态, #其状态值为int类型 勾选为1 未勾选为0 check1 = tk.Checkbutton...(win, text="Disabled", variable=chVarDis, state='disabled') # text为复选框 #后面的名称,variable将该复选框的状态赋值给一个变量...,当state='disabled'时, #该复选框为灰色,不能点的状态 check1.select() # 该复选框是否勾选,select为勾选, deselect为不勾选 check1.grid(column...=0, row=4, sticky=tk.W) # sticky=tk.W 当该中其他行或该行中的其他的 #某一个功能拉长这的宽度或高度时,设定该值可以保证本行保持左对齐, #N:北/上对齐 S:

    3.3K10

    matinal:SAP ABAP ALV复选框设置详解

    首先我们要知道ALV有两种写法,一种是FUCTION(FM),另一种就是OOALV了,所以设置ALV复选框也是有两种方法。 在OOALV时候 直接在layout部分加这行代码就好了。...有办法了,通过CL_GUI_ALV_GRID-> GET_SELECTED_ROWS的方法来获取选中对应的在输出内表中的行ID了,具体就看下面的例子了: DATA : LT_ROW TYPE LVC_T_ROID..."工作区 ALV_GRID1->GET_SELECTED_ROWS IMPORTING ET_ROW_NO = LT_ROW....如果我ALV里选择一行时候,就给这行某字段打X且修改ALV CALL METHOD go_grid->get_selected_rows importing et_row_no =...当然如果要设置为复选框得话,就在fact里加SEL字段 * 复选框 * CLEAR gs_fcat . * gs_fcat-fieldname = 'SEL' . * gs_fcat-scrtext_l

    74330

    EXT基础

    下载EXT2.0 官方下载地址: http://extjs.com/deploy/ext-2.0.2.zip 开发人员必备的中文手册 http://extjs.org.cn/node/125 EXT学习以及资源不错的网站...如果没有这个,会默认从远程extjs.com下载。 ?...复选框 { xtype: 'checkbox', fieldLabel: '请选择', name: 'bad_movie' } ? 下拉框 对于combobox我们也要为它添加配置。...与此同时我们还需要mode配置项,用来说明数据的来源是local source(本地)还是remote source(远程), 还有displayField数据项,用来说明把哪一数据展现在combo的选项中...菜单的所有itmes可以组合起来形成一些可选择的按钮 xtype: 'tbsplit',分割菜单 就是按钮和菜单的结合。在使用它的时候只要在menu配置项目中添加按钮的属性就可以了。

    4.3K40

    【JavaScript数据网格】上海道宁51component为你带来企业JS开发人员首选的数据网格——AG Grid

    AG Grid提供了其他网格无法比拟的功能,例如AG Grid的集成图表解决方案 允许用户在无需任何开发工作的情况下直观地探索数据。AG Grid将所有功能添加到一个网格中。...开发人员欣赏将自定义组件和样式添加到网格中的所有钩子和功能。AG Grid是如此灵活,以至于有些公司和开源项目已经构建了产品来为网格创建新的主题和新的 GUI 功能,而核心网格功能保持不变。...您可以将数据设置为按特定分组,或者允许用户拖放他们选择的并动态分组。07、主/细节使用Master Detail扩展行并在内部有另一个包含不同的网格。...10、设置过滤器Set Filter的工作方式与Excel类似,提供复选框以从集合中选择值。11、工具面板工具面板允许用户操作列表,例如显示和隐藏,或拖动进行分组或旋转。...使一个或多个网格水平对齐,以便一个网格中的任何更改都会影响另一个网格。这允许具有不同数据的两个网格保持水平同步。集成图表图表功能与网格深度集成。

    4.3K40
    领券