ExtJS5 Grid组件扩展

来源：互联网发布：胡杏儿黄宗泽爱情知乎编辑：程序博客网时间：2024/05/22 17:46

背景：

忙了半年多的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;    }});

0 0