Extjs grid添加多选按钮

我们在用extjs开发gird列表时很多时候我们都会面临向列表添加一个多选的按钮，在extjs中这个功能要实现比较简单，extjs内部已经考虑到这个问题具体我们以下面的代码来解读。

Ext.create('Ext.container.Viewport', {layout: 'border',renderTo: Ext.getBody(),items: [{region: 'center', id: 'plCenter', xtype: 'grid', title: "【文章】" + _json_base.FolderName, header: true, forceFit: false, autoScroll: true,store: Ext.create('Ext.data.Store', {storeId: 'storeid_grid', autoLoad: false,model: 'model_grid',pageSize: 30,proxy: {type: 'ajax',url: 'url',reader: {type: 'json',root: 'items',totalProperty: 'total'},startParam: 'start',limitParam: 'limit'}}),selType: 'checkboxmodel',columns: [{header: '文章标题', dataIndex: 'ItemTitle', width: 300}, {header: '提交时间', dataIndex: 'CreatedDate', width: 120}, {header: '权重', dataIndex: 'OrderNum', width: 80}, {header: '显示方式', dataIndex: 'ViewType', width: 150}],dockedItems: [{xtype: 'toolbar',dock: 'top',items: [{text: '&gt;&gt;刷新&lt;&lt;',handler: function () {location.reload();}}, '关键字:', {xtype: 'textfield', id: 'id_search_kw', width: 88, hideLabel: true, value: ''}, {text: '&gt;&gt;查找',handler: function () {LoadItems();}}, '-', {text: '[新建文章]',handler: function () {AddUpdate(this, '');}}, '-', {text: '[删除选中]',handler: function () {DeleteSelect('删除选中，只有状态为草稿的才会删除');}}, '->', {text: '<b>&lt;&lt;返回&lt;&lt;</b>',handler: function () {location.href = _json_base.path_news;}}]}, {xtype: 'pagingtoolbar', id: 'grid_pagingtoolbar',store: Ext.getStore('storeid_grid'),dock: 'bottom',displayInfo: true}],listeners: {afterrender: function () {LoadItems();}}}, {region: 'south', hidden: true}]});

我们创建了一个viewport里面再创建了一个gridpanel，在panel中我们定义了这么一个属性

selType: ‘checkboxmodel’

定义好后就自动在列表加上了全选属性，通常这个是配套selModel这个属性的

selModel: {injectCheckbox: 0,  //默认在第一列添加复选框checkOnly: true     //只能通过checkbox选择
}

更多的配置属性可以参考extjs的Ext.selection.CheckboxModelView的各项配置
当我们选择了我们想要的行后怎么来获取选中的值呢？具体有两种方式

1、var selectModels = Ext.getCmp(‘plCenter’).selModel.getSelection();
2、var selectModels = Ext.getCmp(‘plCenter’).getSelectionModel().getSelection();

下一步就是获取选中的值

selectModels[i].data[‘ItemTitle’]

就能获得列名为ItemTitle的值了，接下来就能操作了。

Extjs grid添加多选按钮相关推荐

关于QTableWidget表头添加全选按钮
关于QTableWidget表头添加全选按钮实现效果全不选全选解决方案思路点击表头触发sectionClicked连接槽函数再将表头Icon设置成对应的图片即可信号与槽 connect(u ...
html5复选框控制按钮状态,HTML5如何添加原生radio按钮和checkbox复选框转换为非常好看的滑动开关按钮的插件...
本篇教程探讨了HTML5如何添加原生radio按钮和checkbox复选框转换为非常好看的滑动开关按钮的插件,希望阅读本篇文章以后大家有所收获,帮助大家HTML5+CSS3从入门到精通 . < ...
extjs Grid（一）
我们在很多网站都能看到表格的影子,而ExtJS Grid在页面表现上又非常强大,下面我们就创建我们的第一个表格. 在ExtJS中我们是通过Ext.grid.ColumnModel这个类来描述列属性的. ...
[转]ExtJS Grid 分页时保持选中的简单实现方法
原文地址 :http://www.qeefee.com/article/ext-grid-keep-paging-selection ExtJS中经常要用到分页和选择,但是当选择遇到分页的时候,杯具就 ...
微信小程序自定义单选复选按钮组的实现(用于实现购物车产品列表功能)
(一)单选按钮组模型图如下: index.js Page({data: {parameter: [{ id: 1, name: '银色' }, { id: 2, name: '白色' },{ id: ...
python图形编程复选按钮和单选按钮详细说明_Python_tkinter_单选框（Radiobutton）与复选框（Checkbutton）...
单选框(Radiobutton)与复选框(Checkbutton) thinter.Radiobutton(用于存放的父组件,属性参数...) thinter.Checkbutton(用于存放的父组件 ...
MFC 基础知识：对话框背景添加图片和按钮Button添加图片
很长时间没有接触MFC相关的知识了,我大概是在大二时候学习的MFC相关知识及图像处理,现在由于要帮个朋友完成个基于C++的程序,所以又回顾了下相关知识.的确,任何知识一段时间过后都比较容易忘记,但回顾 ...
ExtJs Grid分页时序号自增的实现,以及查询以后的序号的处理
ExtJs Grid分页时,默认情况下每页的序号都是从1起始的,这往往不符合我们的习惯.这里实现了序号的自动增加. 如:每页20条第一页从1开始,第二页从21条开始. 先定义一个全局变量如record ...
java学习（76）：GUL单选按钮和复选按钮
//单选按钮和复选按钮 //面向对象思想,面板,窗口的基础之上再加窗口 import java.awt.*; import javax.swing.*; public class test11 ext ...

Extjs grid添加多选按钮

Extjs grid添加多选按钮

Extjs grid添加多选按钮相关推荐

最新文章

热门文章