Ext2.0的通用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',                 //删除按钮的名称
            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;