Ext2.2的grid简单功能（增、删、改、查、导出excel）

扩展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',//导出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属性要与
* 从后台读取的字段要一致
*/
  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的属性值
* 赋予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
* 必须含有下列参数:
* loadingEL {String} 加载页面时显示的内容id
* loadingMaskEl {String} 渐显的内容id 
*/ 
 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=url;
  //'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;