关于ExtJs的scope

先来一段源码

/**
 * 命名规则配置
 * @author hegj
 * @class NamingRulesConfigure
 * @extends Ext.grid.GridPanel
 */
NamingRulesConfigure = Ext.extend(Ext.grid.GridPanel,{
	id : 'NamingRulesGrid',
	pageSize : 10,
	labelAlign : 'right',
	buttonAlign : 'center',
	frame : false,
	border : false,
	disabled : false,
	autoScroll : true,
	loadMask: {msg:'正在加载数据，请稍侯……'},
	listeners : {
		cellclick : function(grid, rowIndex, columnIndex, e) {
			var sel = grid.getSelectionModel().getSelected();
			var metadataId = sel.get('metadataId');
			if (e.getTarget().innerHTML === '删除' ) {
				this.deleteNamingRules(metadataId);
			}
			if (e.getTarget().innerHTML === '修改' ){
				EditNamingRulesForm(metadataId,'修改命名规则');
			}
		}
	},
	initComponent : function(){
		var _sm = new Ext.grid.CheckboxSelectionModel();
		this.sm = _sm;
		this.columns = [new Ext.grid.RowNumberer(),_sm,
		    {
				id : 'metadataId',
				header : '元数据id',
				dataIndex : 'metadataId',
				hidden : true
		    },{
		    	id : 'name',
		    	header : '命名规则名称',
		    	dataIndex : 'name',
		    	sortable : true
		    },{
		    	id : 'displayName',
		    	header : '命名规则中文名',
		    	dataIndex : 'displayName',
		    	sortable : true
		    },{
		    	id : 'rulesExpression',
		    	header : '规则表达式',
		    	dataIndex : 'rulesExpression',
		    	sortable : true
		    },{
		    	header : '操作',
		    	renderer : function(value, metaData, record, rowIndex, colIndex,store) {
					return "<a href='#'>修改</a>&nbsp;&nbsp;&nbsp;&nbsp;<a href='#'>删除</a>";
				}
		    }];
		var l = new Ext.form.Label({
			text : '规则名称'
		});
		var ruleName = new Ext.form.TextField();
		var searchBtn = new Ext.Button({
			iconCls : 'search',
			scope : this,
			text : '查询',
			handler : function(){
				this.store.load({params:{searchName : ruleName.getValue(),start:0,limit:this.pageSize}});
			}
		});
		var createBtn = new Ext.Button({
			scope : this,
			text : '新增',
			handler : function(){
				EditNamingRulesForm('','新增命名规则');
			}
		});
		var deleteBtn = new Ext.Button({
			iconCls : 'remove',
			text : '删除',
			scope : this,
			handler : function(){
				this.batchDelete();
			}
		});
		var importBtn = new Ext.Button({
			text : '导入',
			handler : function(){
				alert('导入');
			}
		});
		var downloadBtn = new Ext.Button({
			text : '规则表达式配置说明',
			handler : function(){
				alert('规则表达式配置说明');
			}
		});
		var tItems =[l,'-',ruleName,'-',searchBtn,'-',createBtn,'-',deleteBtn,'-',importBtn,'-',downloadBtn];
		this.tbar = new Ext.Toolbar({
			items : tItems
		});
		
		var jsonReader = new Ext.data.JsonReader({  
			root: 'rows',  
			totalProperty: 'totalCount',
			id: 'metadataId' },  
		[{name: 'metadataId',mapping:'metadataId', type:'string'},
		 {name: 'modelId',mapping:'modelId', type:'string'},
		 {name: 'name',mapping:'name', type:'string'},
		 {name: 'displayName',mapping:'displayName', type:'string'},
		 {name: 'rulesExpression',mapping:'rulesExpression', type:'string'},
		 {name: 'remark',mapping:'remark', type:'string'},
		 {name: 'path',mapping:'path', type:'string'}
        ]);
		var store =  new Ext.data.Store({
			baseParams:{searchName : ruleName.getValue()},
			proxy : new Ext.data.HttpProxy({url : lg.url.web+'/naming-rules!findNamingRulesByName.action'}),   
			reader: jsonReader
		});
	
		store.load({params:{start:0,limit:this.pageSize}});
		this.store = store;
		this.bbar = new Ext.PagingToolbar({
			pageSize : this.pageSize,
			store : store,
			loadMask : true,
			displayInfo : true,
			displayMsg : '从{0}到{1}条记录,共{2}条记录',
			emptyMsg : '无记录',
			scope : this
		});
		NamingRulesConfigure.superclass.initComponent.call(this);
	},
	deleteNamingRules : function(metadataId){
		var store = this.store;
		Ext.Msg.confirm('提示','确认删除？',function(btn){
			if(btn=='yes'){
				Ext.Ajax.request({
					url : lg.url.web+'/naming-rules!deleteNamingRulesById.action',
					method : 'post',
					timeout : 3000,
					params : {
						metadataId : metadataId
					},
					failure : function(response){
						alert('操作失败');
					},
					callback : function(option, success, response){
						if(success !== true) {
//							mk.hide();
							return
						};
						store.reload();
//						mk.hide();
					}
				});
			}
		});
	},
	batchDelete : function(){
		var store = this.store;
		var ids = this.getSelectedNamingRules();
		Ext.Msg.confirm('提示','确认删除？',function(btn){
			if(btn=='yes'){
				Ext.Ajax.request({
					url : lg.url.web+'/naming-rules!batchDeleteNamingRules.action',
					method : 'post',
					timeout : 3000,
					params : {
						ids : ids
					},
					failure : function(response){
						alert('操作失败');
					},
					callback : function(option, success, response){
						if(success !== true) {
//							mk.hide();
							return
						};
						store.reload();
//						mk.hide();
					}
				});
			}
		});
	},
	getSelectedNamingRules : function(){
		var rs = this.getSelectionModel().selections;
		var n = rs.length;
		var str = "";
		for(var i = 0; i < n; i++){
			var r = rs.get(i);
			str = str + "," + r.get('metadataId');
		}
		if(str!=""){
			str = str.substring(1);
		}
		return str;
	}
});

scope决定this的指向

	var deleteBtn = new Ext.Button({
			iconCls : 'remove',
			text : '删除',
			handler : function(){
				this.batchDelete();
			}
		});

这里的this指向button本身，因为this是在button的handler里面使用的，而且此button没有指定scope，则其scope默认指向button本身，所以this.batchDelete()找不到方法batchDelete()因而无法执行。

	var deleteBtn = new Ext.Button({
			iconCls : 'remove',
			text : '删除',
			scope : this,
			handler : function(){
				this.batchDelete();
			}
		});

这里指定了scope，所以this.batchDelete()中的指向该scope所指定的容器，而scope中的this因为是在grid这一层中使用的，所以指向的是这个grid，所以this.batchDelete()就能找到此grid定义的方法batchDelete()。