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

我正试图实现类似这样的目标（），但我希望portlet能够调整大小

因此，我有一个Ext.TabPanel和一个Ext.layout.ColumnLayout布局。 所有项目均为面板（Ext.form.panel），带有：

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

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

i、 e.两个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);
    }
}

move:函数（thi、x、y、eOpts）{
如果（x！=0&&y！=0）
{
var cont=thi.getBubbleParent（）；
var xNew=thi.getPosition（）[0]；
var yNew=thi.getPosition（）[1]；
var-ind=0；
而（cont.items.items[ind].getBox（）.y+cont.items.items[ind].getBox（）.height

---

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

您是在扩展演示还是自己构建门户？我不是在扩展演示，我是从头开始开发的，因为（查看源代码）演示具有固定列数和大小的列布局，并且不允许使用可调整大小的面板。好吧，你知道你在这里要求很多，因为重叠是可拖动面板的预期功能。我不能为你提供代码。

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