ExtJS列布局，移动可调整大小的面板而不重叠

Question

我正在努力实现这样的目标（http://docs.sencha.com/ext-js/4-1/#!/example/portal/portal.html），但我希望portlet可以调整大小。

所以我有一个带有Ext.layout.ColumnLayout布局的Ext.TabPanel。 所有项目都是面板（Ext.form.Panel）：

resizable : true,
draggable:true,

具体来说，考虑到如下的初始情况

我希望能够将突出显示的portlet拖动到新位置，并让其他portlet为其腾出空间。不幸的是，我现在得到的是

即。两个portlet重叠。我希望得到这个（没有重叠）：

所以问题是：有没有办法在不要求列具有固定大小的情况下实现这一目标？

谢谢。

Answer 1

非常简单。 您所需要的只是处理移动事件，例如在自定义面板的控制器中：

 move:function( thi, x, y, eOpts ){
    if(x!=0 && y!=0)
    {
        var cont = thi.getBubbleParent();
        var xNew = thi.getPosition()[0];
        var yNew = thi.getPosition()[1];

        var ind = 0;
        while(cont.items.items[ind].getBox().y+cont.items.items[ind].getBox().height < yNew)
        {
            ind++;
        }
        while(cont.items.items[ind].getBox().x+cont.items.items[ind].getBox().width < xNew)
        {
            ind++;
        }
        thi.setPagePosition([(xNew-x),(yNew-y)]);
        cont.insert(ind,thi);
    }
}

所有其他面板的位置将从列布局自动管理。