ExtJs4-Ext.layout.container.Accordion实现左菜单

效果图


Js代码

/**
 * 程序主入口
 */
Ext.onReady(function() {
			/**
			 * 上,panel.Panel
			 */
			this.topPanel = Ext.create('Ext.panel.Panel', {
						region : 'north',
						height : 55
					});
			/**
			 * 左,panel.Panel
			 */
			this.leftPanel = Ext.create('Ext.panel.Panel', {
						region : 'west',
						title : '导航栏',
						width : 230,
						layout : 'accordion',
						collapsible : true
					});
			/**
			 * 右,tab.Panel
			 */
			this.rightPanel = Ext.create('Ext.tab.Panel', {
						region : 'center',
						layout : 'fit',
						tabWidth : 120,
						items : [{
									title : '首页'
								}]
					});
			/**
			 * 组建树
			 */
			var buildTree = function(json) {
				return Ext.create('Ext.tree.Panel', {
							rootVisible : false,
							border : false,
							store : Ext.create('Ext.data.TreeStore', {
										root : {
											expanded : true,
											children : json.children
										}
									}),
							listeners : {
								'itemclick' : function(view, record, item,
										index, e) {
									var id = record.get('id');
									var text = record.get('text');
									var leaf = record.get('leaf');
									if (leaf) {
										alert('id-' + id + ',text-' + text
												+ ',leaf-' + leaf);
									}
								},
								scope : this
							}
						});
			};
			/**
			 * 加载菜单树
			 */
			Ext.Ajax.request({
						url : 'MenuTreeServlet',
						success : function(response) {
							var json = Ext.JSON.decode(response.responseText)
							Ext.each(json.data, function(el) {
										var panel = Ext.create(
												'Ext.panel.Panel', {
													id : el.id,
													title : el.text,
													layout : 'fit'
												});
										panel.add(buildTree(el));
										leftPanel.add(panel);
									});
						},
						failure : function(request) {
							Ext.MessageBox.show({
										title : '操作提示',
										msg : "连接服务器失败",
										buttons : Ext.MessageBox.OK,
										icon : Ext.MessageBox.ERROR
									});
						},
						method : 'post'
					});
			/**
			 * Viewport
			 */
			Ext.create('Ext.container.Viewport', {
						layout : 'border',
						renderTo : Ext.getBody(),
						items : [this.topPanel, this.leftPanel, this.rightPanel]
					});
		});

后台返回数据
{success:true,data:[{id:1,text:'我的办公桌',leaf:false,children:[{id:3,text:'二级(1)',leaf:true},{id:4,text:'二级(2)',leaf:true},{id:5,text:'二级(3)',leaf:true},{id:6,text:'二级(4)',leaf:false,children:[{id:7,text:'三级(1)',leaf:true},{id:8,text:'三级(2)',leaf:true}]}]},{id:2,text:'系统管理',leaf:false,children:[{id:9,text:'用户管理',leaf:true}]}]}

评论

1 楼 zhouxiaowen 2011-08-19