`
姜中秋
  • 浏览: 86163 次
  • 性别: Icon_minigender_1
社区版块
存档分类
最新评论

Extjs4 tree右键菜单实现

阅读更多
直接上代码
var tree = Ext.create('Ext.tree.Panel', {
		title : 'Simple Tree',
		width : 200,
		height : 250,
		queryMode : 'local',
		id : 'treePanel-id',
		store : store,
		rootVisible : false,
		listeners : {
			'itemclick' : function(view, record, items, index, e) {
				alert(items);
				if (record.get('leaf') == false) {
					return;
				} else {
					Ext.MessageBox.show({
								title : '节点操作',
								msg : 'itemclick:index=' + index + ",text="
										+ record.data.text,
								icon : Ext.MessageBox.INFO
							});
				}
			},
			'itemcontextmenu' : function(menutree, record, items, index, e) {
				e.preventDefault();
				e.stopEvent();
				var obj = record;

				while (!obj.parentNode.isRoot()) {
					obj = obj.parentNode;
				}
				var rootId = obj.getId();
				if (rootId != 180 && rootId != 190) {
					return;
				} else {
					var nodemenu = new Ext.menu.Menu({
						floating : true,
						items : [{
							text : "添加文件夹",
							// icon:'images/add.gif',
							// iconCls:'leaf',
							handler : function() {
								if (record.get('leaf') == false) {
									Ext.MessageBox.prompt("标题", "請輸入",
											function(btn, text) {
												if (btn == "ok") {
													record.appendChild({
																text : text,
																id : new Date()
																		.getTime(),
																expanded : true
															});
												}
											}, this, false, // 表示文本框为多行文本框
											"新添加文件夹");
								}

							},
							listeners : {
								render : function(com) {
									if(record.get('leaf') == true)
									com.setVisible(false);
								}
							}
						}, {
							text : "添加子节点",

							handler : function() {
								Ext.MessageBox.prompt("标题", "請輸入",
										function(btn, text) {
											if (btn == "ok") {
												record.appendChild({
															text : text,
															id : new Date()
																	.getTime(),
															expanded : true,
															leaf : true
														});
											}
										}, this, false, // 表示文本框为多行文本框
										"新添加子节点");
							},
						listeners : {
							render : function(com) {
								if(rootId==190||record.get('leaf') == true)
								com.setVisible(false);
							}
						}
						}, {
							text : "编辑",
							// icon:'images/leaf.gif',
							// iconCls:'leaf',
							handler : function() {
								Ext.MessageBox.prompt("标题", "請輸入",
										function(btn, text) {
											if (btn == "ok") {
												record.data.text= text;
														
											}
										}, this, false, // 表示文本框为多行文本框
										record.data.text);
							}
						}, {
							text : "删除",
							// icon:'images/delete.gif',
							// iconCls:'leaf',
							handler : function() {
								record.remove(record);
							}
						}]
					});
					nodemenu.showAt(e.getXY());
				}

			}
		}
	});



分享到:
评论
3 楼 lzbcrs 2014-11-06  
发个完整的行不 误人子弟 简单的demo 还发的不全 无语了
2 楼 hamlzf 2012-09-10  
好像不能用啊
1 楼 ashou1986 2012-06-16  

相关推荐

    ExtJS 自定义树组件 节点的操作 搜索 右键菜单

    功能: 1.实现ExtJS tree 节点右键菜单 实现增删查. 2.实现针对实体数据的动态搜索. 3.代码命名规范,简单易懂. 4.支持IE 9,FF 19.0.2. 5.将文件解压至ext包example任意组件文件夹即可浏览效果.

    Extjs tree实例【源代码】

    3. 右键菜单 4. 节点增、删、改操作 ....... 后台是java struts1。 本例旨在说明extjs的tree操作,后台操作很简陋。给入门同学一个简单指导。 本例,存在几个明显的bug,但不影响本意,见谅。 需要C#无bug版的同学,...

    精通JS脚本之ExtJS框架.part2.rar

    10.3 右键菜单 10.4 修改节点的默认图标 10.5 从节点弹出对话框 10.6 节点提示信息 10.7 为节点设置超链接 10.8 树形的拖放 10.8.1 节点拖放的3种形式 10.8.2 叶子不能append 10.8.3 判断拖放的目标 10.8.4...

    精通JS脚本之ExtJS框架.part1.rar

    10.3 右键菜单 10.4 修改节点的默认图标 10.5 从节点弹出对话框 10.6 节点提示信息 10.7 为节点设置超链接 10.8 树形的拖放 10.8.1 节点拖放的3种形式 10.8.2 叶子不能append 10.8.3 判断拖放的目标 10.8.4...

    Ext Js权威指南(.zip.001

    7.5.11 树节点:ext.data.nodeinterface与ext.data.tree / 364 7.5.12 store的方法 / 366 7.5.13 store的事件 / 368 7.5.14 store管理器:ext.data.storemanager / 369 7.6 综合实例 / 369 7.6.1 远程读取json...

    Ext 开发指南 学习资料

    9.6. JsonView实现用户卡片拖拽与右键菜单 9.7. 下拉列表选择每页显示多少数据 10. 撕裂吧!邪魔外道与边缘学科。 10.1. dwr与ext整合 10.1.1. 无侵入式整合dwr和ext 10.1.2. DWRProxy 10.1.3. DWRTreeLoader 10.1.4...

    EXT教程EXT用大量的实例演示Ext实例

    9.6. JsonView实现用户卡片拖拽与右键菜单 9.7. 下拉列表选择每页显示多少数据 10. 撕裂吧!邪魔外道与边缘学科。 10.1. dwr与ext整合 10.1.1. 无侵入式整合dwr和ext 10.1.2. DWRProxy 10.1.3. DWRTreeLoader ...

    EXT2.0中文教程

    9.6. JsonView实现用户卡片拖拽与右键菜单 9.7. 下拉列表选择每页显示多少数据 10. 撕裂吧!邪魔外道与边缘学科。 10.1. dwr与ext整合 10.1.1. 无侵入式整合dwr和ext 10.1.2. DWRProxy 10.1.3. DWRTreeLoader 10.2...

    ExtAspNet v2.2.1 (2009-4-1) 值得一看

    -为TabStrip增加EnableTabCloseMenu属性,是否启用右键菜单,可用来关闭当前Tab和所有其他Tab。 -为NumberBox增加DecimalPrecision属性,用来控制小数点后的位数(需要设置NoDecimal="false")(feedback:zqmars)。...

    ExtAspNet_v2.3.2_dll

    -为TabStrip增加EnableTabCloseMenu属性,是否启用右键菜单,可用来关闭当前Tab和所有其他Tab。 -为NumberBox增加DecimalPrecision属性,用来控制小数点后的位数(需要设置NoDecimal="false")(feedback:zqmars)。...

    利用Ext Js生成动态树实例代码

    关键类 这里主要涉及Ext JS的两个类: Ext.tree.TreeNode Ext.menu.Menu 相关API可以参考:http://extjs.com/deploy/ext/docs/ 三. 代码示例 1. 先看一下测试页面 代码如下:<html> <head> <meta ...

Global site tag (gtag.js) - Google Analytics