javascript - 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);
    }
}

所有其他面板的位置都是从您的列布局中自动管理的。