`
strong_fee
  • 浏览: 178625 次
  • 性别: Icon_minigender_1
  • 来自: 福州
社区版块
存档分类
最新评论

为控件的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,相信大家都能明白咋回事儿了。

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

分享到:
评论

相关推荐

    Toolbar 控件

    在.NET框架中,`Toolbar`控件是一种常用的用户界面元素,用于展示一组可操作的按钮或命令,通常在应用程序的顶部或侧边栏中找到。`Toolbar`在Windows Forms和Web应用程序中都有应用,但在这里我们主要关注的是Web...

    在MFC工具栏ToolBar上面添加Edit控件

    需要注意的是,由于Edit控件通常不是工具栏的标准组件,因此在实现过程中可能需要解决一些布局和显示问题,例如防止Edit控件覆盖其他按钮,以及处理窗口大小改变时的动态调整。通过学习和实践,你可以更好地掌握MFC...

    ToolBar居中添加控件

    在XML布局文件中,`ToolBar`通常被定义为`android.support.v7.widget.Toolbar`(如果使用的是Android Support Library)或`androidx.appcompat.widget.Toolbar`(如果使用的是AndroidX库)。例如: ```xml ...

    监听列表滚动来隐藏或显示Toolbar与浮动按钮

    在Android应用开发中,我们经常需要根据用户交互来动态调整界面元素的可见性,例如当用户滚动列表时,隐藏或显示顶部的ToolBar以及悬浮动作按钮(Floating Action Button, FAB)。这种效果能提供更好的用户体验,...

    toolbar示范_VB6.0的toolbar使用示范_

    在VB6.0(Visual Basic 6.0)中,`Toolbar`是一个非常重要的控件,它用于创建用户界面中的工具栏。工具栏通常包含一系列的按钮,这些按钮代表了程序中的常用功能,使得用户可以快速访问和执行操作,极大地提高了软件...

    VB6 利用ToolBar控件制作简单工具栏的源码.rar

    这个“VB6 利用ToolBar控件制作简单工具栏的源码.rar”文件提供了一个实例,帮助初学者了解如何在VB6中利用ToolBar控件构建一个简单的工具栏,包括工具栏上的按钮和菜单。 首先,ToolBar控件在VB6中是一个预定义的...

    替代toolbar控件的工具条控件源码(用于VB6.0版)

    原下载地址(http://www.freevbcode.com/ShowCode.asp?ID=344),为什么要替代VB自带的toolbar控件呢?我的理由是减少VB程序对其它外部DLL的使用(toolbar要使用shell32.DLL,comctl32.OCX,comctl32.DLL等外部文件)以...

    VB toolbar使用

    - **添加按钮**:可以向Toolbar中添加按钮,并为每个按钮加载图标、设置标题和简短的提示文本。 - **按钮分组**:可以通过设置按钮的 `Style` 属性来实现按钮间的分组,使得同一组内的按钮互斥,即按下一个按钮时,...

    VB6.0通过ImageList加载资源文件的ICO设置给ToolBar中的按钮

    在VB6.0中,创建具有美观图形界面的应用程序时,常常需要用到ImageList组件来管理图标资源,尤其在ToolBar控件中设置按钮的图标。本文将深入探讨如何使用ImageList加载资源文件中的ICO图标,并将其设置给ToolBar中的...

    工具条(ToolBar)控件库

    工具条(ToolBar)控件库在软件开发中扮演着至关重要的角色,特别是在Windows应用程序的设计中。这个控件库,如标题所示,以仿照Office97的界面风格而闻名,提供了一系列高度定制化的工具条组件,包括TDock97、...

    toolbar2000 for DelphiXE

    【toolbar2000 for DelphiXE】是一个专为Delphi XE开发环境设计的工具栏控件,它为开发者提供了强大的自定义和扩展功能,使得在Delphi应用程序中创建和管理工具栏变得更加灵活和高效。这个控件以其丰富的特性、良好...

    MFC工具栏ToolBar按钮添加下拉菜单

    MFC 工具栏 ToolBar 按钮添加下拉菜单是指在 MFC 应用程序中,将工具栏按钮添加下拉菜单,以提供更多的功能选项。下面将详细介绍如何实现该功能。 首先,在 MainFrm.cpp 的 int CMainFrame::OnCreate...

    VB专用的漂亮toolbar工具条控件(ctl)

    标题中的“VB专用的漂亮toolbar工具条控件(ctl)”指的是在Visual Basic(VB)编程环境中使用的一种特定的用户界面元素,即Toolbar控件。这个控件允许开发者在应用程序中添加工具栏,通常用于放置按钮、下拉列表等...

    treeview,toolbar,TabStrip,MultiPage控件

    "instruction.doc"文档应该包含了详细的编译、安装和使用说明,包括如何在代码中引用控件,设置属性,响应事件,以及任何特定的配置步骤。 在实际开发中,了解并熟练使用这些控件对于提升用户体验和提高开发效率至...

    EXCEL VBA ListView+Toolbar 控件学习笔记

    EXCEL VBA ListView+Toolbar 控件学习笔记,加示例和代码

    ToolBar按钮显示文字

    在VC++编程环境中,`CToolBar` 是MFC(Microsoft Foundation Classes)库中的一个类,用于创建具有标准Windows工具栏功能的控件。当我们要在工具栏按钮上显示文字时,这通常是为了提高用户界面的可读性和易用性。`...

    ToolBar告别失真的问题VC

    在VC++编程环境中,ToolBar控件是经常被用于创建用户界面的一个重要元素,它通常包含一系列的图标按钮,代表不同的功能或操作。然而,在实际应用中,我们可能会遇到ToolBar控件显示失真的问题,这主要表现为图标变形...

    Toolbar-Imagelist-Statusbar.zip_Toolbar_imagelist_statusbar控件_to

    在Windows应用程序开发中,我们经常会遇到一些用于增强用户界面(UI)交互的控件,如Toolbar、Imagelist和Statusbar。这些控件在各种应用中都有广泛的应用,能够提供功能菜单、图标显示以及状态反馈等功能。让我们...

    toolbar示范_VB基础菜单栏和toolbar的使用_

    - 为了显示自定义的按钮图标,需要先创建一个`ImageList`控件,添加所需的图像,然后将`ImageList`设置为ToolBar的`ImageList`属性。 通过上述步骤,我们可以创建出具有专业外观且功能丰富的VB应用程序。菜单栏和...

    VB中ToolBar的使用

    此外,Word 7.0的工具条还支持用户自定义功能,允许用户根据个人需求隐藏、显示或重新排列工具条中的按钮,从而进一步提高了用户体验。 #### 三、在Visual Basic中使用工具条 在Visual Basic中,从VB5.0开始,...

Global site tag (gtag.js) - Google Analytics