本代码可重用，在工作中我经常使用。
//定义grid的复选框
var sm = new Ext.grid.CheckboxSelectionModel();
//这里可以根据条件设置是否可选，当然不需要可以不用监听此事件
sm.on('beforerowselect',function(SelectionModel, rowIndex, keepExisting,record){
if(condition){
return true;
}else{
return false;
}
});
//定义json列
var jsonFields = [{name:'field1'},{name:'field2'}];
//定义gridColumn
var gridColumn =
[
sm,
{header:'列1',width:148,sortable:false,dataIndex:'field1'},
{header:'列2',width:148,sortable:false,dataIndex:'field2'}
];
/**
*定义动态获取grid方法
*fields 数据列
*column grid列
*title grid标题名
*result 传入的json数据，这个需要自己定义，或从后台返回，可以传入空数据{data:[]}
*root 数据key
*sm CheckboxSelectionModel对象
*form 表单对象，一般的数据操作都会跟表单关联，没有则可为null
*gridHeight 定义grid的高度
**/
var getGridPanel = function(fields,column,title,result,root,sm,form,gridHeight){
var store = new Ext.data.JsonStore({
fields:fields,
data:result,
root:root,
autoLoad:false
});
var cm = new Ext.grid.ColumnModel(column);
var gridPanel = new Ext.grid.GridPanel({
form:form,
header:false,
importData:result,
tbar:[
{
text:'全屏查看',
iconCls:'preview',
id:'screen',
handler:function(){
screenView(grid);
}
},{
text:'删除',
iconCls:'item-delete',
handler:function(){
var records = gridPanel.getSelectionModel().getSelections();
if(0 == records.length){
Ext.MessageBox.show({
title : '提示',
msg : '请选择要删除的数据',
buttons : Ext.MessageBox.OK,
icon : Ext.MessageBox.INFO
});
}else{
Ext.MessageBox.confirm('确认', '是否确定删除选重的信息？', function(btns) {
if (btns == 'yes') {
gridPanel.getStore().remove(records);
//updateUserInfo(form); //我这里是同步更新表单数据
}
});
}
}
},{
text:'审核通过',
iconCls:'setIsTop',
handler:function(){
var records = gridPanel.getSelectionModel().getSelections();
if(0 == records.length){
Ext.MessageBox.show({
title : '提示',
msg : '请选择要操作的数据',
buttons : Ext.MessageBox.OK,
icon : Ext.MessageBox.INFO
});
}else{
Ext.MessageBox.confirm('确认', '是否要接受选中学员的报名申请？', function(btns) {
if (btns == 'yes') {
for(var i=0;i<records.length;i++){
records[i].data['APPLY_STATUS'] = '2'; //设置某一列的状态值
}
updateUserInfo(form); //同步更新表单数据
var data = form.find('name','QP_USER_APPLYS.USER_INFO')[0].getValue();
gridPanel.getStore().loadData(Ext.decode(data)); //重新加载grid的数据
}
});
}
}
},{
text:'审核不通过',
iconCls:'setIsTopDown',
handler:function(){
var records = gridPanel.getSelectionModel().getSelections();
if(0 == records.length){
Ext.MessageBox.show({
title : '提示',
msg : '请选择要操作的数据',
buttons : Ext.MessageBox.OK,
icon : Ext.MessageBox.INFO
});
}else{
Ext.MessageBox.confirm('确认', '是否要取消选中学员的申请？', function(btns) {
if (btns == 'yes') {
for(var i=0;i<records.length;i++){
records[i].data['APPLY_STATUS'] = '3';
}
updateUserInfo(form);
var data = form.find('name','QP_USER_APPLYS.USER_INFO')[0].getValue();
gridPanel.getStore().loadData(Ext.decode(data));
}
});
}
}
}
],
id:'applyInfo',
//autoExpandColumn:'ID_CARD',
title:title,
forceFit:true,
height:gridHeight,
autoScroll:true,
store : store,
collapsible:false,
enableHdMenu : false,
cm : cm,
sm : sm,
stripeRows : false,
frame : false,
region : 'center',
viewConfig:{
//根据某一行的列值设置行的颜色
getRowClass : function(record,rowIndex,rowParams,store){
if(record.data.APPLY_STATUS == '3'){
return "x-grid-record-red";
}
if(record.data.APPLY_STATUS == '2'){
return "x-grid-record-green";
}
}
}
});
return gridPanel;
}
//更新用户数据信息
function updateUserInfo(form){
var result = [];
var st = grid.getStore();
st.each(function(r){
result.push(r.data);
});
var del_data = {"data":result};
//删除数据后更新用户信息数据
form.find('name','QP_USER_APPLYS.USER_INFO')[0].setValue(Ext.encode(del_data).replace(/\\/g,''));
}
//定义动态添加样式函数
var addStyle = function(rules) {
var styleElement = document.createElement('style');
styleElement.type = 'text/css';
if ( Ext.isIE ) { // 判断IE浏览器
styleElement.styleSheet.cssText = rules;
}
else {
var frag = document.createDocumentFragment();
frag.appendChild(document.createTextNode(rules));
styleElement.appendChild(frag);
}
document.getElementsByTagName('head')[0].appendChild(styleElement);
};
//动态添加样式，这里我主要是设置grid列表的行颜色用的
addStyle('.x-grid-record-red table{background: #E6D1E3;}');
addStyle('.x-grid-record-green table{background: #92FCCC;}');
以上是全部的代码，如有不明白的，可以留言我们一起讨论，或是有写的不足的还请大家给出意见。