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自身を指しています.

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

ここではscopeを指定していますので、this.batdeleteの中のこのscopeで指定された容器を指しています.scopeの中のthisはgridの層で使用されていますので、このgridを指しています.