ExtGridPanel 面向对象写法

// JavaScript Document
ExtGridModel = Ext.extend(Ext.grid.GridPanel,{
	//--------------------------------//-----------------------------------------//相关属性字段
	config:{
		title:null,
		scope:null,
		limit:20
	},
	params:{},
	toolItems:{
		txtName:null,
		btnSearch:null
	},
	controls:{
		selectionModel:null,
		columnModel:null,
		Record:null,
		toolBar:null,
		bottomBar:null,
		store:null
	},
	//--------------------------------//-----------------------------------------//构造函数
	constructor:function(cfg){
		//获得配置参数cfg{title:null,scope:null,limit}
		//初始化对象
		this.initInstance(cfg);
		//构造gridPanel
		ExtGridModel.superclass.constructor.call(this,{
			loadMask:{
				msg:"数据加载中……"
			},
			width:Ext.get("warpper").getWidth(),
			height:500,
			title:this.config.title,
			renderTo:Ext.get("warpper"),
			cm:this.controls.columnModel,
			sm:this.controls.selectionModel,
			store:this.controls.store,
			tbar:this.controls.toolBar,
			bbar:this.controls.bottomBar,
			viewConfig:{
				forceFit:true,
				getRowClass:this.getRowClass
			}
		});
	},
	//--------------------------------//-----------------------------------------//初始化config
	initConfig:function(cfg){
		if(cfg!=null){
			for(var i in cfg){
				this.config[i] = cfg[i];
			}
		}
	},
	//--------------------------------//-----------------------------------------//初始化对象
	initInstance:function(cfg){
		/*-----------------------------------------------------
		   注意顺序，必须 Record > store > bottomBar > gridPanel
		 -----------------------------------------------------*/
		//初始化config
		this.initConfig(cfg);
		//绑定方法
		this.bindWindowMethod();
		//定义Record
		this.controls.Record = this.definitionRecord();
		//创建columnModel
		this.controls.columnModel = this.createColumnModel();
		//创建selectionModel
		this.controls.selectionModel = this.createSelectionModel();
		//创建toolBar
		this.controls.toolBar = this.creatToolBar();
		//创建store
		this.controls.store = this.createStore();
		//创建bottomBar
		this.controls.bottomBar = this.creatBottomBar();
		//事件注册
		this.registEvent();
		
		//加载数据
		//this.loadRecord();
	},
	//--------------------------------//-----------------------------------------//隔行样式
	getRowClass:function(rcd,idx){
		if(idx%2 == 0) return "x-grid3-row-alt";
	},
	//--------------------------------//-----------------------------------------//绑定全局方法
	bindWindowMethod:function(){
		//非必要，只为统一封装，面向对象
		//window.showWin = this.showWin;
		window.deleteRecord = this.deleteRecord;
	},
	//--------------------------------//-----------------------------------------//事件注册
	registEvent:function(){
		//this.addEvents("");
	},
	//--------------------------------//-----------------------------------------//定义记录类型
	definitionRecord:function(){
		return Ext.data.Record.create([
			{name:'name',mapping:'name',type:'string'}
		]);
	},
	//--------------------------------//-----------------------------------------//创建表格列模型
	createColumnModel:function(){
		//统一作用域
		var selfhandler = this;
		return new Ext.grid.ColumnModel([
			 //行号
			 new Ext.grid.RowNumberer(),
			{header:'名称',dataIndex:'name',menuDisabled:true,
			 //name呈现
			 renderer:function(val,meta,record){
		     	selfhandler.renderer4Name(val,meta,record);
			 }
			},	
			{header:'名称',dataIndex:'name',menuDisabled:true}
		]);
	},
	//--------------------------------//-----------------------------------------//创建表格先择模型
	createSelectionModel:function(){
		//默认为选择单行，如有需求自行修改选择多行
		return new Ext.grid.RowSelectionModel({
			singleSelect:true
		});
	},
	//--------------------------------//-----------------------------------------//创建顶部工具栏
	creatToolBar:function(){
		//统一作用域
		var selfhandler = this;
		this.toolItems.txtName = new Ext.form.TextField({width:100});
		
		this.toolItems.btnSearch = new Ext.Button({text:'【搜索】',
			//这样写主要是面向对象，统一作用域
			handler:function(){
				selfhandler.loadRecord();
			}
		});
		
		return new Ext.Toolbar({
					items:[
						'名称',
						this.toolItems.txtName,
						'-',
						this.toolItems.btnSearch
					]
				});
	},
	//--------------------------------//-----------------------------------------//创建底部工具栏
	creatBottomBar:function(){
		return new Ext.PagingToolbar({
			store:this.controls.store,
			pageSize:this.config.limit,
			displayInfo:true,
			displayMsg:"第{0} - {1} 条/ 共 {2} 条"
		});
	},
	//--------------------------------//-----------------------------------------//创建数据存储器
	createStore:function(){
		//统一作用域
		var selfhandler = this;
		return new Ext.data.Store({
			//请求地址
			url:'www.baidu.com',
			//数据读取器
			reader:new Ext.data.JsonReader({
				root:'root',
				totalProperty:'totalCount'
			},this.controls.Record),
			//基本参数
			baseParams:{
				'limit':20,
				'name':null
			},
			//参数设置
			listeners:{
				beforeload:function(){
					this.baseParams["limit"] = selfhandler.config.limit;
					this.baseParams["name"] = selfhandler.toolItems.txtName.getValue();
				}
			}
		});
	},
	//--------------------------------//-----------------------------------------//name呈现器
	renderer4Name:function(val,meta,record){
		//示例，请根据自身要求进行更改，注意：this为当前的ExtGridModel的实例对象
		var html = val;
		
		return html;
	},
	//--------------------------------//-----------------------------------------//操作呈现器
	renderer4Handler:function(val,meta,record){
		var html = val;
		
		//查看
		html+="<a href='#' target='_blank'>查看</a>  ";
		//修改
		html+="<a href='#' target='_blank'>修改</a>  ";
		//删除
		html+=String.format("<a href=\"javascript:deleteRecord('{0}','{1}')\">删除</a>",val,this.config.scope);
		
		return html;
	},
	//--------------------------------//-----------------------------------------//载入/重载数据
	loadRecord:function(id){
		this.controls.store.reload();
	},
	//--------------------------------//-----------------------------------------//删除记录
	deleteRecord:function(id,scope){
		if(!window.confirm("确定删除此记录？")){
			return ;	
		}
		Ext.Ajax.request({
			url:'',
			params:{
				id:id
			},
			success:function(){
				window[scope].loadRecord();
			},
			failure:function(){
				alert("系统异常,操作失败!");
			}
		});
	}
});