2012-03-30 14 views
0

子エレメントの高さが大きく、親エレメントの「minHeight」が設定されている場合、コンテナが子アイテムの高さに応じて調整する方法を教えてください。現在、テキストを含む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 }); 
}); 

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" />' 
    }] 
}); 

何かが不明である場合は、私に尋ねることを躊躇しないでください。不明なことをもっと詳しく説明しようと思います。

ご協力いただきありがとうございます。

答えて

0

OK私はExjJSを使ったことがないので、JSラッパーの使い方に慣れていませんが...似たようなことをしたときに遭遇した奇妙なものがCSSとオーバーフローです。

コンテナdivのCSSで次のように設定してみてください。 、不気味、子供が浮いている場合でも、最も高い子要素の高さ...にコンテナの高さを拡大縮小します

height: auto; 
overflow: hidden; 

関連する問題