下面为扩张grid的 代码
/**
* @auther huangfeng
* @class Ext.ux.GridExtend
* 通用的grid
*/
Ext.ux.GridExtend=function(config){
Ext.QuickTips.init();
this.config=config;
this.filters=this.config.filters||'';
/**
* @param {String}
* 显示列表的id
*/
this.el=this.config.el||document.body;
/**
* @param {String}
* 读取编辑数据的form的url
*/
this.editUrl=this.config.editUrl;
/**
* @param {String}
* 读取编辑数据的form的url
*/
this.deleteUrl=this.config.deleteUrl;
/**
* @param {String}
* 读取列表数据的url
*/
this.storeUrl=this.config.storeUrl;
/**
* @param {String}
* 保存添加到列表数据的url
*/
this.formSaveUrl=this.config.formSaveUrl;
/**
* @param {String}
* 列表的标题
*/
this.title=this.config.title||'';
/**
* @param {Array}
* 列表顶部状态栏
*/
this.tbar=this.config.tbar||[{//grid顶部栏位
text:'添加', //按钮的名称
tooltip:'添加数据', //鼠标停留在按钮上的提示
iconCls:'add', //按钮图表的类
handler:this.newInfo.createDelegate(this) //处理按钮被点击时触发的时间函数
},'-',{//'-'为多按钮间隔符
text:'删除', //删除按钮的名称
tooltip:'删除数据', //鼠标停留在按钮上的提示
iconCls:'remove', //按钮图表的类
handler:this.handlerDelete.createDelegate(this) //处理按钮被点击时触发的时间函数
},'-',{
text:'导出Excel', //删除按钮的名称
tooltip:'导出Excel', //鼠标停留在按钮上的提示
iconCls:'exportExcel',
handler:this.exportExcel.createDelegate(this) //处理按钮被点击时触发的时间函数
}];
/**
* @param 选择框对象
*/
this.sm=this.config.sm||new Ext.grid.CheckboxSelectionModel({//start Ext.grid.CheckboxSelectionModel
singleSelect:false //是否只能选择一个
});
/**
* @param {Array}
* 列表的栏的前面数据
*/
this.cmDataArrayBefore=[//start Ext.grid.ColumnModel
//defaultSortable:true, //默认情况下为排序
new Ext.grid.RowNumberer(), //数据函数序列号
this.sm
];
/**
* @param {Array}
* 显示的内容是从后台读取出来的数据,所以此数据中的dataIndex属性要与<br>
* 从后台读取的字段要一致
*/
this.cmDataArray=this.config.cmDataArray||[];
/**
* @param {Array}
* 列表的栏的后面数据
*/
this.cmDataArrayAfter=this.config.cmDataArrayAfter||[];
/**
* @param {Ext.grid.ColumnModel}
* 列表的栏位数据
*/
this.cm=this.config.cm||new Ext.grid.ColumnModel(
this.cmDataArrayBefore.concat(this.cmDataArray).concat(this.cmDataArrayAfter)
);//end Ext.grid.ColumnModel
/**
* @param {Array}
* 读取gridStore数据的字段设置数据对象
*/
this.gridStoreFields=this.config.gridStoreFields||new Array();
/*
* 如果this.gridStoreFields中没有数据,把this.cmDataArray中的dataIndex的属性值<br>
* 赋予gridStoreFields数组中对象的name属性值
*/
if(this.gridStoreFields.length==0){
for(var i=0,len=this.cmDataArray.length;i<len;i++){
this.gridStoreFields[i]={name:this.cmDataArray[i].dataIndex};
}
}
/**
* @param {new Ext.data.Store}
* 从后台读取的列表内容
*/
this.gridStore=this.config.gridStore||new Ext.data.Store({//start Ext.data.Store
proxy:new Ext.data.HttpProxy({
url:this.storeUrl //读取数据的url
}),
reader:new Ext.data.JsonReader({//start Ext.data.JsonReader
root:'rows', //存储数据的属性
totalProperty:'results', //总共的页数
id:'uniqueCode' //每行的id值
}, //end Ext.data.JsonReader
this.gridStoreFields)
});//end Ext.data.Store
this.gridStore.load({params:{start: 0, limit: 10}});
/**
* @param {Ext.PagingToolbar}
* 底部状态栏
*/
this.bbar=this.config.bbar||new Ext.PagingToolbar({ //在grid底层添加分页工具栏
pageSize:10, //显示的数据条数
store:this.gridStore, //选择翻页按钮时的加载到grid的数据
displayInfo:true, //设置是否显示分页栏的信息
displayMsg:'显示第 {0} 条到 {1} 条记录,一共 {2} 条',//消息栏的页数信息
emptyMsg:"没有记录" //当没有记录时要显示的信息
});//end bbar
/**
* 如果要设置此参数必须在cm中设置相应的id
*/
this.autoExpandColumn=this.config.autoExpandColumn||'';
/**
* @param {Object}
* 默认情况下有此显现,如果不需要可以为false
* 必须含有下列参数:<br>
* loadingEL {String} 加载页面时显示的内容id<br>
* loadingMaskEl {String} 渐显的内容id<br>
*/
this.loadingMark=this.config.loadingMark||{
loadingEL:'loading',
loadingMaskEL:'loading-mask'
};
/**
* @param {Ext.grid.GridPanel}
* @private
*/
this.grid=this.config.gridStore||new Ext.grid.GridPanel({
//el:this.el, //显示grid对象的层ID.
store:this.gridStore, // grid装载的数据.
viewConfig:{
autoFill:true,
deferEmptyText:'请等待...',
emptyText:'没有数据',
enableRowBody:true
},
sm:this.sm, //在每行数据前添加的一组checkBox
height:Ext.get(this.el).getComputedHeight(),
//autoHeight:true,
loadMask:true,
maskDisabled:true,
cm:this.cm, //设置栏位.
title:this.title, //标题名称.
iconCls:'icon-grid', //标题前的图片css类
autoExpandColumn:this.autoExpandColumn,
plugins: this.filters,
bbar:this.bbar,
tbar:this.tbar
});
this.formFields=this.config.formFields||new Array();
/**
* 双击数据的事件,弹出一个编辑此条数据的层
* @param grid 此列表的对象
* @param rowIndex 在列表中的行数
* @param e 触发此事件的事件对象
*/
this.rowdblclick=this.config.rowdblclick||function(grid, rowIndex, e){
var selectId=this.gridStore.data.items[rowIndex].id;
this.editInfo(selectId);
};
this.grid.on('rowdblclick',this.rowdblclick.createDelegate(this));
this.grid.render(this.el);
//当js加载完毕后删除loading页面并渐显内容
if(this.loadingMark){
setTimeout(function(){
Ext.get(this.loadingMark.loadingEL).remove();
Ext.get(this.loadingMark.loadingMaskEL).fadeOut({remove:true});
}.createDelegate(this), 250);
}
}
Ext.ux.GridExtend.prototype={
/**
* 加载 form表单的数据
* @param selectId 选择此条数据的唯一标识码,此参数发送到后台处理
*/
editInfo:function(selectId){
var form=this.getForm();
form.form.load({//start load 参数设置
url:this.editUrl,
params:{
uniqueCode:selectId
},
waitMsg:'Loading..'
});//end load 参数设置
this.formWindow(form,'编辑');
},
getForm:function(){
//�