创建简单Meun,实现在TreePanel上面右键.
/**
创建简单Menu
*/
function createMenu(){
//创建一个菜单
var myMenu = new Ext.menu.Menu({
items:[{
text: '右键快捷方式1',
menu: [{
text: '右键子菜单1'
},{
text: '右键子菜单2'
}]
},{
text: '右键快捷方式2'
}]
}) ;
//因为每个树中由N个节点组成的,所以要创建树,必须创建树所包含的节点(树必须有一个或多个根节点).
var vRoot = new Ext.tree.TreeNode({text: '根节点1'}) ;//创建节点
var vNode1 = new Ext.tree.TreeNode({text: '子节点1'}) ;//创建节点
vNode1.appendChild(new Ext.tree.TreeNode({text: '子节点11'}));
vNode1.appendChild(new Ext.tree.TreeNode({text: '子节点12'}));
var vNode2 = new Ext.tree.TreeNode({text: '子节点1'}) ;//创建节点
vRoot.appendChild(vNode1) ;//在vRoot根节点上创建子节点.
vRoot.appendChild(vNode2) ;//在vRoot根节点上创建子节点.
var obj = {
title: '我的Menu练习',
renderTo: document.body,
height: 300,
width: 600,
root: vRoot,
tbar:[{
text: '文件',
menu: {items:[{
text: '打开',
icon: '../images/open.gif'
},{
text: '保存',
icon: '../images/save.gif'
},'-',{
text: '另存为...',
handler: function(b){
var win = new Ext.Window({
title: '另存为对话框',
width: 200,
height: 200,
html: '可以在此处进行其他操作'
});
win.show() ;
}
}]}
},'-',{//在两个按钮之间添加一条分隔线
text: '编辑'
},'->',{//右顶格显示'帮助'按钮
text: '帮助'
}],
listeners: {//添加监听器,实现右键Tree显示定义菜单myMenu
contextmenu: function(n,e){
myMenu.showAt(e.getXY()) ;
}
}
};
var myPanel = new Ext.tree.TreePanel(obj) ;
}
Ext.onReady(createMenu);//创建动态树
分享到:
相关推荐
菜单栏在EXTJS4中的实现主要基于`Ext.menu.Menu`类。这个类提供了一个容器,可以容纳多个菜单项,每个菜单项可以通过`Ext.menu.Item`或其子类来创建。创建菜单栏的基本步骤包括: 1. **初始化菜单项**:首先,你...
在ExtJS中,导航菜单通常通过`Ext.menu.Menu`类来实现,这是一个可弹出的菜单,可以包含多个子菜单项。创建导航菜单时,我们需要定义菜单项(menu items),每个菜单项可以是简单的链接、复选框、分割线或包含子菜单...
本文将深入探讨EXTJS中的菜单开发,帮助初学者理解如何利用EXTJS的Menu组件创建功能丰富的菜单系统。 EXTJS的Menu组件由多个类构成,它们协同工作以实现各种功能。首先,`Ext.Toolbar`是菜单条类,用于在页面上显示...
"ExtJs菜单导航功能,不在用左边功能树"这一主题,旨在探讨如何在不使用左侧树形结构的情况下,利用ExtJs实现高效且现代感的菜单导航。 ExtJs是一款强大的JavaScript库,专门用于构建富客户端应用。它提供了丰富的...
3. **多级菜单**:实现多级菜单结构,需要掌握ExtJS的Menu组件和子菜单(Submenu)的概念。每个菜单项可以关联一个子菜单,形成层次结构。通过监听用户的鼠标悬停事件,动态展开和关闭子菜单。 4. **动态生成**:...
动态加载菜单是ExtJS中的一个关键特性,它允许在用户交互过程中动态地创建、修改和加载菜单项,提供了更灵活的用户界面设计。在“Extjs动态加载菜单”这个主题中,我们将深入探讨这一功能的实现方式以及相关技术。 ...
- **菜单栏(Menu)**:提供下拉式菜单,用于放置选项和子菜单。Ext.menu.Menu允许你创建可定制的多级菜单,可与工具栏中的按钮关联,实现点击后展开菜单的效果。 4. **表单(Form)** - **表单面板(Ext.form....
EXTJS中的树菜单(TreeMenu)是TreePanel的一个变体,通常用作下拉菜单。它结合了树的层次结构和菜单的功能,用户可以通过选择不同的菜单节点来执行相应的操作。这种设计使得复杂的操作结构变得更加直观和易用。 3....
在ExtJS5中,树形菜单(Tree Menu)是一种常见的UI组件,它允许用户以层次结构的方式展示数据,非常适合用于目录浏览、文件系统导航或者复杂的组织结构展示。在本篇文章中,我们将深入探讨ExtJS5树形菜单的使用方法...
在ExtJS 4中,STOREMENU 是一种特定的功能,它将数据存储(Store)与菜单(Menu)相结合,提供了一种动态创建菜单项的方法,这些菜单项可以根据存储的数据进行更新。这种功能在需要根据用户权限或实时数据动态展示...
带有 PHP 的 ExtJS 动态菜单这是使用 PHP 的 ExtJS 动态菜单示例,我的意思是使用 PHP,但它可以用任何后端语言完成。 此存储库包含 Ext 项目 5.1 版的“app”文件夹。 菜单由“menu.php”文件定制。 如下: <?...
在EXT JS库中,下拉菜单(Dropdown Menu)是一种常见的组件,用于提供多个选项供用户选择。EXT JS是一个强大的JavaScript库,专为构建富客户端Web应用程序而设计,它提供了丰富的UI组件和数据绑定机制。然而,从标题...
在ExtJS4.2中,我们可以使用`Ext.menu.Menu`类来创建菜单,并通过监听事件或异步请求来更新菜单内容。例如,我们可以通过以下步骤实现动态菜单: 1. 创建基础菜单结构,定义菜单项。 2. 使用`itemId`或`id`为每个...
首先,EXTJS的组件库包含了各种各样的UI元素,如窗口(Window)、面板(Panel)、菜单(Menu)、按钮(Button)等,这些都是构建桌面系统的基础。例如,我们可以使用窗口来模拟桌面的快捷方式,面板则可以用来创建...
总结,ExtJS工具栏和菜单系统提供了一种灵活的方式来构建丰富的用户界面,结合按钮、分隔线和多级菜单,可以创建出满足各种需求的交互式Web应用。通过理解这些基本概念和使用方法,开发者可以高效地构建出具有专业...
然后,通过阅读教程,逐步学习每个组件的使用方法,例如如何创建窗口(Window)、按钮(Button)、菜单(Menu)等。实践环节非常关键,尝试编写自己的实例,模仿并扩展已有的例子,将理论知识转化为实际技能。最后,...
该菜单在网页设计中非常常见,它不仅可以提高用户体验,还能使页面布局更加美观、合理。 #### 二、关键技术点分析 ##### 2.1 HTML结构 HTML是构建网页的基础,本案例中的HTML结构清晰地定义了导航栏的各项元素。...
5. **首页左菜单**:EXTJS的导航组件,如`Ext.menu.Menu`和`Ext.toolbar.Toolbar`,可以用来创建复杂的导航结构。在本项目中,左侧菜单可能使用了这些组件,提供多级菜单,允许用户在应用的不同部分之间导航。 6. *...
工具栏(Toolbar)和菜单(Menu)在用户界面中起到辅助操作的作用。学习如何创建和定制这些元素,可以提供丰富的交互功能,如按钮、下拉菜单、分隔符等。 八、拖放功能 ExtJS 2.0支持拖放操作,允许用户通过鼠标...