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

我正在尝试实现这样的目标（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重叠。我想得到这个代替（不重叠）：



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

谢谢。

最佳答案

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

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

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

关于javascript - ExtJS列布局，移动可调整大小的面板而不会重叠，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/15068399/