`
李成林_89
  • 浏览: 38203 次
  • 性别: Icon_minigender_2
社区版块
存档分类
最新评论

Ext button menu 触发相应事件 笔记记录

阅读更多
[color=brown]
Ext button menu  触发相应事件 笔记记录
今天需要完成一个功能是把一个button变成一个菜单,然后点击不同菜单的时候触发不同的事件,在api上很容的就找到了在按钮下面添加菜单的方法,但是触发相应事件却让我为难了不少,最后终于找到办法了,现在把办法共享出来,供大家参考

view层 在button下增加菜单代码
this.buttonPublish = Ext.create('Ext.button.Button',{
     		action: 'publish_button',
     		tooltip	: '发布', 
     		iconCls	: 'icon-release',
     		menu:[{
     				id		: 'buttonPublishMenu',
     				iconCls	: 'icon-release',
     				text	: '注册菜单'
     			},
     			{
     				id		: 'buttonPublishComment',
     				iconCls	: 'icon-release',
     				text	: '注册组件'
     			}]
     	});

注意 这里的meun需要加上id,方便contorller里面找到它。

controller层中 对不同的菜单触发不同事件,相应代码如下:
// 发布按钮 注册菜单
					'querylist button[action=publish_button] #buttonPublishMenu': {
						click : this.queryPublish
					},
					// 发布按钮  注册组件
					'querylist button[action=publish_button] #buttonPublishComment': {
						click : this.queryPublish
					}



关键就在click这里,我这里调用的是同一个方法。

queryPublish : function(btn, e, eOpt) {
    console.log(btn);
}

就可以写你想要的代码了。
以上就完成了,你懂了吗?亲,效果图在附件里。如果大家有更好的办法,欢迎留言~~
[/color]
  • 大小: 5.5 KB
分享到:
评论

相关推荐

    ext2.0笔记ext2.0笔记ext2.0笔记ext2.0笔记ext2.0笔记ext2.0笔记ext2.0笔记ext2.0笔记ext2.0笔记ext2.0笔记ext2.0笔记ext2.0笔记ext2.0笔记ext2.0笔记ext2.0笔记ext2.0笔记ext2.0笔记ext2.0笔记ext2.0笔记ext2.0笔记

    ext2.0笔记ext2.0笔记ext2.0笔记ext2.0笔记ext2.0笔记ext2.0笔记ext2.0笔记ext2.0笔记ext2.0笔记ext2.0笔记ext2.0笔记ext2.0笔记ext2.0笔记ext2.0笔记ext2.0笔记ext2.0笔记ext2.0笔记ext2.0笔记ext2.0笔记ext2.0笔记...

    ext.net Menu + TreePanel

    Menu组件在Ext.NET中扮演着重要的角色,它为用户提供了一种易于操作的下拉菜单系统,可以包含各种选项和子菜单。菜单可以被关联到按钮、工具栏或者页面的其他元素上,用户只需点击就能触发相应的操作。菜单项可以...

    EXT dojoChina按钮控件示例 Ext.Button.rar

    EXT dojoChina按钮控件示例 Ext.Button.rarEXT dojoChina按钮控件示例 Ext.Button.rarEXT dojoChina按钮控件示例 Ext.Button.rarEXT dojoChina按钮控件示例 Ext.Button.rar

    Button控件 的简单使用(button监听和onClick触发函数使用)

    Button控件 的简单使用(button监听和onClick触发函数使用) 具体可参考我文章。https://mp.csdn.net/postedit/84561464 【更新-->下载所需积分太高,更改为固定分值了】

    Ext.Button的扩展

    在Ext JS框架中,`Ext.Button` 是一个基础组件,用于创建各种按钮。它提供了丰富的样式和事件处理功能,能够适应各种用户界面需求。而"Ext.Button的扩展"则是在这个基础上进行了定制化开发,增加了更个性化的交互...

    【ASP.NET编程知识】Ext.Net学习笔记之button小结.docx

    本篇文档主要总结了关于Ext.Net中的button组件的一些关键知识点,包括触发客户端事件、服务端事件以及如何传递参数和自定义额外属性。 1. **触发客户端事件** 在Ext.Net中,可以为按钮组件绑定客户端事件,例如...

    ext Panel+toolbar+button 实作带注释

    `EXT Button`是EXT JS中最常用的交互元素之一,它用于触发某个动作或者导航到其他页面。在Toolbar中,按钮通常通过`items`数组添加,每个按钮的配置项包括`text`(按钮文本)、`handler`(点击事件处理函数)等。...

    ext学习资料 20篇详细学习笔记 初学者ext学习的文档

    通过监听和触发事件,可以实现用户交互逻辑。了解如何绑定事件处理器和编写事件处理函数是EXT编程的重要技能。 5. **EXT JS API**:深入学习EXT的API文档至关重要。EXT提供了大量的类和方法,掌握它们将使你能够...

    Ext学习笔记

    Ext JS4学习教程+笔记(二)事件处理 Ext JS4学习教程+笔记(六)DataView面板 Ext JS4学习教程+笔记(七)树面板Tree Panel Ext JS4学习教程+笔记(三)Ajax请求 Ext JS4学习教程+笔记(五)Form Panel的使用 Ext...

    Ext2_Button示例

    按钮组件在ExtJS中扮演着各种角色,如触发事件、导航、提交表单等。让我们深入了解一下ExtJS 2.x中的按钮功能和用法: 1. **创建按钮**: 在ExtJS中,你可以通过`new Ext.Button()`来创建一个按钮。基本的按钮创建...

    ext.js监听事件

    ext封装的太死板,里面有常用到的15个ext.js触发事件和监听事件,对ext了解的不是特别深入,大部分都是经常碰到的

    ext学习笔记代码

    ext学习笔记代码 ext学习笔记代码 ext学习笔记代码

    Ext API详解--笔记

    这篇笔记将深入探讨Ext Js的核心API,涵盖多个关键模块。 1. **Ext.Element**: `Ext.Element`是Ext Js中的基础元素操作类,它封装了对DOM元素的各种操作,如尺寸调整、样式修改、事件处理等。在`EXT核心API详解...

    ext 下拉菜单。(不要下,不能用)

    - **事件处理问题**:触发下拉菜单显示的事件可能未正确绑定或执行。 - **浏览器兼容性**:EXT JS虽然支持多种浏览器,但在某些版本或特定环境下可能存在兼容性问题。 解决这些问题通常需要查看错误日志,检查源...

    EXT dojochina Ext事件.rar

    在EXT JS的数据层,Store和Model也有相应的事件,如`load`、`update`和`beforeload`等。这些事件在数据加载、修改和同步时很有用。 8. **事件处理函数** EXT JS事件处理函数可以是匿名函数,也可以是预先定义的方法...

    ext-3-button-sample.rar_Ext.Button samp_ext_extjs button

    extjs 主要应用了button的布局,和事件提交

    EXT核心API详解

    41、Ext.Button类 …………………… 36 42、Ext.SplitButton类 ……………… 38 43、Ext.CycleButton类 ……………… 39 44、Ext.form.BasicForm类 …………… 40 45、Ext.form.Field类 …………………… 41 46、Ext...

    ext2.0升级ext3.1笔记

    标题中的"ext2.0升级ext3.1笔记"指的是Linux操作系统中文件系统从第二代扩展文件系统(ext2)升级到增强型日志文件系统(ext3)的一个过程。这个过程涉及到对磁盘布局、元数据管理和数据安全性等方面的改进。ext2是...

    ext api,ext 学习笔记,SWFUpload_多文件上传及部分工具

    EXT API的学习笔记涵盖了EXT库的使用方法、组件创建、事件处理、数据绑定等多个方面,帮助开发者深入理解EXT的机制。 在EXT环境中搭建,首先需要下载EXT库,包括JavaScript文件和必要的CSS样式表。然后,在HTML页面...

Global site tag (gtag.js) - Google Analytics