PDA

View Full Version : Load panel to tab via ajax



tah_206207
8 Dec 2012, 2:20 PM
I want to load panel via ajax to one of tabPanel tabs in my web app, I do it by means of below code


var mainTabs = Ext.create('Ext.tab.Panel', {
layout: 'card',
defaults: {
split: true
},
items: [{
title: 'Layout Window',
closeAction: 'hide',
layout: {
type: 'border',
padding: 5
},
//anchor: '100%',
width:600,
height:600,
listeners: {
activate:function (tab) {


}
},
items: [{
region: 'west',
collapsible: true,
title: 'Starts at width 30%',
split: true,
width: '17%',
minWidth: 100,
minHeight: 140,
items: [historyTreePanel,propGrid]
},tabs]
},{
title: 'History',
//xtype:'panel',
html: 'Please Wait...',
id:'history-tab',
layout:'anchor',
default: {
anchor:'100%'
},
//iconCls: 'favorites',
//cls: 'card1',
listeners: {
activate:function (tab) {
}
},
loader: {
scripts: true,
autoLoad :true,
contentType: 'html',
failure : function(){
alert('failed');
},
url: '<?php echo Yii::app()->createUrl('history');?>'


}
}],
renderTo : Ext.getBody()
});

In the above code i load panel to tab by means of loader. Panel that should be added to 2nd tab is


var viewport = Ext.create('Ext.panel.Panel', {
layout: {
type: 'border',
padding: 5
},
defaults: {
split: true,
anchor:'100%'
},
width:1024,
height:600,
items: [{
region: 'west',
collapsible: true,
title: 'Starts at width 30%',
split: true,
width: '17%',
minWidth: 100,
minHeight: 140,
items: [show,treePanel,propGrid]
},tabs],
renderTo:Ext.getBody()
});

In the above code i use renderTo:Ext.gerBody() when i click on 2nd tab i can see panel in 2nd tab but it can't fill it's parent 2nd tab. After when i click 1st tab i see two panel in the window, i see 2nd tab panel below 1st tab panel. this problem showed in below picture
40666

other problem is that panel can't fill it's parent.
40667How can i fix these problems?