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]});});