PDA

View Full Version : Issue with tab panels while restore and maximize browser



nawin.muttineni@gmail.com
22 Oct 2013, 10:15 PM
Hi,
I have tab panel with three tabs, each tab contains one form panel and one grid panel.
It looks fine but the problem is, when i restore the browser the width of the form & grid panels are reduced to browser's width.
when i maximize the browser the width of the form panel increased but not the grid panel's width.

I'm using Google chrome browser.
My extjs version is 4.0.2.

Here is code for tab panel


var myTabPanel = Ext.create('Ext.tab.Panel', {
plain: true,
border:false,
defaults: {
listeners: {
activate: function(tab, eOpts) {
alert(tab.title);
}
}
},
items : [ {
title : 'Employees',
items : [ this.fomPanel1,
this.gridPanel1
]
}, {
title : 'Immigrations',
items : [ this.fomPanel2,
this.gridPanel2
]
},{
title : 'Certifications',
items : [ this.fomPanel3,
this.gridPanel3
]
}]
});


Here is panels in 1st tab


Ext.define('tz.ui.MyFormPanel', {
extend: 'Ext.form.Panel',
bodyPadding: 10,
title: '',
frame:true,
anchor:'98%',
autoScroll:true,


initComponent: function() {
var me = this;

me.items = [{
.........................................................
.........................................................
.........................................................



}];
me.callParent(arguments);
}
});

Ext.define('tz.ui.MyGridPanel', {
extend: 'Ext.grid.Panel',
title: '................',
frame:true,
anchor:'100%',
height:490,
width :'100%',
initComponent: function() {
var me = this;
me.store = myExampleStore;


me.columns = [
{
.........................................................
.........................................................
.........................................................
}
];
me.viewConfig = {
stripeRows: true
};
me.dockedItems = [
{
.........................................................
.........................................................
.........................................................
}

];
me.callParent(arguments);
}

});


Snap shots :

4649246493

scottmartin
24 Oct 2013, 12:24 PM
You should specify a layout for your parent container .. eg: layout: 'fit'

Scott.

nawin.muttineni@gmail.com
31 Oct 2013, 10:00 PM
Thanks Mr. scottmartin,

This is fixed with layout: 'fit'

Here is my fixed code of tab panel


var myTabPanel = Ext.create('Ext.tab.Panel', {
plain: true,
border:false,
layout:'card',
defaults: {
listeners: {
activate: function(tab, eOpts) {
alert(tab.title);
}
}
},
items : [ {
title : 'Employees',
layout:'fit',
items : [ this.fomPanel1,
this.gridPanel1
]
}, {
title : 'Immigrations',
layout:'fit',
items : [ this.fomPanel2,
this.gridPanel2
]
},{
title : 'Certifications',
layout:'fit',
items : [ this.fomPanel3,
this.gridPanel3
]
}]
});