Ext.js中自己扩展的EasyGrid

Ext.ux.EasyGrid = Ext.extend(Ext.grid.GridPanel, {
    initComponent: function () {
        this.autoHeight = true,
        this.viewConfig = {
            forceFit: true
        };
        this.createStore();  //创建Store
        this.createColumns;   //创建列模型
        this.createTbar();  //创建GridPanel头部的工具栏
        this.createBbar();   //创建GridPanel尾部的状态栏


        //父类的构造函数
   
        Ext.ux.EasyGrid.superclass.initComponent.call(this);
      
    },

    createStore: function () {
        //二维数组
        //代理
        var proxy = new Ext.data.HttpProxy({ url: this.url });
        var reader = null;
        if (this.type == "array") {
            reader = new Ext.data.ArrayReader({ fields: this.fields });
        } else {
            reader = new Ext.data.JsonReader({ root: "rows" },this.fields);
        }
        this.store = new Ext.data.Store({
            proxy: proxy,
            reader: reader,
            autoLoad: true
        });
    },

    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.colums = cols;

    },

    createTbar: function () {
        //配置项为数组  添加  删除修改
        this.tbar = new Ext.Toolbar([
            {
                text: "添加",
                iconCls: "x-tbar-add",
                //指向当前的方法 ux.EasyGrid  指向不同的方法 careteRecord  updateRecord  removeRecord
                heandler: this.createRecord.createDelegate(this)

            }, {
                text:"修改",
                iconCls: "x-tbar-update",
                heandler:this.updateRecord.createDelegate(this)
            }, {
                text: "删除",
                iconCls: "x-tbar-del",
                heandler:this.removeRecord.createDelegate(this)

            }
        ]);
    },



    createTbar: 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对象自动找表单内容  本身为空  把窗体还原
        from.setValues(this.getEmptyRecord())
    },

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

    },

    removeRecord: function () {
        var r = this.getSelectedRecord();
        if (r) {
            this.Action = "delete";
            Ext.Msg.confirm("OA智能办公系统", "您确认要删除此条记录吗？", function (btn) {
                if (btn == "yes") {
                    try {
                        this.getStore().remove(r);
                        if (this.fnDelete) {
                            this.fnDelete(this.store, r);
                        }
                    } catch (e) {

                    }
                   
                }
            });
        }
        

    },


    getSelectedRecord:function() {
        var sm = this.getSelectionModel();
        if (sm.getCount() == 0) {
            Ext.Msg.alert("OA办公系统", "请选择一行");
            return false;
        } else {
            return this.getSelections()[0];
        }
    },


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

    submitRecord: function () {
        //得到表单的对象
        var form = this.getForm();
        //得到表单域的值
        var values = form.getFieldValues();
        //如果为添加
        if (form.baseParams.create) {
            //得到空的json
            var json = this.getEmptyRecord();
            for (var name in values) {
                json[name] = values[name];
            }
            var rec = new this.store.recordType(json);

            //回调函数
            try {
                this.store.add(rec);
                if (this.fnCreate)
                {
                    this.fnCreate(this.store, rec);
                }
            } catch (e) {

            }

           
        } else {
            //得到选择的行
            var r = this.getSelectedRecord();

            try {
                r.beginEdit();
                for (var name in values) {
                    r.set(name, values[name]);
                }
                r.endEdit();
                r.commit();
                if (this.fnUpdate) {
                    this.fnUpdate(this.store, r);
                }
            } catch (e) {

            }
           
        }
        this.hideWindow();
    },

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

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

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

        //进行保存
        var form = new Ext.form.FormPanel({
            frame: true,
            defaultType: "textfield",
            buttonAlign: "center",
            labelAlign: "right",
            labelWidth: 70,

            items: items,
            buttons: [
            {
                text: "提交",
                hendler: function () {
                    //指向当前的对象
                    this.submitRecord.createDelegate(this);
                }

            }, {
                text: "重置",
                hendler: 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: "OA办公系统",
            width: eval("this.subFormConfig." + this.Action + ".width"),
            autoHeight: true,
            closeAction: "hide",
            modal: true,
            items: [formPanel]
        });
        return win;
    }

});

this.updatExt.ux.EasyGrid = Ext.extend(Ext.grid.GridPanel, {     initComponent: function () {         this.autoHeight = true,         this.viewConfig = {             forceFit: true         };         this.createStore();  //创建Store         this.createColumns;   //创建列模型         this.createTbar();  //创建GridPanel头部的工具栏         this.createBbar();   //创建GridPanel尾部的状态栏         //父类的构造函数             Ext.ux.EasyGrid.superclass.initComponent.call(this);            },     createStore: function () {         //二维数组         //代理         var proxy = new Ext.data.HttpProxy({ url: this.url });         var reader = null;         if (this.type == "array") {             reader = new Ext.data.ArrayReader({ fields: this.fields });         } else {             reader = new Ext.data.JsonReader({ root: "rows" },this.fields);         }         this.store = new Ext.data.Store({             proxy: proxy,             reader: reader,             autoLoad: true         });     },     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.colums = cols;     },     createTbar: function () {         //配置项为数组  添加  删除修改         this.tbar = new Ext.Toolbar([             {                 text: "添加",                 iconCls: "x-tbar-add",                 //指向当前的方法 ux.EasyGrid  指向不同的方法 careteRecord  updateRecord  removeRecord                 heandler: this.createRecord.createDelegate(this)             }, {                 text:"修改",                 iconCls: "x-tbar-update",                 heandler:this.updateRecord.createDelegate(this)             }, {                 text: "删除",                 iconCls: "x-tbar-del",                 heandler:this.removeRecord.createDelegate(this)             }         ]);     },     createTbar: 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对象自动找表单内容  本身为空  把窗体还原         from.setValues(this.getEmptyRecord())     },     updateRecord:function(){         //行选择模型         var r = this.getSelectedRecord();         if (!r) {             this.Action = "update";             this.showWindows();             //得到当前的Form();             var form = this.getForm();             form.baseParams = {                 create: false             };             //把对象加载进去             form.loadRecord(r);         }      },     removeRecord: function () {         var r = this.getSelectedRecord();         if (r) {             this.Action = "delete";             Ext.Msg.confirm("OA智能办公系统", "您确认要删除此条记录吗？", function (btn) {                 if (btn == "yes") {                     try {                         this.getStore().remove(r);                         if (this.fnDelete) {                             this.fnDelete(this.store, r);                         }                     } catch (e) {                     }                                     }             });         }              },     getSelectedRecord:function() {         var sm = this.getSelectionModel();         if (sm.getCount() == 0) {             Ext.Msg.alert("OA办公系统", "请选择一行");             return false;         } else {             return this.getSelections()[0];         }     },     //得到空的函数     getEmptyRecord: function () {         //空的json对象         var r = {};         for (var i = 0; i < this.fields.length; i++) {             var f = this.fields[i];             //给对象产生属性  并赋值 为空             r[f] = "";         }         return r;     },     submitRecord: function () {         //得到表单的对象         var form = this.getForm();         //得到表单域的值         var values = form.getFieldValues();         //如果为添加         if (form.baseParams.create) {             //得到空的json             var json = this.getEmptyRecord();             for (var name in values) {                 json[name] = values[name];             }             var rec = new this.store.recordType(json);             //回调函数             try {                 this.store.add(rec);                 if (this.fnCreate)                 {                     this.fnCreate(this.store, rec);                 }             } catch (e) {             }                     } else {             //得到选择的行             var r = this.getSelectedRecord();             try {                 r.beginEdit();                 for (var name in values) {                     r.set(name, values[name]);                 }                 r.endEdit();                 r.commit();                 if (this.fnUpdate) {                     this.fnUpdate(this.store, r);                 }             } catch (e) {             }                     }         this.hideWindow();     },     //得到Panel中的方法     getForm: function () {         //得到当前的表单对象         return this.getFormPanel().getForm();     },     getFormPanel: function () {         if (!this.gridForm) {             //不存在创建一个             this.gridForm = this.createForm();             //存在就直接返回             return this.gridForm;         }     },     //创建一个窗体的按钮     createForm:function(){         var items = [];         for (var i = 0; i < this.headers.length; i++) {             var header = this.headers[i];             var f = this.fields[i];             //构造json对象             item.push({                 fieldLabel: header,                 name: f             });         }         //进行保存         var form = new Ext.form.FormPanel({             frame: true,             defaultType: "textfield",             buttonAlign: "center",             labelAlign: "right",             labelWidth: 70,             items: items,             buttons: [             {                 text: "提交",                 hendler: function () {                     //指向当前的对象                     this.submitRecord.createDelegate(this);                 }             }, {                 text: "重置",                 hendler: 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: "OA办公系统",             width: eval("this.subFormConfig." + this.Action + ".width"),             autoHeight: true,             closeAction: "hide",             modal: true,             items: [formPanel]         });         return win;     } });ecord.createDelegate(this)
            }, {
                text: "删除",
                iconCls: "x-tbar-del",
                heandler:this.removeRecord.createDelegate(this)
 
            }
        ]);
    },
 
 
 
    createTbar: 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对象自动找表单内容  本身为空  把窗体还原
        from.setValues(this.getEmptyRecord())
    },
 
    updateRecord:function(){
        //行选择模型
        var r = this.getSelectedRecord();
        if (!r) {
            this.Action = "update";
            this.showWindows();
            //得到当前的Form();
            var form = this.getForm();
            form.baseParams = {
                create: false
            };
            //把对象加载进去
            form.loadRecord(r);
        } 
 
    },
 
    removeRecord: function () {
        var r = this.getSelectedRecord();
        if (r) {
            this.Action = "delete";
            Ext.Msg.confirm("OA智能办公系统", "您确认要删除此条记录吗？", function (btn) {
                if (btn == "yes") {
                    try {
                        this.getStore().remove(r);
                        if (this.fnDelete) {
                            this.fnDelete(this.store, r);
                        }
                    } catch (e) {
 
                    }
                   
                }
            });
        }
        
 
    },
 
 
    getSelectedRecord:function() {
        var sm = this.getSelectionModel();
        if (sm.getCount() == 0) {
            Ext.Msg.alert("OA办公系统", "请选择一行");
            return false;
        } else {
            return this.getSelections()[0];
        }
    },
 
 
    //得到空的函数
    getEmptyRecord: function () {
        //空的json对象
        var r = {};
        for (var i = 0; i < this.fields.length; i++) {
            var f = this.fields[i];
            //给对象产生属性  并赋值 为空
            r[f] = "";
        }
        return r;
    },
 
    submitRecord: function () {
        //得到表单的对象
        var form = this.getForm();
        //得到表单域的值
        var values = form.getFieldValues();
        //如果为添加
        if (form.baseParams.create) {
            //得到空的json
            var json = this.getEmptyRecord();
            for (var name in values) {
                json[name] = values[name];
            }
            var rec = new this.store.recordType(json);
 
            //回调函数
            try {
                this.store.add(rec);
                if (this.fnCreate)
                {
                    this.fnCreate(this.store, rec);
                }
            } catch (e) {
 
            }
 
           
        } else {
            //得到选择的行
            var r = this.getSelectedRecord();
 
            try {
                r.beginEdit();
                for (var name in values) {
                    r.set(name, values[name]);
                }
                r.endEdit();
                r.commit();
                if (this.fnUpdate) {
                    this.fnUpdate(this.store, r);
                }
            } catch (e) {
 
            }
           
        }
        this.hideWindow();
    },
 
    //得到Panel中的方法
    getForm: function () {
        //得到当前的表单对象
        return this.getFormPanel().getForm();
    },
 
    getFormPanel: function () {
        if (!this.gridForm) {
            //不存在创建一个
            this.gridForm = this.createForm();
            //存在就直接返回
            return this.gridForm;
        }
    },
 
    //创建一个窗体的按钮
    createForm:function(){
        var items = [];
        for (var i = 0; i < this.headers.length; i++) {
            var header = this.headers[i];
            var f = this.fields[i];
            //构造json对象
            item.push({
                fieldLabel: header,
                name: f
            });
        }
 
        //进行保存
        var form = new Ext.form.FormPanel({
            frame: true,
            defaultType: "textfield",
            buttonAlign: "center",
            labelAlign: "right",
            labelWidth: 70,
 
            items: items,
            buttons: [
            {
                text: "提交",
                hendler: function () {
                    //指向当前的对象
                    this.submitRecord.createDelegate(this);
                }
 
            }, {
                text: "重置",
                hendler: 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: "OA办公系统",
            width: eval("this.subFormConfig." + this.Action + ".width"),
            autoHeight: true,
            closeAction: "hide",
            modal: true,
            items: [formPanel]
        });
        return win;
    }
 
});

var i = 0; i < this.fields.length; i++) { var f = this.fields[i]; //给对象产生属性 并赋值 为空 r[f] = ""; } return r; }, submitRecord: function () { //得到表单的对象 var form = this.getForm(); //得到表单域的值 var values = form.getFieldValues(); //如果为添加 if (form.baseParams.create) { //得到空的json var json = this.getEmptyRecord(); for (var name in values) { json[name] = values[name]; } var rec = new this.store.recordType(json); //回调函数 try { this.store.add(rec); if (this.fnCreate) { this.fnCreate(this.store, rec); } } catch (e) { } } else { //得到选择的行 var r = this.getSelectedRecord(); try { r.beginEdit(); for (var name in values) { r.set(name, values[name]); } r.endEdit(); r.commit(); if (this.fnUpdate) { this.fnUpdate(this.store, r); } } catch (e) { } } this.hideWindow(); }, //得到Panel中的方法 getForm: function () { //得到当前的表单对象 return this.getFormPanel().getForm(); }, getFormPanel: function () { if (!this.gridForm) { //不存在创建一个 this.gridForm = this.createForm(); //存在就直接返回 return this.gridForm; } }, //创建一个窗体的按钮 createForm:function(){ var items = []; for (var i = 0; i < this.headers.length; i++) { var header = this.headers[i]; var f = this.fields[i]; //构造json对象 item.push({ fieldLabel: header, name: f }); } //进行保存 var form = new Ext.form.FormPanel({ frame: true, defaultType: "textfield", buttonAlign: "center", labelAlign: "right", labelWidth: 70, items: items, buttons: [ { text: "提交", hendler: function () { //指向当前的对象 this.submitRecord.createDelegate(this); } }, { text: "重置", hendler: 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: "OA办公系统", width: eval("this.subFormConfig." + this.Action + ".width"), autoHeight: true, closeAction: "hide", modal: true, items: [formPanel] }); return win; } }二：Ext.get()和Ext.fly()之区别：