ExtJS5 Grid组件扩展

背景：

忙了半年多的ORACLE的EBS还没来得及总结，现在就要开发一些后台系统的数据展示，每次要重新写前端，使后台开发人员精力不够集中，趁现在现在有时间对EXT5的GRID组件进行了扩展，分享给大家，无废话，上代码。

效果图：

使用方法：

1.导入ExtensionGrid.js到页面

2.配置表格相关属性

代码：

1.配置方法：

	Ext.onReady(function(){


	var EasyGrid=new Ext.ux.EasyGrid({
						 title: 'EasyGrid',        
						 headers: [ '字段一', '字段二', '字段三'],//表头显示的字段名
						 fields: [ 'title', 'status', 'description'],//后台传过来的字段名
						 fieldType:['textfield','checkboxfield','filefield'],//每个字段的类型
						 pageSize:2,// 显示行数，不配置默认12
						 findUrl:'TestExt?getData=true',// 加载数据和搜索处理的URL
						 addUrl:'TestExt?addData=true',//添加数据后提交处理的后台URL
						 delUrl:'TestExt?delData=true',//删除数据提交处理的后台URL
						 editUrl:'TestExt?eidtData=true',//编辑数据提交处理的后台URL
						 opt:["add","del","edit"],//操作按钮隐藏，不用显示哪个就写哪个，如果要增、删、改、查，可以忽略
						 renderTo: 'easyGrid'    
	});


	          
});

2.引用的ExtensionGrid.js代码

Ext.ux.EasyGrid = Ext.extend(Ext.grid.GridPanel, {
    initComponent: function () {
        this.autoHeight = true,
        this.stripeRows=true,// 斑马线效果
        this.selType='checkboxmodel',
        this.findKey='',
        this.viewConfig = {
        	enableTextSelection:true,
            forceFit: false
        };
        
        this.createStore();  // 创建Store
        this.createColumns();   // 创建列模型
        this.createTbar();  // 创建GridPanel头部的工具栏
        this.createBbar();   // 创建GridPanel尾部的状态栏
        // 父类的构造函数
        Ext.ux.EasyGrid.superclass.initComponent.call(this);
      
    },


    createStore: function () {
    	var that = this;
        // 二维数组
        // 代理
         var proxy = null;
         var pageSize = 12;
         if(this.pageSize>0){
        	 pageSize = this.pageSize;
         }
      
        if (this.type == "array") {
        	proxy =new Ext.data.MemoryProxy({ 
        		data: this.datas, 
        		reader: { 
        			type: 'json' 
        				},
        		enablePaging: true });
        } else {
        	proxy = new Ext.data.HttpProxy({ 
        		type:'ajax',
        		url: this.findUrl,
        		reader:{
        			type:'json',
        			rootProperty:'rows',
        			totalProperty:'results'
        		} 
        	});
        }
        this.store = new Ext.data.Store({
        	fields:this.fields,
        	pageSize: pageSize, 
            proxy: proxy,
            autoLoad: {
            	start:0,
    			limist:this.pageSize
            }
        });
       
        this.store.on('beforeload',function(store, operation, eOpts ){
        	var extraParams={
        			findKey:that.findKey
        	};
        	Ext.apply(store.proxy.extraParams, extraParams);  
        });
    },
    createColumns: function () {
    	
        var cols = [];
       
        for (var i = 0; i < this.fields.length; i++) {
            var header = this.headers[i];
            var f = this.fields[i];
            cols.push({
                header: header,
                dataIndex:f 
            });    
        }
        this.columns = cols;


    },
    /**
	 * 判断操作按钮是否显示隐藏
	 */
    isvisible:function(param){
    	console.log(param);
    	var opt = this.opt;
    	if(opt!=undefined && opt !=null){
    		
    		for(var i=0;i<opt.length;i++){
    			if(param==opt[i]){
    				return true;	
    			}
    		}
    	}
    	return false;
    },


    createTbar: function () {
    	var that =this;// 需要将表格this转换，否则下面的this会有问题
    	this.tbar = Ext.create('Ext.toolbar.Toolbar', {
    	    items: [
    	        {
    	            // xtype: 'button', // default for Toolbars
    	            text: '添加',
    	           // xtype:'button',
    	            icon: "com/icons/Add1.png",   
    	            id:'add',
    	            hidden:that.isvisible('add'),
    	            listeners:{
    	            	'click': function(){
    	            		that.createRecord();
    	            	}
    	            }
    	        },
    	        {
    	        	text:"修改",
    	        	id:'edit',
    	        	icon: "com/icons/edit1.png",   
    	        	hidden:that.isvisible('edit'),
                    iconCls: "x-tbar-update",
    	            listeners:{
    	            	'click': function(){
    	            		that.updateRecord();
    	            	}
    	            }
    	        },
    	       {
    	        	 text: "删除",
    	        	 icon: "com/icons/Del1.png",   
    	        	 id:'del',
    	                iconCls: "x-tbar-del",
    	                hidden:that.isvisible('del'),
        	            listeners:{
        	            	'click': function(){
        	            		that.removeRecord();
        	            	}
        	            }
    	       },
    	        {
    	            xtype    : 'textfield',
    	            name     : 'searchKey',
    	            enableKeyEvents:true,
    	            triggerCls:'x-form-clear-trigger',
    	            onTriggerClick:function(){
    	            	this.reset();
    	            	that.store.clearFilter();
    	            	// that.store.filter('id');
    	            },
    	            emptyText: '输入搜索关键字',
    	            listeners:{
    	            	'change': function(){
    	            		// 1.判断对本地进行搜索还是远程搜索
    	            		// 2.远程搜索
    	            		// 3.本地搜索
    	            		var _this = this;
    	            		setTimeout(that.keyupProcess(_this),700);
    	            		
    	            	}
    	            }
    	        }
    	    ]
    	});
    	
    },
    
    keyupProcess:function(_this){
    	
			var searchKey = _this.getValue();
    		if(this.searchConf!=null && this.searchConf.local){
    			// 本地过滤
    			this.localFilterStore(searchKey);
    		}else{
    			// 远程过滤
    			this.remoteFilterStore(searchKey);
    		}
    },
    remoteFilterStore:function(searchKey){
    	var findUrl = this.findUrl;
    	this.findKey =searchKey;
    	this.store.reload({
    		params:{
    			start:0,
    			limit:this.pageSize
    		}
    	});
    	/*
		 * Ext.Ajax.request({ url: findUrl, params: { findKey:searchKey },
		 * success: function(response){ var text = response.responseText;
		 * Ext.Msg.alert("提示",text); } });
		 */
    },
    localFilterStore:function(searchKey){
    	var that = this;
    	var v;
    	try{
    		v =new RegExp(searchKey,'i');
    		this.store.clearFilter(true);
    		if( !(that.queryFields!=null && that.queryFields.length>0)){
    			Ext.Msg.alert("提示","配置字段queryFields为空!");
				return ;
			}
    		this.store.filter({
    			filterFn:function(rec){
    			// 要搜索哪些字段
    			var visible=false;
    			for(var i=0;i<that.queryFields.length;i++){
    				console.log(rec.get(that.queryFields[i]));
    				visible = v.test(rec.get(that.queryFields[i]));
    				if(visible){break;}
    			}
    			return visible;
    		}
    		});
    	}catch(e){
    		
    	}
    },


    createBbar: function() {
		this.bbar = new Ext.PagingToolbar({
			store: this.store
		});
	},


    createRecord: function () {
        this.Action = "create"; // 自定义属性，表明是添加操作
        this.showWindows();  // 窗体显示的方法
        var form = this.getForm();  // 得到窗体中的Form
        form.baseParams = {
            create:true
        }  
        // 根据json对象自动找表单内容 本身为空 把窗体还原
        form.reset();
    },


    updateRecord:function(){
        // 行选择模型
        var r = this.getSelectedRecord();
        if (r!=null) {
            this.Action = "update";
            this.showWindows();
            // 得到当前的Form();
            var form = this.getForm();
            form.baseParams = {
                create: false
            };
            // 把对象加载进去
            form.reset();
            form.loadRecord(r[0]);
        } 


    },
    cuxAjax:function(params,callback){
    	Ext.Ajax.request({
    	    url: params.url,
    	    params:params.args,
    	    success:function(response,opts){
    	    	callback(response,opts);
    	    },
    	    failure:function(response,opts){
    	    	Ext.Msg.alert("Failure","请求失败，请联系管理员!");
    	    }
    	});
    },
    storeReload:function(){
    	this.store.reload({
    		 params : {
    		        start : this.store.currentPage-1,
    		        limit : this.pageSize
    		    }
    	});
    },
    removeServerRecord:function(recs){
    	var json = [];
    	for(var i=0;i<recs.length;i++){
    		json.push(recs[i].getData());
    	}
    	var that =this;
    	var params={};
    	params.url = this.delUrl;
    	params.args ={
    		delDate:Ext.encode(json)	
    	}
    	this.cuxAjax(params,function(response,opts){
    		Ext.Msg.alert("提示",response.responseText);
    		that.storeReload();
    	});
    },
    removeRecord: function () {
        var r = this.getSelectedRecord();
        var that =this;
        if (r!=null) {
            this.Action = "delete";
            Ext.Msg.confirm("提示", "您确认要删除选择的记录吗？", function (btn) {
                if (btn == "yes") {
                    try {
                    	// 删除本地的记录
                    	// that.store.remove(r[0]);
                    	// 删除服务器上的记录
                    	that.removeServerRecord(r);
                    } catch (e) {
                    	Ext.Msg.alert("提示","删除异常!");
                    }
                   
                }
            });
        }
        


    },




    getSelectedRecord:function() {
        var sm = this.getSelectionModel();
        if (sm.getCount() == 0) {
            Ext.Msg.alert("提示", "请选择一行");
            return null;
        } else {
            return sm.getSelection();
        }
    },




    // 得到空的函数
    getEmptyRecord: function () {
        // 空的json对象
        var r = "{";
        for (var i = 0; i < this.fields.length; i++) {
            var f = this.fields[i];
            // 给对象产生属性 并赋值 为空
            r+=f+":''";
            if(i!=this.fields.length-1){
            	r+=",";
            }
        }
        r+='}';
        return r;
    },


    submitRecord: function () {
    	var form = this.getForm();
        // 如果为添加
        if (form.baseParams.create) {
           this.addRecord();
        } else {
            this.changeRecord();
        }
        this.hideWindow();
    },
    // 添加记录
    addRecord:function(){
    	 // 得到表单的对象
        var form = this.getForm();
    	 // 得到表单域的值
        var values = form.getValues();
        console.log(values); 
        console.log(Ext.encode(values)); 
        // 提交到服务器
        var that =this;
    	var params={};
    	params.url = this.addUrl;
    	params.args ={
    		addDate:Ext.encode(values)	
    	}
    	this.cuxAjax(params,function(response,opts){
    		Ext.Msg.alert("提示",response.responseText);
    		that.storeReload();
    	});
        
    	 // 得到空的json
        /*
		 * var json = Ext.decode(this.getEmptyRecord()); for (var name in
		 * values) { json[name] = values[name]; }
		 */
       // this.store.add(json);
        // this.store.commitChanges();
    },
    // 修改记录
    changeRecord:function(){
    	 // 得到表单的对象
        var form = this.getForm();
    	 // 得到表单域的值
        var values = form.getValues();
    	// 得到选择的行
       // var r = this.getSelectedRecord();
        
        try {
        	
        	/*
			 * this.store.beginUpdate(); var rec =
			 * this.store.getById(r[0].get("id"));
			 * 
			 * for (var name in values) { rec.set(name, values[name]); }
			 * this.store.endUpdate();
			 */
            // 提交到远端服务器
            this.changeServerRecord(values);
        } catch (e) {
        	Ext.Msg.alert("提示","提交修改异常!");
        	// console.log(e);
        }
    },
    
    changeServerRecord:function(values){
         // 提交到服务器
        var that =this;
     	var params={};
     	params.url = this.editUrl;
     	params.args ={
     		editDate:Ext.encode(values)	
     	}
     	this.cuxAjax(params,function(response,opts){
     		Ext.Msg.alert("提示",response.responseText);
     		that.storeReload();
     	});
    },


    // 得到Panel中的方法
    getForm: function () {
    	
        // 得到当前的表单对象
        return this.getFormPanel();
    },


    getFormPanel: function () {
    	
        if (!this.gridForm) {
            // 不存在创建一个
            this.gridForm = this.createForm();
            // 存在就直接返回
        }
        return this.gridForm;
    },


    // 创建一个窗体的按钮
    createForm:function(){
    	var that =this;
    	
        var items = [];
        for (var i = 0; i < this.headers.length; i++) {
            var header = this.headers[i];
            var f = this.fields[i];
            var type = this.fieldType[i] || 'textfield';
            // 构造json对象
            items.push({
                fieldLabel: header,
                name: f,
                xtype:type
            });
        }


        // 进行保存
        var form = new Ext.form.FormPanel({
            frame: true,
            defaultType: "textfield",
            buttonAlign: "center",
            labelAlign: "right",
            labelWidth: 70,
            items: items,
            buttons: [
            {
                text: "提交",
                handler: function () {
                	
                    // 指向当前的对象
                	that.submitRecord();
                }


            }, {
                text: "重置",
                handler: function () {
                    form.getForm().reset();
                }
            }]
        });
        return form;
    },
    showWindows: function () {
        this.getWindow().show();
    },


    hideWindow:function(){
        this.getWindow().hide();
    },


    getWindow:function(){
        if (!this.gridWindow) {
            this.gridWindow = this.createWindow();
        }
        return this.gridWindow;
    },


    createWindow: function () {
        var formPanel = this.getFormPanel();
        var win = new Ext.Window({
            title: "表单",
            // width: eval("this.subFormConfig." + this.Action + ".width"),
            autoHeight: true,
            closeAction: "hide",
            modal: true,
            items: [formPanel]
        });
        return win;
    }


});