整个页面是一个viewport
viewport中的“center”域里放的是一个tabPanel
tab panel 中有3个panel :tab1,tab2,tab3
tab3 中有3个items,其中有一个是gridpanel
gridpanel 中有个button,现在就是想通过点击这个button ,给tab3 动态添加一个panel 然后
然后调用tab3.doLayout(),结果没有更新,但是这个tab3确实已经加进去了这个panel ,就是不显示,
谁知道原因伐~~~
viewport中的“center”域里放的是一个tabPanel
tab panel 中有3个panel :tab1,tab2,tab3
tab3 中有3个items,其中有一个是gridpanel
gridpanel 中有个button,现在就是想通过点击这个button ,给tab3 动态添加一个panel 然后
然后调用tab3.doLayout(),结果没有更新,但是这个tab3确实已经加进去了这个panel ,就是不显示,
谁知道原因伐~~~
itemId:'spotsgrid',
height:400,
title: 'title1',
selModel: Ext.create('Ext.selection.CheckboxModel'),
store: Ext.data.StoreManager.lookup('simpsonsStore'),
columns:[
Ext.create('Ext.grid.RowNumberer'),
{header: '1111', dataIndex: 'name'},
{header: '222', dataIndex: 'name'},
{header: '333', dataIndex: 'email', flex:1}
],
bbar:{items:[{text:'button1',handler: function(){
alert(viewport.items.getAt(1).items.getAt(2).title);viewport.items.getAt(1).items.getAt(2).items.add(createSpotStatistic());
alert(viewport.items.getAt(1).items.getAt(2).items.items[2].title);
//viewport.items.getAt(1).items.getAt(2).items.items[2].show();
//viewport.items.getAt(1).items.getAt(2).items.items[2].doLayout();
//tabs.doLayout();
viewport.items.getAt(1).items.getAt(2).doLayout();
alert(Ext.getCmp('tab3').doLayout().layout);
//alert(tab3.items.length);
//tabs.doLayout();
//viewport.doLayout().show();
//alert(tab3.doLayout().items.length);
//spotsgrid.doLayout();
//tabs.doLayout();
//tab3.doLayout();
//tabs.items.getAt(2).items.getAt(3).show();
//Ext.getCmp('viewport').items.getAt(1).items.getAt(2).doLayout();
//alert(tab3.items.length);
//alert(Ext.getCmp('viewport').items.getAt(1).getActiveTab().items.add(createSpotStatistic()));
}},{text:'button2'},{text:'button3'},{text:'button4'}]},
dockedItems: [{
xtype: 'pagingtoolbar',
store: Ext.data.StoreManager.lookup('simpsonsStore'), // same store GridPanel is using
dock: 'bottom',
displayInfo: true
}]
});var tab1 = {
title: 'tab1',
bodyPadding: 10,
items:[form1]
};
var tab2 = {
title: 'tab2',
bodyPadding: 10,
html : 'tab2'
};
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
tab3 = Ext.create('Ext.panel.Panel',{
deferredRender:false,
id:'tab3',
layout: 'fit',
//xtype:'Ext.Component',
title: 'tab3',
// bodyPadding: 10,
items:[date,spotsgrid]
});
tabs = Ext.create('Ext.tab.Panel', {
width: 300,
height: 200,
activeTab: 0,
region:'center',
items: [tab1,tab2,tab3]
});
//tab3.items.add(createSpotStatistic());
//tabs.doLayout();
//alert(tab3.items.getAt(3));
//for(i in tabs.items){
//alert(tabs.items[i]);
//}
//tab3.add(date);
//Ext.getCmp('').add
//var test = tabs.items;
//alert(test.length);
//alert(test.prototype);
//tabs.add(tab3);
//alert(tabs.items[0].title);//test
//alert(tabs.items);
//alert(tabs.items.getAt(2).id);
//tabs.items[3] = tab3;
viewport = Ext.create('Ext.Viewport', {
id:'viewport',
layout:'border',
items:[
left, tabs,{
region:'north',
margins:'5 5 5 0',
cls:'ce',
bodyStyle:'background:#f1f1f1',
html:'<table width="100%"><tr><td align="center"><font class="title">111111</font></td></tr></table>'
},{
region:'south',
margins:'5 5 5 0',
cls:'ce',
bodyStyle:'background:#f1f1f1',
html:'<table width="100%"><tr><td align="center"><font class="title">1111</font></td></tr></table>'
}],
renderTo: document.body
});
}