下面为扩张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(){
//错误信息放在右边
Ext.form.Field.prototype.msgTarget = 'side';
//var formSaveUrl=this.formSaveUrl;
//var formFields=this.formFields;
var formSaveUrl=Ext.clone(this.formSaveUrl);
var formFields=Ext.clone(this.formFields);
//实例化form面板
var form=new Ext.form.FormPanel({//start Ext.form.FormPanel
baseCls:'x-plain',
url:this.formSaveUrl,
frame:true,
id:'form',
items:formFields
});//end Ext.form.FormPanel
return form;
},
/**
* 装form表单的窗口
* @param form 要装载的form
* @param titlePre 标题的前缀
*/
formWindow:function(form,titlePre){
//实例化窗口
this.window=new Ext.Window({//start Ext.Window
title:titlePre+'任务列表',
width:500,
height:500,
minWidth:300,
minHeight:300,
layout:'fit',
//closeAction:'hide',
plain:true,
bodyStyle:'padding:5px',
iconCls:'form',
buttonAlign:'center',
items:form,
modal:true,
buttons:[{ //按钮
text:'保存',
handler:(function(){//start function按钮处理函数
if(form.getForm().isValid()){//表单是否通过交验，通过责提交表单，否则弹出错误窗口
form.getForm().submit({
scope:this,
waitMsg:'保存数据...',
success:function(form,action){
Ext.MessageBox.alert('消息：','保存成功');
this.grid.store.reload();
this.window.close() ;
},
failure:function(form,action){
Ext.MessageBox.alert('有错误:', action.result.errors);
this.window.close() ;
}
});
}else{
Ext.MessageBox.alert('有错误：','表单填写由错误！');
}
}).createDelegate(this)//end function
},{
text:'重置',
handler:function(){//start function按钮处理函数
form.getForm().reset();
}//end function
}]
});//end Ext.Window
//显示窗口
this.window.show();
},
/**
* 添加列表新数据的函数
*/
newInfo:function(){//start newTableInfo
this.formWindow(this.getForm(),'添加');
},//end newTableInfo
/**
* 删除数据，并把此数据的唯一标识码发送到后台
*/
handlerDelete:function(){//start deleteRecord
this.sendId(this.deleteUrl);
},//end deleteRecord
sendId:function(url){//start deleteRecord
var ids=new Array(); //存放uniqueCode的数组
var records=this.grid.selModel.selections.items;//grid中被选择的数据，类型为Array
for(var i = 0, len = records.length; i < len; i++){
ids[ids.length]=records[i].id; //把数据id赋予ids数组中
}
Ext.Ajax.request({ //调用Ajax发送请求到后台
scope:this,
url:url, //删除grid数据的url.
success:function(transport){ //处理成功后返回的函数
var oXmlDom=transport.responseText;
if(oXmlDom!=''){
var content=eval(oXmlDom);
Ext.MessageBox.alert("有错误：",content.errors)
}else{
this.grid.store.reload(); //重新加载grid中的数据
}
},
failure:function(){ //处理后台删除失败的函数
Ext.MessageBox.alert('消息','删除失败!');
}
});
},//end deleteRecord
exportExcel:function(){
document.location.href='http://localhost:8080/chalk/hf/sortManager.do?action=export';
}
}
下面是使用前要再加的 js ,主要是处理一些ext2.0一些效果，不加也可以，不过可能会少些效果
//填充图片的本地应用
Ext.BLANK_IMAGE_URL='../resources/images/default/s.gif';
//在ie中默认的宽度不够
Ext.apply(Ext.MessageBox,{
alert:function(title, msg, fn, scope){
this.show({
title : title,
msg : msg,
buttons: this.OK,
minWidth:200,
fn: fn,
scope : scope
});
return this;
}
});
Ext.menu.RangeMenu.prototype.icons = {
gt: '../resources/extendIamges/greater_then.png',
lt: '../resources/extendIamges/less_then.png',
eq: '../resources/extendIamges/equals.png'
};
Ext.grid.filter.StringFilter.prototype.icon = '../resources/extendIamges/find.png';
/*
* 修改filter发送到后台的数据模式.
* 例:filter.[i][field]、filter.[i][type]、filter.[i][value]、filter.[i][comparison]、
*
*/
Ext.grid.GridFilters.prototype.buildQuery=function(filters){
var p = {};
for(var i=0, len=filters.length; i<len; i++) {
var f = filters[i];
var root = [this.paramPrefix, '[', i, ']'].join('');
p[root + '[field]'] = f.field;
//修改此处
var dataPrefix = root;
for(var key in f.data) {
p[[dataPrefix, '[', key, ']'].join('')] = f.data[key];
}
}
return p;
}
//添加时间交验函数
Ext.apply(Ext.form.VTypes, {
//时间交验属性
daterange: function(val, field) {
var date = field.parseDate(val);
var dispUpd = function(picker) {
var ad = picker.activeDate;
picker.activeDate = null;
picker.update(ad);
};
//debugger;
if (field.startDateField) {
var sd = field.startDateField;
sd.maxValue = date;
if (sd.menu && sd.menu.picker) {
sd.menu.picker.maxDate = date;
dispUpd(sd.menu.picker);
}
} else if (field.endDateField) {
var ed = field.endDateField;
ed.minValue = date;
if (ed.menu && ed.menu.picker) {
ed.menu.picker.minDate = date;
dispUpd(ed.menu.picker);
}
}
return true;
}
});
Ext.QuickTips.init();
此代码中可能会用到之前的radio和checkbox校代码
这里也随便贴出来
/**
* 此js为补充Extjs的chechbox和radio校验
*
* checkbox需要添加属性：
* showInvalidText：Boolean
* 此属性为标识出在那个checkbox后面添加错误图片
* 注意：boxLabel需要两个字符不然图片会合字重叠，可以在字符后加一空格' '
*
* radio需要添加属性：
* showInvalidText：Boolean
* 此属性为标识出在那个radio后面添加错误图片
*/
Ext.apply(Ext.form.Checkbox.prototype, {
getErrorCt:function(){
return this.el.findParent('.x-form-element', 5, true) || // use form element wrap if available
this.el.findParent('.x-form-field-wrap', 5, true); // else direct field wrap
}
});
Ext.apply(Ext.form.Radio.prototype, {
getErrorCt:function(){
return this.el.findParent('.x-form-element', 5, true) || // use form element wrap if available
this.el.findParent('.x-form-field-wrap', 5, true); // else direct field wrap
}
});
function markInvalid(msg){
if (!this.rendered || this.preventMark) { // not rendered
return;
}
this.el.addClass(this.invalidClass);
msg = msg || this.invalidText;
switch (this.msgTarget) {
case 'qtip' :
this.el.dom.qtip = msg;
this.el.dom.qclass = 'x-form-invalid-tip';
if (Ext.QuickTips) { // fix for floating editors interacting with
// DND
Ext.QuickTips.enable();
}
break;
case 'title' :
this.el.dom.title = msg;
break;
case 'under' :
if (!this.errorEl) {
var elp = this.getErrorCt();
this.errorEl = elp.createChild( {
cls : 'x-form-invalid-msg'
});
this.errorEl.setWidth(elp.getWidth(true) - 20);
}
this.errorEl.update(msg);
Ext.form.Field.msgFx[this.msgFx].show(this.errorEl, this);
break;
case 'side' :
if (!this.showInvalidText) {
break;
}
if (!this.errorIcon) {
var elp = this.getErrorCt();
this.errorIcon = elp.createChild( {
cls : 'x-form-invalid-icon'
});
}
this.errorIcon.alignTo(this.el.next(), 'tl-tr', [2, 0]);
this.errorIcon.dom.qtip = msg;
this.errorIcon.dom.qclass = 'x-form-invalid-tip';
this.errorIcon.show();
this.on('resize', this.alignErrorIcon, this);
break;
default :
var t = Ext.getDom(this.msgTarget);
t.innerHTML = msg;
t.style.display = this.msgDisplay;
break;
}
this.fireEvent('invalid', this, msg);
}
function clearInvalid(){
if (!this.rendered || this.preventMark) { // not rendered
return;
}
this.el.removeClass(this.invalidClass);
switch (this.msgTarget) {
case 'qtip' :
this.el.dom.qtip = '';
break;
case 'title' :
this.el.dom.title = '';
break;
case 'under' :
if (this.errorEl) {
Ext.form.Field.msgFx[this.msgFx].hide(this.errorEl, this);
}
break;
case 'side' :
if (this.errorIcon) {
this.errorIcon.dom.qtip = '';
this.errorIcon.hide();
this.un('resize', this.alignErrorIcon, this);
}
break;
default :
var t = Ext.getDom(this.msgTarget);
t.innerHTML = '';
t.style.display = 'none';
break;
}
this.fireEvent('valid', this);
}
function validate(){
var array = this.ownerCt.find('name', this.name);
if (this.validateValue(this.processValue(this.getRawValue()))) {
for(var i=0;i<array.length;i++){
array[i].clearInvalid();
}
return true;
}
return false;
}
function validateValue() {
if (!this.getGroupValue()) {
this.markInvalid();
return false;
}
return true;
}
Ext.form.Checkbox.prototype.markInvalid=Ext.form.Radio.prototype.markInvalid = markInvalid;
Ext.form.Checkbox.prototype.clearInvalid=Ext.form.Radio.prototype.clearInvalid = clearInvalid;
Ext.form.Checkbox.prototype.validate=Ext.form.Radio.prototype.validate = validate;
Ext.form.Checkbox.prototype.validateValue=function(){
var array = this.ownerCt.find('name', this.name);
for(var i=0;i<array.length;i++){
if(array[i].getValue()){
return true;
}
}
this.markInvalid();
return false;
}
Ext.form.Radio.prototype.validateValue = validateValue;
[开发实例]ExtJS Grid的单元格编辑Enter和T
