extjs tabpanel动态添加panel
index = Ext.extend(Ext.Viewport,{ center : new Ext.TabPanel({ id : 'mainview', region : 'center', activeTab : 0, width : 600, height : 250, minTabWidth: 115, tabWidth:135, enableTabScroll:true, split : true, layoutOnTabChange:true, tabPosition : 'top', resizeTabs:true, defaults : {autoScroll:true}, plugins : new Ext.ux.TabCloseMenu(), items :{ id : 'start-panel', title : 'MainView', iconCls : 'tabs', layout : 'fit', bodyStyle : 'padding:25px', html : '<img src="../images/bg.jpg"/>' } }), constructor : function(){ //var clock = new Ext.Toolbar.TextItem(''); index.superclass.constructor.call(this,{ layout : 'border', items : [{ region : 'north', xtype : 'panel', height : 25, layout : 'column', border : false, items : [{ columnWidth : 1, border : false, layout : 'fit', items : [{ xtype : 'panel', id : 'logo-header', border : false, tbar : [ { text : currentUser },{ text : new Date().format('Y年m月d日') },'->',{ text:'注销' ,iconCls:'logout' ,handler:function(){ Ext.Msg.show({ title:'注销系统', msg: '提示:注销系统前请注意保存数据,确定要注销吗?', buttons: Ext.Msg.YESNO, fn: function(btn){ if(btn=='yes'){ Ext.Ajax.request({ url : 'logout.action', success : function() { location = '../main/index.jsp'; }, failure : function() { Ext.Msg.show({ title : '错误提示', msg : '退出系统失败!', icon : Ext.Msg.ERROR, buttons : Ext.Msg.OK }); } }); } } }); } } ] }] }] },{ region : 'west', xtype : 'panel', layout : 'accordion', title : '计划排产管理系统', split : true, minSize : 200, maxSize : 250, //margins : '2 0 5 5', collapsible : true, collapseMode:'mini', width : 200, layoutConfig : { animate : true }, listeners : { 'expand' :{ fn : this.onExpandPanel, scope : this }, 'collapse' :{ fn : this.onCollapsePanel, scope : this } }, items : [{ title : '导航栏', iconCls : 'icon-nav', xtype : 'treepanel', autoScroll : true, border : false, id : 'treepanel', tools : [{ id : 'refresh', handler : this.onRefreshTreeNodes, scope : this },{ id:'expanded', tooltip:'展开', handler:function(){ Ext.getCmp('treepanel').expandAll(); } }], loader : new Ext.tree.JsonPluginTreeLoader({ url : 'findTree.action' }), root : new Ext.tree.AsyncTreeNode({text : '菜单', expanded:true}), listeners : { 'click' : { fn :this.onTreeNodeClick, scope : this }, 'afterrender':{ fn : this.onExpandAll, scope : this } } }] },this.center] }) }, addTab : function(name,id,css,link){ var tabId = 'tab_'+id; var tabTitle = name; var tabLink = link; var centerPanel = Ext.getCmp('mainview'); var tab =centerPanel.getComponent(tabId); var subMainId = 'tab_'+id+'_main'; if(!tab){ var newTab = centerPanel.add(new Ext.Panel({ id : tabId, title : tabTitle, iconCls : 'tabs', border : false, closable : true, layout : 'fit', listeners : { activate : this.onActiveTabSize, scope : this } })); centerPanel.setActiveTab(newTab); newTab.load({ url : tabLink, method : 'post', params : { subMainId : subMainId }, scope : this, discardUrl : true, nocache : true, // 不缓存 text : '加载中,请稍候...', timeout : 3000, scripts : true }); }else{ centerPanel.setActiveTab(tab); } }, onActiveTabSize : function(){ var w = Ext.getCmp('mainview').getActiveTab().getInnerWidth(); var h = Ext.getCmp('mainview').getActiveTab().getInnerHeight(); var Atab = Ext.getCmp('mainview').getActiveTab().id; var submain = Ext.getCmp(Atab+'_main'); if(submain){ submain.setWidth(w); submain.setHeight(h); } }, onRefreshTreeNodes : function(){ Ext.getCmp('treepanel').root.reload(); }, onTreeNodeClick : function(_node,_e){ if(_node.isLeaf()){ var _nodeText = _node.attributes.text; var _nodeLink = _node.attributes.url; var _nodeId = _node.attributes.id; this.addTab(_nodeText,_nodeId,'_css',_nodeLink) } }, onExpandPanel : function(_nowCmp){ this.onActiveTabSize(); }, onCollapsePanel : function(_nowCmp){ this.onActiveTabSize(); }, onExpandAll : function(){ Ext.getCmp('treepanel').expandAll(); }})?