PDA

View Full Version : Panel Disappears When Collapsed



Supial
19 Jan 2012, 7:39 PM
Greetings,
I've got a simple Viewport with a collapsible border panel. My problem is that when I collapse the border panel, the entire panel disapears and there is no way for me to expand it again. Below is a simple sample that illustrates the problem. I'm using version 4.0.7.



Ext.require([
'*'
]);

Ext.onReady(function() {
Ext.create('Ext.container.Viewport',{
id:'viewport',
layout:'border',
items: [{
region:'north',
id:'northbanner',
autoHeight:true,
html:'<H1>BANNER GOES HERE</H1>'
},{
region:'west',
id:'utilpanel',
minWidth:200,
maxWidth:400,
split:true
},{
region:'center',
id:'page'
}]
});

// This is done purposly as this is how my server needs to generate the code.
Ext.getCmp('page').add({
xtype:'panel',
id:'activities',
layout:'border',
border:true,
collapsible:true,
title:'My Activities test',
style:{padding:2},
height: 225,
items:[
{
xtype:'datepicker',
id:'alertsDate',
format: 'm/d/Y',
region: 'east',
disabledDatesText:'Disabled',
disabledDaysText:'Disabled',
minText:'The date in this field must be equal to or after {0}',
maxText:'The date in this field must be equal to or before {0}',
toYYYYMMDD: function() {
var me = this;
return me.getValue() != null ? (Ext.isDate(me.getValue()) ? Ext.Date.format(new Date(me.getValue()),'Ymd') : me.getValue()) : '';
}
},{
region: 'center',
id:'regc',
html: '<p>Grid</p>'
}
]
});
});


Any idea why this is occuring? Is it a bug or an issue with the code?

Thanks,
Marcel

friend
20 Jan 2012, 5:06 AM
The main problem is that you have no layout declared for the panel which acts as your center region. Your code sample works as expected with this modification:



},{
region:'center',
layout: 'fit',
id:'page'
}]


Also autoHeight: true is not supported by ExtJs 4.x.

Supial
23 Jan 2012, 7:31 AM
This only seems to work when the layout is set to 'fit'. If I use the following layout configuration, the panel still disapears when I collapse.



layout: {type:'table',columns:1,tableAttrs:{style:{width:'100%'}}},


This does seem like a bug. Also, I had thought that if you don't specify a layout the default 'auto' is used so therefore a layout config option is always set.

Thanks,
Marcel