为控件的toolbar中的按钮配置listener或handler引发的问题

很多时候,我们想如此配置一个GridPanel或TreePanel的tbar:

MyTreePanel = Ext.extend(Ext.grid.TreePanel, {
    tbar : ['->', {
							iconCls : "x-tree-expand-all",
							tooltip : '展开所有菜单',
							handler : function() {
								this.getRootNode().expand(true, true);
							}
    }}, {
							iconCls : "x-tree-refresh",
							tooltip : '刷新',
							handler : this.refresh()
    }]}

  请注意为tbar中的第一个button配置的handler,结合对JavaScript中this的理解,会导致什么问题?我们在使用MyTreePanel的时候,通常是在页面也代码或者Window对象中new MyTreePanel。这样,按钮的handler的scope其实是window,所有function里边的this也是window对象,必然导致错误。有人说,这样写:function(){...}.createDelegate(this),换汤不换药,this指的同样是window对象。

    如果我们在MyTreePanel中的一个函数中定义tbar,如:

   

initToolbar : function(){
     this.tbar = [
          {
							iconCls : "x-tree-expand-all",
							tooltip : '展开所有菜单',
							handler : function() {
								this.getRootNode().expand(true, true);
							}

     ]
}

    修改一下handler: function(){...}.createDelegate(this);这样就得以解决问题。

    但是我们打算写一个通用的函数来处理这个问题,以便于我们编程,或者说,我们就是想装逼一下,搞通这个问题:我们不放这么写:

    

/**
	 * 初始化toolbar的handler
	 */
	initToolbarListeners : function() {
		var items;
		// 处理tbar
		if (this.getTopToolbar()) {
			this.getTopToolbar().cascade(this.adaptCmpHandlerScope, this);
		}

		// 处理bbar
		if (this.getFooterToolbar()) {
			this.getFooterToolbar().cascade(this.adaptCmpHandlerScope, this);
		}
		
		if(this.getBottomToolbar()){
			this.getBottomToolbar().cascade(this.adaptCmpHandlerScope, this);
		}
	},

 

/**
	 * @private 改变
	 */
	adaptCmpHandlerScope : function(cmp) {
		if (cmp.handler) {
			if (Ext.isFunction(cmp.handler)) {
				cmp.handler = cmp.handler.createDelegate(this);
			} else if (Ext.isString(cmp.handler)) {
				cmp.handler = this[cmp.handler].createDelegate(this);
			}
		}
	},

     

    这样配置完各种bar之后,调用这个函数就可以解决我们之前说的问题。

    我们只说了第一个button,看第二个button,他直接调用this.refresh(),而this怎么地只得都是window,所有这样肯定是不行的,所有我们的处理方法编程这样,handler : "save",然后参看adaptCmpHandlerScope函数中else if,相信大家都能明白咋回事儿了。

    这样写的目的是为了更简单的配置我们的控件,弊端是改变了函数原有的使用方法,编程了只适用于自己定义的规则。所以后期,这样的做法可能被改变。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值