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