Ext.js中自己扩展的EasyGrid

这里只写了一些核心的代码，具体如下：

Ext.ux.EasyGrid = Ext.extend(Ext.grid.GridPanel, {
    initComponent: function () {
        this.autoHeight = true,

        this.viewConfig = {
            forceFit: true
        };

        this.Action="read";

        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
        });
    },
   //创建GridPanel的列的模型
    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 
            });    
        }
   
   for(var j=0;j<this.fields.length;j++){

   //加上隐藏列的扩展方法
     if(this.colhidden){
        if(this.colhidden.indexOf(j)!=-1){
     cols[j].hidden=true;
  }
};
//检测并设置列renderer
if(this.renderer){
       var index=this.renderer.ids.indexOf(j); 
     if(index!=-1)
     {
    cols[j].renderer = this.renderer.funcs[index];
     }
  }
}

        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;
    }

});

改进后的方法：

Ext.ux.EasyGrid = Ext.extend(Ext.grid.GridPanel, {
	initComponent: function() {
		//this.autoHeight = true;
		//this.stripeRows = true;
		this.id = "branchInfoGrid";
		this.viewConfig = {
			forceFit: true
		};
		this.Action = "read";

		this.createStore();
		this.createColumns();
		this.createTbar();
		this.createBbar();

		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({
			autoLoad: true,
			proxy: proxy,
			//proxy: new Ext.data.MemoryProxy(this.data),
			reader: reader
		});
	},

	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
			});
		}


		for (var j = 0; j < this.fields.length; j++) {
			if (this.colhidden) { //检测并设置列隐藏
				if (this.colhidden.indexOf(j) != -1) {
					cols[j].hidden = true;
				};
			}
			if (this.renderer) {//检测并设置列renderer
				var index = this.renderer.ids.indexOf(j);
				if (index != -1) {
					cols[j].renderer = this.renderer.funcs[index];
				}
			}

		}


		this.columns = cols;
	},

	createTbar: function() {
		this.tbar = new Ext.Toolbar([{
			text: "添加",
			iconCls: 'x-tbar-add',
			handler: this.createRecord.createDelegate(this)
		}, {
			text: "修改",
			iconCls: 'x-tbar-update',
			handler: this.updateRecord.createDelegate(this)
		}, {
			text: "删除",
			iconCls: 'x-tbar-del',
			handler: this.removeRecord.createDelegate(this)
}]);
		},

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

		createRecord: function() {
			this.Action = "create";
			this.showWindow();
			var form = this.getForm();
			form.baseParams = {
				create: true
			};
			form.setValues(this.getEmptyRecord());


		},

		updateRecord: function() {
			var r = this.getSelectedRecord();
			if (r != false) {
				this.Action = "update";
				this.showWindow();
				var form = this.getForm();
				form.baseParams = {
					create: false
				};

				form.loadRecord(r);

				if (this.fnWinModify) {
					//var _form = win.getComponent("EasyGridForm");
					this.fnWinModify(form, r);
				}
			}
		},

		removeRecord: function() {
			var r = this.getSelectedRecord();
			if (r != false) {
				this.Action = "delete";
				Ext.Msg.confirm('国讯OA智能办公系统', '你确定要删除吗?', function(btn) {
					if (btn == 'yes') {
						try {
							
							if (this.fnDelete) {
								this.fnDelete(this.store, r);
							}
						} catch (ex)
						{ }
					}
				}, this);

			}
		},

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

		getEmptyRecord: function() {
			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) {
				//				var data = [];
				//				for (var name in values) {
				//					data.push(values[name]);
				//				}
				//				this.store.loadData([data], true);
				var json = this.getEmptyRecord();
				for (var name in values) {
					json[name] = values[name];
				}
				var rec = new this.store.recordType(json);
				try {
					
					if (this.fnCreate) {
						this.fnCreate(this.store,form, rec);
					}

				} catch (ex) {

				}

			} else {
				var r = this.getSelectedRecord();
				try {
					
					if (this.fnUpdate) {
						this.fnUpdate(form, r,values);
					}
				} catch (ex)
				{ }
			}
			this.hideWindow();
		},

		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];
				items.push({
					fieldLabel: header,
					name: f
				});
			}
			//add by fwy
			for (var j = 0; j < this.fields.length; j++) {
				if (this.colhidden) { //检测并设置列隐藏
					if (this.colhidden.indexOf(j) != -1) {
						items[j].hidden = true;
						items[j].hideLabel = true;
					};
				}
				if (this.subFormConfig.create.items) {//检测并设置列替换
					var index = this.subFormConfig.create.items.ids.indexOf(j);
					if (index != -1) {
						items[j] = this.subFormConfig.create.items.fields[index];
					}
				}
			}



			var form = new Ext.form.FormPanel({
				frame: true,
				id: "EasyGridForm",
				defaultType: 'textfield',
				buttonAlign: 'center',
				labelAlign: 'right',
				labelWidth: 130,
				trackResetOnLoad: true,
				style: "text-align:center",
				defaults: { width: 150 },

				reader: new Ext.data.ArrayReader({
					fields: this.fields
				}),
				items: items,
				buttons: [{
					text: '提交',
					handler: this.submitRecord.createDelegate(this)
				}, {
					text: '重置',
					handler: function() {
						form.getForm().reset();
					}
}]
				});
				return form;
			},

			showWindow: function() {
				this.getWindow().show();
			},

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

			getWindow: function() {
				if (!this.gridWindow) {
					this.gridWindow = this.createWindow();
				}
				var title = eval("this.subFormConfig." + this.Action + ".title");
				this.gridWindow.setTitle(title);
				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()之区别：

     1.Ext.Element是Ext对Dom元素的一个强有力封装，它封装了很多方便对dom操作的接口

     2.Ext.get和Ext.fly返回的都是一个Element对象，但是Ext.get返回的是一个独立的Element，拥有自己独立的操作接口

 

三：设置日期的格式的方法：

   

一：格式化当前的额时间格式：
var task={
    run:function(){
    Ext.fly('clock').update(new Date().format("g:i:s"));
   }
   interval:1000
}

二：开启用行的格式：
var runner=new Ext.util.TaskRunner();  //定时执行任务（该类可以保障每一个任务或服务都可以在任何时刻独立的运行，而不会影响其他的任务或服务的运行）
runner.start(task);