为了方便对多条数据进行修改,多选,全选功能是不可少的,本文是在我发表的Extjs4---grid添加搜索功能上进行修改的
html代码:
同Extjs4---grid添加搜索功能上的html代码
只需修改引用即可
gridCheck.js代码:
//下面两行代码必须要,不然会报404错误
Ext.Loader.setConfig({enabled:true});
//我的searchGrid和ext4在同一目录下,所以引用时要到根目录去"../"
Ext.Loader.setPath('Ext.ux','../ext4_example/ext4/examples/ux');
//预加载
Ext.require(
[
'Ext.grid.*',
'Ext.toolbar.Paging',
'Ext.util.*',
'Ext.data.*',
//注意引用
'Ext.ux.form.SearchField',
//Checkbox需要引用
'Ext.selection.CheckboxModel'
]
);
Ext.onReady(
function(){
//创建Model
Ext.define(
'User',
{
extend:'Ext.data.Model',
fields:[
{name:'id',mapping:'id'},
{name:'name',mapping:'name'},
{name:'sex',mapping:'sex'},
{name:'age',mapping:'age'}
]
}
)
//创建数据源
var store = Ext.create(
'Ext.data.Store',
{
model:'User',
//设置分页大小
pageSize:5,
proxy: {
type: 'ajax',
url : 'users',
reader: {
//数据格式为json
type: 'json',
root: 'bugs',
//获取数据总数
totalProperty: 'totalCount'
}
},
autoLoad:true
}
);
//创建多选框
var checkBox = Ext.create('Ext.selection.CheckboxModel');
//创建grid
var grid = Ext.create('Ext.grid.Panel',{
store:store,
//添加到grid
selModel:checkBox,
disableSelection: false,//表示可以选择行
columnLines: true,
loadMask: true,
columns:[
{text:'编号',width:40,dataIndex:'id',sortable:true},
{text:'姓名',width:120,dataIndex:'name',sortable:true},
{text:'性别',width:120,dataIndex:'sex',sortable:true},
{text:'年龄',width:120,dataIndex:'age',sortable:true}
],
height:250,
width:480,
x:20,
y:40,
title: 'ExtJS4 Grid分页查询多选示例',
renderTo: 'grid',
dockedItems:[
//多选框控件
{
dock:'top',
xtype:'toolbar',
items:[
{
itemId:'Button',
text:'显示所选',
//tooltip:'Add a new row',
//iconCls:'add',
handler:function(){
var record = grid.getSelectionModel().getSelection();
if(record.length==0){
Ext.MessageBox.show({
title:"提示",
msg:"请先选择您要操作的行!"
//icon: Ext.MessageBox.INFO
})
return;
}else{
var ids = "";
for(var i = 0; i < record.length; i++){
ids += record[i].get("id")
if(i
效果图:
点击“显示所选”