PDA

View Full Version : Adjust height of container



extjser12
1 Apr 2012, 10:56 PM
Hello together

How can I achieve that my container will adjust the height accordingly of the children items when the height of the children elements is larger then configured "minHeight" of their parent element? At present the content of the div which contains the text will be cutted. Please have a look at my code.


con_notification = Ext.create('Ext.container.Container', {
id: 'con_notification',
border: true,
layout: {
type:'vbox',
align: 'center'
},
style: {
zIndex: '999999'
},
renderTo: Ext.getBody()
});
con_notification.add(Ext.create('rmt.view.NotificationContainer'));
con_notification.hide();
con_notification_box = Ext.getCmp('con_notification-box');

con_notification_box.getEl().setStyle(con_notification_box_success);
con_notification_box.items.items[0].update('<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>');
con_notification_box.doLayout();
con_notification.getEl().slideIn('t', {
easing: 'easeOut',
duration: 1000
});

Ext.getCmp('con_application-close').getEl().on('click',function(){
con_notification.getEl().slideOut('t', { duration: 1000 });
});

rmt.view.NotificatonContainer:

Ext.define('rmt.view.NotificationContainer', {
extend: 'Ext.container.Container',
id: 'con_notification-box',
border: true,
width: 500,
minHeight: 75,
style: {
border: '1px solid',
borderRadius: '3px',
padding: '15px 25px 10px 50px',
backgroundRepeat: 'no-repeat',
backgroundPosition: '10px 4px',
color: '#444',
boxShadow: '0 1px 3px rgba(0, 0, 0, 0.1), 0 1px rgba(255,255,255,0.4) inset',
wordBreak: 'break-all',
wordWrap: 'break-word',
backgroundColor: '#cfe6fc',
backgroundImage: 'url(assets/info.png)',
borderColor: '#a4c8f5',
zIndex: 99999
},
items:[{
xtype: 'container',
html: '<p>Insert your information text here.</p>'
},{
xtype: 'container',
id: 'con_application-close',
cls: 'notification-close',
html: '<img src="assets/close.png" />'
}]
});


Thanks for your help in advance!

Kind regards
extjser12

mitchellsimoens
2 Apr 2012, 11:51 AM
Not all layouts support auto height. vbox is one of them.