在extjs中，将组件浮动在父组件之上

我以前问过这个问题，但可能是因为缺乏理解，没有人回答正确。我正在尝试在父容器的

mouseenter

事件上设置一个

工具栏（或者您希望推荐的其他工具）

现在，在父容器的底部可以看到
工具栏
，可以调整
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
事件上，即
面板
添加如下变量
parentContainer.add（upperController）

如果是我，我会做以下操作：容器1和容器2都有
flex:1
和
flex:2
来确定它们的高度

使容器1的行为类似于容器，并设置额外的
布局：“vbox”
，以便由于父容器上的
flex:1
，容器1的高度保持不变

然后，您可以将项目添加到容器1而不更改其高度，因为这些子项（项目）的
flex
将决定这些子项（项目）的高度。
为什么不将其设为默认值，只更改其可见性？@Rob我不希望它出现在布局中。它应该是出了布局，如我在图像中所示。（在
container1
上方）您的意思是将项目添加到
container 1
而不是添加到
parent container
？是的，但这只是因为您希望
container 1
位于工具栏后面，这对我来说没有多大意义。你为什么要这样？是的，这很有效。即使将
工具栏
添加到
容器1
中，内容也在后面。谢谢但是否仍要附加到父容器？（因为我只是想知道它）当然这是可能的，（我一直认为它只是一些html和css），但这可能意味着打破
舒适区
，开始使用
css
和
z-index
。当涉及到类似的东西时，我总是有点害怕，因为它通常会导致css规则的冲突，并且不得不强制css行为。这最终会在你的应用程序的其他部分产生意想不到的结果（这只是我的经验）。我不确定css将如何与其他子容器的flex值一起工作。不过我在寻找纯extjs的答案。现在你的帖子解决了我的问题。我将等待其他答案一段时间。
var upperController = {                                                              
   xtype: 'toolbar',                                                                  
   defaultAlign: 'tl',  //no effect at all                                                                 
   items: ['->',{                                                               
       xtype: 'button',                                                             
       text: '+'                                                              
   }]                                                   
}