Layout 调整容器的高度

Layout 调整容器的高度,layout,extjs,Layout,Extjs,当子元素的高度大于其父元素配置的“最小高度”时,如何实现容器将相应地调整子项目的高度?目前,包含文本的div的内容将被剪切。请看一下我的代码 con_notification = Ext.create('Ext.container.Container', { id: 'con_notification', border: true, layout: { type:'vbox', align: 'center' }, styl

当子元素的高度大于其父元素配置的“最小高度”时,如何实现容器将相应地调整子项目的高度?目前,包含文本的div的内容将被剪切。请看一下我的代码

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 });
});
con_notification=Ext.create('Ext.container.container'{
id:“con_通知”,
边界:是的,
布局:{
类型:'vbox',
对齐:“居中”
},
风格:{
zIndex:'999999'
},
renderTo:Ext.getBody()
});
con_notification.add(Ext.create('rmt.view.NotificationContainer');
con_通知。hide();
con_notification_box=Ext.getCmp('con_notification-box');
con_notification_box.getEl().setStyle(con_notification_box_success);
con_通知_box.items.items[0]。更新(Lorem ipsum door sit amet,consetetur sadipsing eliter,sed diam nonumy eirmod temporal invidunt ut labour et dolore magna aliquyam erat,sed diam voluptua。在vero eos et accusam et just duo dolores et ea resubm。Stet clita kasd gubergren,无海takimata sanctus des tom ipsum door sit amet,consetut。Lorem Ipscin,consetur sadipscing elitr说,我们的工作和生活都是临时的,我们的工作和生活都是临时的。在vero eos et accusam et justo duo dolores et ea rebum.Stet clita kasd gubergren,没有海洋,没有海洋,没有海洋,也没有海洋;
con_notification_box.doLayout();
con_notification.getEl().slideIn('t'{
放松:“放松”,
持续时间:1000
});
Ext.getCmp('con_application-close').getEl().on('click',function()){
con_notification.getEl().slideOut('t',{duration:1000});
});
rmt.view.notificationContainer:

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" />'
    }]
});
Ext.define('rmt.view.NotificationContainer'{
扩展:“Ext.container.container”,
id:“con_通知框”,
边界:是的,
宽度:500,
身高:75,
风格:{
边框:“1px实心”,
边界半径:“3px”,
填充:“15px 25px 10px 50px”,
背景重复:“不重复”,
背景位置:“10px 4px”,
颜色:“#444”,
boxShadow:'0 1px 3px rgba(0,0,0,0.1),0 1px rgba(255255,0.4)插图',
wordBreak:“全部中断”,
wordWrap:“断开单词”,
背景颜色:“#cfe6fc”,
背景图片:“url(assets/info.png)”,
边框颜色:“#a4c8f5”,
zIndex:99999
},
项目:[{
xtype:'容器',
html:“在此处插入您的信息文本。

” },{ xtype:'容器', id:“con_应用程序关闭”, cls:“通知关闭”, html:' }] });
如果有什么不清楚的地方,请尽管问我。我会尽量向你详细解释不清楚的地方


非常感谢您的支持!

好的,我从来没有使用过ExjJS,所以我不熟悉使用的JS包装器,但是……在做类似的事情时,我遇到了一个奇怪的缺点,那就是CSS和溢出

尝试在CSS中为容器div设置以下内容

height: auto;
overflow: hidden;
奇怪的是,这会将容器的高度缩放到最高子元素的高度……即使子元素是浮动的