ExtJs4-Ext.tab.Panel加右键关闭

效果图


Js代码

/**
 * 程序主入口
 */
Ext.onReady(function() {

	Ext.require(['Ext.panel.Panel', 'Ext.tab.Panel', 'Ext.tree.Panel',
			'Ext.data.TreeStore', 'Ext.container.Viewport',
			'Ext.ux.TabCloseMenu']);

	/**
	 * 上,panel.Panel
	 */
	this.topPanel = Ext.create('Ext.panel.Panel', {
				region : 'north',
				height : 55,
				contentEl : 'header'
			});
	/**
	 * 左,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',
				minTabWidth : 100,
				plugins : Ext.create('Ext.ux.TabCloseMenu', {
							closeTabText : '关闭当前页',
							closeOthersTabsText : '关闭其他页',
							closeAllTabsText : '关闭所有页'
						}),
				items : [{
							title : '首页'
						}]
			});

	/**
	 * 下,panel.Panel
	 */
	this.bottomPanle = Ext.create('Ext.panel.Panel', {
		region : 'south',
		height : 26,
		bbar : ['->', {
			xtype : 'combo',
			editable : false,
			labelAlign : 'right',
			emptyText : '更换皮肤',
			store : [['id_1', 'name_1'], ['id_2', 'name_2'], ['id_3', 'name_3']],
			queryMode : 'local',
			listeners : {
				'select' : function(combo, record, index) {
					if (combo.value != '') {
						alert(combo.value);
					}
				}
			}
		}]
	});

	/**
	 * 组建树
	 */
	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 : 'data/Tree.txt',
				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,
						this.bottomPanle]
			});
});

后台返回数据
{success:true,data:[{id:'father_1',text:'功能列表',leaf:false,children:[{id:'UserView',text:'用户管理',leaf:true}]}]}

评论

2 楼 Bactryki 2012-09-12  

        

1 楼 aason 2012-09-10  

正解，好用