Panel Layout issue, inconsistent width while toggling the collapsible icon on panels

[uday_sencha]

When panels used inside Panels, inner panels width was not consistent while toggling the collapsible icon. Here I am attaching the code, consists of two panels one with form fields and other contains a grid.
Issues:
Horizontal scroll was seen when I first load the page
Panels width were not consistent while toggling the collapsible icon
Thanks

[mitchellsimoens]

It is easier to help if you just use
tags.

[CODE]Ext.QuickTips.init();

Ext.create('Ext.data.Store', {
storeId:'detailsstore',
fields:['name', 'description'],
data:[
{ "name":"Name", "description":"Description"},
{ "name":"Name", "description":"Description"},
{ "name":"Name", "description":"Description"},
{ "name":"Name", "description":"Description"},
{ "name":"Name", "description":"Description"},
{ "name":"Name", "description":"Description"},
{ "name":"Name", "description":"Description"},
{ "name":"Name", "description":"Description"},
{ "name":"Name", "description":"Description"},
{ "name":"Name", "description":"Description"},
{ "name":"Name", "description":"Description"},
{ "name":"Name", "description":"Description"},
{ "name":"Name", "description":"Description"},
{ "name":"Name", "description":"Description"},
{ "name":"Name", "description":"Description"},
{ "name":"Name", "description":"Description"},
{ "name":"Name", "description":"Description"},
{ "name":"Name", "description":"Description"},
{ "name":"Name", "description":"Description"},
{ "name":"Name", "description":"Description"},
{ "name":"Name", "description":"Description"},
{ "name":"Name", "description":"Description"},
{ "name":"Name", "description":"Description"},
{ "name":"Name", "description":"Description"},
{ "name":"Name", "description":"Description"},
{ "name":"Name", "description":"Description"},
{ "name":"Name", "description":"Description"},
{ "name":"Name", "description":"Description"},
{ "name":"Name", "description":"Description"},
{ "name":"Name", "description":"Description"},
{ "name":"Name", "description":"Description"},
{ "name":"Name", "description":"Description"},
{ "name":"Name", "description":"Description"},
{ "name":"Name", "description":"Description"},
{ "name":"Name", "description":"Description"},
{ "name":"Name", "description":"Description"},
{ "name":"Name", "description":"Description"},
{ "name":"Name", "description":"Description"},
{ "name":"Name", "description":"Description"},
{ "name":"Name", "description":"Description"},
{ "name":"Name", "description":"Description"},
{ "name":"Name", "description":"Description"},
{ "name":"Name", "description":"Description"},
{ "name":"Name", "description":"Description"},
{ "name":"Name", "description":"Description"},
{ "name":"Name", "description":"Description"},
{ "name":"Name", "description":"Description"},
{ "name":"Name", "description":"Description"}
]
});

var grid = Ext.create('Ext.grid.Panel', {
store: Ext.data.StoreManager.lookup('detailsstore'),
forceFit:true,
autoScroll: true,
columns: [
{text: 'Name', dataIndex:'name' },
{text: 'Description', dataIndex:'description'}
],
viewConfig: {

}
});

Ext.create('Ext.container.Viewport', {
layout: 'auto',
autoScroll:true,
items:[
{
xtype:'form',
title: 'Multiple panel holder',
ui:'default',
margin:0,
bodyPadding: 10,
layout:'anchor',
defaultType:'textfield',
defaults:{
anchor:'100%'
},
fieldDefaults:{
labelWidth:200,
labelPad:20
},
items:[
{
xtype:'panel',
ui:'default',
title:'Panel 01',
margin:'0 0 10 0',
bodyPadding: 10,
layout:'anchor',
autoScroll:true,
collapsible:true,
items:[
{
xtype:'textfield',
name:'name',
fieldLabel: 'Name',
value:''
},
{
xtype:'textfield',
name:'description',
fieldLabel: 'Description',
width:550,
value:''
}
]
},
{
xtype:'panel',
title:'Panel 02',
ui:'default',
margin:0,
bodyPadding:10,
collapsible:true,
collapsed:false,
items:[
{
xtype: 'panel',
ui:'default',
//margin:'0 0 0 0',
layout: 'fit',
items:[grid]
}
]
}

],
dockedItems: [{
xtype: 'toolbar',
ui:'default',
dock: 'bottom',
items: [
'->',
{
xtype:'button',
ui:'default',
tooltip:'Save',
text: 'Save'

},
{
xtype:'button',
ui:'default',
tooltip:'Cancel',
text: 'Cancel'
}
]
}]
}
],
renderTo: Ext.getBody()
});

[mitchellsimoens]

I'm trying to toggle the collapse of both panels but not seeing any unexpected behavior. Everything looks great when I collapse and expand using 4.0.7 and 4.1.0 RC2. How can I reproduce?

[scottmartin]

Please try the following code:



Ext.onReady(function() {

Ext.define('MyViewport', {
extend: 'Ext.container.Viewport',

layout: {
align: 'stretch',
type: 'vbox'
},

initComponent: function() {
var me = this;

Ext.applyIf(me, {
items: [
{
xtype: 'form',
height: 101,
bodyPadding: 10,
title: 'My Form',
items: [
{
xtype: 'textfield',
fieldLabel: 'Label',
anchor: '100%'
},
{
xtype: 'textfield',
fieldLabel: 'Label',
anchor: '100%'
}
]
},
{
xtype: 'gridpanel',
collapsible: true,
title: 'My Grid Panel',
flex: 1,
columns: [
{
xtype: 'gridcolumn',
dataIndex: 'string',
text: 'String'
},
{
xtype: 'numbercolumn',
dataIndex: 'number',
text: 'Number'
},
{
xtype: 'datecolumn',
dataIndex: 'date',
text: 'Date'
},
{
xtype: 'booleancolumn',
dataIndex: 'bool',
text: 'Boolean'
}
],
viewConfig: {

}
}
]
});

me.callParent(arguments);
}

});

});

Ext.create('MyViewport', {
..
});



In reviewing your code, you were over nesting your grid in another panel.
The grid is a panel itself, so there is no need to place it inside another panel

Regards,
Scott.

[uday_sencha]

Thanks for your suggestions mitchellsimoens, here i am attaching gif files for inconsistent widths of panels. I am using 4.0.7 version, it is reproducible still.