плавать компонент поверх родительского компонента в extjs

Question

Я задал этот вопрос раньше, но, возможно, из-за непонимания, никто не ответил на это правильно. Я пытаюсь иметь toolbar (или что-то еще, что вы хотите порекомендовать) на событие mouseenter родительского контейнера.

Прямо сейчас, я toolbar отображается в нижней части родительского контейнера, изменяя размер container2, который имеет flex: 1.

Вот мой код:

var hContainer = []; //adding many blocks to this dynamically 
hContainer.push({ 
    xtype: 'panel', 
    flex:1,    
    layout: {type:'vbox',align:'stretch'},      
    items:[{ 
     xtype: 'container', 
     height: 10, 
     html: 'hello' 
    }, 
    { 
     xtype: 'container', 
     flex: 1 
    }]    
})   

, а затем на mouseenter случае родительского контейнера, т.е.. panel добавив следующую переменную примерно так: parentContainer.add(upperController).

var upperController = {                
    xtype: 'toolbar',                 
    defaultAlign: 'tl', //no effect at all                 
    items: ['->',{                
     xtype: 'button',                
     text: '+'                
    }]             
} 

Answer 1

Если бы это было мне, я бы сделать следующее: Контейнер 1 и 2 контейнера есть позволяет говорить flex: 1 и flex: 2, чтобы определить их высоту.

Получить контейнер 1, чтобы вести себя как контейнер и установить дополнительный layout: 'vbox', так что высота контейнера 1 останется неизменной из-за flex: 1 на родительском контейнере.

Затем вы можете добавлять предметы в контейнер 1 без изменения его высоты, так как flex этих детей (предметов) определит высоту этих детей (предметов).