`
heartneo
  • 浏览: 65081 次
  • 性别: Icon_minigender_1
  • 来自: 沈阳
社区版块
存档分类
最新评论
阅读更多
今天要写extjs导航菜单,查了些资料基本没有满意的,实在是感觉太缺少这方面的资料了,夜里加班偷闲自己动手写了,好了不废话了,看代码。

/*by heartneo*/
Ext.onReady(function(){
	createPanel();
});

function createPanel(){
	filterPanel = Ext.create('Ext.panel.Panel', {//定义panel
	    width: 300,
	    title: 'menu',
	    renderTo: 'menu',
	    tbar: Ext.create('Ext.toolbar.Toolbar', {//定义toolbar
            items: [
            	{	
            		id: 'options',
	                xtype:'splitbutton',//定义splitbutton,可以显示下拉菜单	                
	                text: 'Options',
	                menu: {
	                	 items: [//定义2个menu
	                		{text: 'Item 1', handler: function(){  window.location = "http://heartneo.iteye.com" }},
	            			{text: 'Item 2', handler: function(){ Ext.MessageBox.alert('heartneo',' -- by heartneo -- '); }}
	                	 ]
	                },
	                listeners : {//监听事件
						'mouseover' : function() {//鼠标经过按钮时,显示菜单
							Ext.getCmp('options').showMenu(); 
						},
						'mouseout' : function() {//鼠标移出时,延迟隐藏菜单
							var task = new Ext.util.DelayedTask(function(){//定义延迟任务
   								 Ext.getCmp('options').hideMenu();//
							});
							task.delay(1500); //1.5秒后隐藏菜单
						}
					}
            	}
            ]
        })
	});
}


结果视图如下:



附上源代码。
  • 大小: 10 KB
分享到:
评论

相关推荐

    extjs上方动态导航栏

    在ExtJS中,上方的动态导航栏(通常称为Header或Toolbar)是一种常见的组件,用于展示应用的菜单、按钮、下拉框等交互元素,用户可以根据需求动态加载和更新。本篇文章将深入探讨如何在ExtJS中创建并实现上方动态...

    Extjs Grid 扩展实例

    配置`store`的`paging`属性,以及`grid`的`dockedItems`来添加分页栏,这样用户就能在大量数据中快速导航。 4. **过滤**:通过`Ext.grid.filters.Filters`插件,我们可以为Grid的每一列添加过滤功能。这样用户可以...

    ExtJS5.0 树形菜单实例

    ExtJS 是一款强大的JavaScript 框架,专...这个菜单可以用于显示和管理具有层级关系的数据,比如文件系统、权限分配、导航菜单等。在实际项目中,还可以结合其他组件和功能,如表格、表单等,来实现更复杂的管理界面。

    extjs实践大量实例讲解

    在这个例子中,我们创建了一个带有顶部导航栏的页面布局。导航栏包含两个按钮:“Home”和“About”,点击时会在控制台打印相应的消息。页面中心区域则使用了标签页布局来展示不同的内容。 ### 总结 通过以上这些...

    ExtJS4 2学习 21 动态菜单与表格数据展示操作总结篇

    在"ExtJS4 2学习 21 动态菜单与表格数据展示操作总结篇"中,我们将深入探讨两个核心组件:动态菜单(Dynamic Menus)和表格数据展示(Grid Data Display),以及如何在实际应用中进行操作。 动态菜单在Web应用中...

    Ext3.X横向菜单导航栏

    在Ext3.X中,横向菜单导航栏是一种常见的用户界面元素,它提供了清晰的层级结构,帮助用户在复杂的Web应用中快速定位和访问功能。本知识点将深入探讨如何在Ext3.X中实现横向菜单导航栏,并基于给定的描述和资源进行...

    实例分析ExtJs

    1. **Toolbars and Menus**: 工具栏和菜单提供了丰富的交互选项,可以包含按钮、下拉列表、分割按钮等,通常用于实现导航和操作。 2. **Forms**: ExtJs的表单组件包括文本输入框、密码框、选择框、日期选择器等,...

    ExtJS5树形菜单

    在ExtJS5中,树形菜单(Tree Menu)是一种常见的UI组件,它允许用户以层次结构的方式展示数据,非常适合用于目录浏览、文件系统导航或者复杂的组织结构展示。在本篇文章中,我们将深入探讨ExtJS5树形菜单的使用方法...

    extjs实例说明详解

    本资源“extjs实例说明详解”旨在帮助新手快速掌握ExtJS的基本用法和API。 1. **Ext.Element**:这是ExtJS中的基础类,几乎所有的UI元素都是基于此构建的。它提供了大量的DOM操作方法,如样式设置、尺寸调整、事件...

    extjs6.6框架的web项目(登录+首页)

    这个项目是一个基于EXTJS 6.6的Web应用实例,提供了完整的登录页面和首页布局,包括左侧菜单和列表展示。以下是关于EXTJS 6.6框架以及该项目的关键知识点: 1. **EXTJS 6.6框架**:EXTJS 是由Sencha公司开发的一个...

    Extjs4学习指南

    - **菜单的实现**:实现系统的导航菜单功能。 - **实现登录**:实现用户登录功能,验证用户身份。 - **动态Grid**:实现动态加载和更新表格数据的功能。 - **数据的增删改**:实现对数据库中数据的增加、删除、修改...

    C#+Extjs项目主要框架源码

    一个如何使用C#结合extjs开发集成项目的实例。包含系统登录验证码,系统主界面,互动导航栏等,大家可以在这个项目上扩展。代码清晰,注释规范。能在短时间内让你学会C#+Extjs的开发。

    ExtJS 路由 application配置

    同时,`navigate`方法可用于在应用内部进行导航,无需用户实际更改浏览器地址栏。 8. **路由和视图的结合** 路由通常用于触发视图的切换或更新。在处理函数中,你可以根据参数创建、显示或更新相应的视图组件。 ...

    ExtJs_TreeDemo

    树形菜单(Tree)是ExtJs中的一个重要组件,它允许用户以层级结构展示数据,广泛应用于文件系统、组织结构或者导航菜单等场景。"ExtJs_TreeDemo"是一个示例,展示了如何在ExtJs中实现树形菜单的功能。 在ExtJs中,...

    ExtJs Tree

    - **导航面板**:`navPanel`是一个位于西部区域的Panel,采用手风琴布局并包含两个Treepanel实例。 #### 视口配置 - **视口组件**:`var viewport = new Ext.Viewport({...});`定义了整个应用的视口布局,其中包含...

    Extjs grid分页1

    `pagingToolbar`是一个包含导航按钮(如“上一页”、“下一页”)和当前页信息的工具栏,它与数据源(通常是`Ext.data.Store`)关联,控制数据的加载。 1. **创建Store**:首先,我们需要创建一个`Ext.data.Store`...

    ExtJs树例子

    树形控件在Web应用中广泛用于展示层次结构的数据,比如文件系统、组织架构或菜单导航。ExtJS提供了一个完善的TreePanel组件来创建这样的界面。以下是对这个例子中可能涉及的知识点的详细解释: 1. **TreePanel**:...

    ExtJS之Grid

    它提供了大量的UI组件,包括表单、按钮、导航菜单、工具栏、窗口等。其中,`Ext.grid.Panel`是ExtJS中的核心组件之一,用于展示表格数据,并支持排序、分组以及编辑等功能。 #### 二、基本GridPanel 在创建一个...

Global site tag (gtag.js) - Google Analytics