EXTJS树形菜单

树节点的定义如下：

var node = new Ext.tree.TreeNode(...);

var root = new Ext.tree.TreeNode({
			text : '系统说明',
			url : 'pagesExt/about.jsp',
			expanded : true//默认展开根节点
		});
		var node1 = new Ext.tree.TreeNode({
			text : '书籍类型维护',
			url : 'bookext.do?method=showBookTypeList'
		});
		var node2 = new Ext.tree.TreeNode({
			text : '书籍维护',
			url : 'bookext.do?method=showBookList'
		});
		root.appendChild(node1);//添加子节点
		root.appendChild(node2);//添加子节点

Ext.TreePanel 的使用：
TreePanel配置参数
1.animate:true//展开,收缩动画,false时,则没有动画效果
2.autoHeight:true//自动高度,默认为false
3.enableDrag:true//树的节点可以拖动Drag(效果上是),注意不是Draggable
4.enableDD:true//不仅可以拖动,还可以通过Drag改变节点的层次结构(drap和drop)
5.enableDrop:true//仅仅drop
6.lines:true//节点间的虚线条
7.loader:Ext.tree.TreeLoader//加载节点数据
8.root:Ext.tree.TreeNode//根节点
9.rootVisible:false//false不显示根节点,默认为true
10.trackMouseOver:false//false则mouseover无效果
11.useArrows:true//小箭头


TreeNode的基本配置参数:
hrefTarget:"mainFrame"//打开节点链接地址默认为blank,可以设置为iframe名称id,则在iframe中打开
1.checked:false//true则在text前有个选中的复选框,false则text前有个未选中的复选框,默认没有任何框框
2.expanded:fasle//展开,默认不展开
3.href:"http:/www.cnblogs.com"//节点的链接地址
4.hrefTarget:"mainFrame"//打开节点链接地址默认为blank,可以设置为iframe名称id,则在iframe中打开
5.leaf:true//叶子节点,看情况设置
6.qtip:"提示"//提示信息,不过要Ext.QuickTips.init();下
7.text:"节点文本"//节点文本
8.singleClickExpand:true//用单击文本展开,默认为双击

var menu = new Ext.tree.TreePanel({
			border : false,
			root : root,
			hrefTarget : 'mainContent',
			listeners : {
				click : function(node,e){
					mainPanel.load({
						url:node.attributes.url,
						callback : function(){
							mainPanel.setTitle(node.text);
						},
						scripts: true
					});
				}
			}
			,
			tbar : [
				'皮肤选择：',
				{
					xtype : 'themeChange',
					width : 80,
					listWidth : 80
				},
				'->'
			]
		});	

Ext.Viewport：代表浏览器窗口的整个显示区域，将document body作为渲染对象，它会根据浏览器窗口的大小自动调整自身的尺寸。
在一个页面中只允许出现一个Viewport实例，没有提供对滚动条的支持。



代码如下：

    	new Ext.Viewport({
			title : 'Ext.Viewport示例',
			layout:'border',//表格布局
			items: [{
				title : '简易书籍管理系统ExtJs版',
				collapsible: true,
				html : '<br><center><font size = 6>简易书籍管理系统</font></center>',
				region: 'north',//指定子面板所在区域为north
				height: 100
			},{
				title : '功能菜单',
				items : menu,
				split:true,
				collapsible: true,
				region:'west',//指定子面板所在区域为west
				width: 150
			},{
				title: '系统说明',
				contentEl : 'aboutDiv',
				collapsible: true,
				id : 'mainContent',
				region:'center'//指定子面板所在区域为center
			}]
		});

评论

1 楼 itf2008 2012-10-11  

Ext.override(Ext.tree.TreeNodeUI, {
onDblClick : function(e) {
e.preventDefault();
if (this.disabled) {
return;
}
if (this.checkbox) {
this.toggleCheck();
}
if (!this.animating && this.node.hasChildNodes()) {
var isExpand = this.node.ownerTree.doubleClickExpand;
if (isExpand) {
this.node.toggle();
};
}
this.fireEvent("dblclick", this.node, e);
}
});


这样就可以了