extjs4 grid 跨页选择

Ext.onReady(function() {Ext.define('User', {extend : 'Ext.data.Model',fields : [{name : 'userId',type : 'int',useNull : true// 这样数字如果值为空则不会自动转成0,则提交时注意后台bean类中的属性int要用对象类型，否则解析出错}, {name : 'loginName',type : 'string'}, {name : 'password',type : 'string'}, {name : 'remark',type : 'string'}, {name : 'roleId',type : 'float',useNull : true}, {name : 'rightId',type : 'float',useNull : true}, {name : 'platformNo',type : 'string'}, {name : 'groupId',type : 'float',useNull : true}, {name : 'net',type : 'string'}, {name : 'email',type : 'string'}, {name : 'linkman',type : 'string'}, {name : 'tel',type : 'string'}, {name : 'fax',type : 'string'}, {name : 'address',type : 'string'}],idProperty : 'userId'// 极为重要的配置。关系到表格修改数据的获取});var store = new Ext.data.Store({model : 'User',pageSize : 3,proxy : {type : 'ajax',url : 'baseUsers.action',reader : {type : 'json',root : 'pageBean.list',totalProperty : 'pageBean.total'}},autoLoad : true,listeners : {'load' : function(store) {var arry = [];var sss = recordIds;store.each(function(record) {// alert(record.data.userId);if (recordIds.contains(record.data.userId))arry.push(record);checkboxModel.select(arry, true);});checkboxModel.addListener('deselect', deselect);},'beforeload' : function() {checkboxModel.removeListener('deselect', deselect);}}});var cellEditing = Ext.create('Ext.grid.plugin.CellEditing', {clicksToEdit : 2});//记录勾选的记录idvar recordIds = new Ext.util.MixedCollection();//声明行选择器及勾选事件var checkboxModel = Ext.create('Ext.selection.CheckboxModel', {listeners : {'select' : select,'deselect' : deselect}});function deselect(me, record) {var sss = recordIds;if (recordIds.contains(record.get('userId'))) {recordIds.remove(record.get('userId'));}}function select(me, record) {var sss = recordIds;if (!recordIds.contains(record.get('userId'))) {recordIds.add(record.get('userId'));}}var grid = Ext.create('Ext.grid.Panel', {tbar : [{xtype : 'button',text : '新增',handler : add}, {xtype : 'button',text : '提交修改',handler : alter}, {xtype : 'button',text : '删除',handler : otherDelete}],title : 'All Products',store : store,columnLines : true,selModel : checkboxModel,columns : [{header : 'userId',dataIndex : 'userId',hidden : true}, {header : 'loginName',dataIndex : 'loginName',editor : {allowBlank : false}}, {header : 'password',dataIndex : 'password',editor : {allowBlank : false}}, {header : 'remark',dataIndex : 'remark',editor : {allowBlank : false}}, {header : 'roleId',dataIndex : 'roleId',editor : {allowBlank : false}}, {header : 'rightId',dataIndex : 'rightId',editor : {allowBlank : false}}, {header : 'platformNo',dataIndex : 'platformNo',editor : {allowBlank : false}}, {header : 'groupId',dataIndex : 'groupId',editor : {allowBlank : false}}, {header : 'net',dataIndex : 'net',editor : {allowBlank : false}}, {header : 'email',dataIndex : 'email',editor : {allowBlank : false}}, {header : 'linkman',dataIndex : 'linkman',editor : {allowBlank : false}}, {header : 'tel',dataIndex : 'tel',editor : {allowBlank : false}}, {header : 'fax',dataIndex : 'fax',editor : {allowBlank : false}}, {header : 'address',dataIndex : 'address',editor : {allowBlank : false}}],forceFit : true,dockedItems : [{xtype : 'pagingtoolbar',store : store, // same store GridPanel is// usingdock : 'bottom',displayInfo : true}],renderTo : 'userMngDiv',plugins : [cellEditing]// autoRender:true});//修改全选事件grid.headerCt.on('headerclick', function(headerCt, column, e, t) {var sss = recordIds;// alert(recordIds);var checkHd = headerCt.child('gridcolumn[isCheckerHd]');var isChecked = checkHd.el.hasCls(Ext.baseCSSPrefix+ 'grid-hd-checker-on');if (checkHd) {if (isChecked) {// 全选var store = grid.getStore();store.data.each(function(item) {if (!recordIds.contains(item.data.userId)) {recordIds.add(item.data.userId);}});} else {// 全不选var store = grid.getStore();store.data.each(function(item) {if (recordIds.contains(item.data.userId)) {recordIds.remove(item.data.userId);}});}}});// store.loadPage(1);// var p = parent.Ext.getCmp('contentTabs');// alert(p);function alter() {var records = store.getUpdatedRecords();// 获取修改的行的数据，无法获取幻影数据var phantoms = store.getNewRecords();// 获得幻影行records = records.concat(phantoms);// 将幻影数据与真实数据合并if (records.length == 0) {Ext.MessageBox.show({title : "提示",msg : "没有任何数据被修改过!"// icon: Ext.MessageBox.INFO});return;} else {Ext.Msg.confirm("请确认", "是否真的要修改数据？", function(button, text) {if (button == "yes") {var data = [];// alert(records);Ext.Array.each(records, function(record) {data.push(record.data);// record.commit();// 向store提交修改数据，页面效果});Ext.Ajax.request({url : 'alterUsers.action',params : {alterUsers : Ext.encode(data)},method : 'POST',timeout : 2000,success : function(response, opts) {var success = Ext.decode(response.responseText).success;// 当后台数据同步成功时if (success) {Ext.Array.each(records, function(record) {// data.push(record.data);record.commit();// 向store提交修改数据，页面效果});} else {Ext.MessageBox.show({title : "提示",msg : "数据修改失败!"// icon: Ext.MessageBox.INFO});}}});}});}}// 传递对象删除// function deleteUsers() {// var data = grid.getSelectionModel().getSelection();// // alert(data);// if (data.length == 0) {// Ext.MessageBox.show({// title : "提示",// msg : "请先选择您要操作的行!"// // icon: Ext.MessageBox.INFO// });// return;// } else {// Ext.Msg.confirm("请确认", "是否真的要删除数据？", function(button, text) {// if (button == "yes") {// var ids = [];// Ext.Array.each(data, function(record) {// ids.push(record.data);// });// Ext.Ajax.request({// url : 'deleteUsers.action',// params : {// deleteUsers : Ext.encode(ids)// },// method : 'POST',// // timeout : 2000,//默认30秒// success : function(response, opts) {// var success = Ext.decode(response.responseText).success;// // 当后台数据同步成功时// if (success) {// Ext.Array.each(data, function(record) {// store.remove(record);// 页面效果// });// } else {// Ext.MessageBox.show({// title : "提示",// msg : "数据删除失败!"// // icon: Ext.MessageBox.INFO// });// }//// }// });// }// });//// }// }// 编码ID删除function otherDelete() {var data = grid.getSelectionModel().getSelection();//var data=recordIds;// alert(data);if (data.length == 0) {Ext.MessageBox.show({title : "提示",msg : "请先选择您要操作的行!"// icon: Ext.MessageBox.INFO});return;} else {Ext.Msg.confirm("请确认", "是否真的要删除数据？", function(button, text) {if (button == "yes") {var ids = [];Ext.Array.each(data, function(record) {var userId = record.get('userId');// 如果删除的是幻影数据，则id就不传递到后台了，直接在前台删除即可if (userId) {ids.push(userId);}});Ext.Ajax.request({url : 'deleteUsers.action',params : {deleteIds : ids.join(',')},method : 'POST',// timeout : 2000,//默认30秒success : function(response, opts) {// store.loadPage(1);var success = Ext.decode(response.responseText).success;// 当后台数据同步成功时if (success) {Ext.Array.each(data, function(record) {store.remove(record);// 页面效果});} else {Ext.MessageBox.show({title : "提示",msg : "数据删除失败!"// icon: Ext.MessageBox.INFO});}}});}});}}function add() {store.insert(0, new User());}});

跨页多选全选单选都可以。但是对于修改操作会有bug，推荐此功能仅仅用于删除。