Extjs4---Checkbox,多选，全选

来源：互联网发布：淘宝名牌同款是否违规编辑：程序博客网时间：2024/05/16 12:09
为了方便对多条数据进行修改，多选，全选功能是不可少的，本文是在我发表的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(){//创建ModelExt.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'); //创建gridvar grid = Ext.create('Ext.grid.Panel',{store:store,//添加到gridselModel: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<record.length-1){                                                 ids = ids + ",";                                             }                                         }                Ext.MessageBox.show({                                             title:"所选ID列表",                                             msg:ids                 }                )                            }                            }                            }                     ]                     },                                                               //添加搜索控件                     {                     dock: 'top',                                  xtype: 'toolbar',                                  items: {                                      width: 200,                                      fieldLabel: '搜索姓名',                                      labelWidth: 70,                                      xtype: 'searchfield',                                      store: store                      }                     },{                                  dock: 'bottom',                                  xtype: 'pagingtoolbar',                                  store: store,                                  displayInfo: true,                                  displayMsg: '显示 {0} - {1} 条，共计 {2} 条',                                  emptyMsg: '没有数据'                     }        ],})store.loadPage(1); })
Servlet,java后台代码也和Extjs4---grid添加搜索功能相同
效果图：
点击“显示所选”