在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将确定这些子项（项目）的高度。