ExtJS列布局，移動可調整大小的面板不重疊

我試圖實現這樣的事情（http://docs.sencha.com/ext-js/4-1/#!/example/portal/portal.html），但我希望Portlet可以調整大小。ExtJS列布局，移動可調整大小的面板不重疊

所以我有一個Ext.TabPanel和Ext.layout.ColumnLayout佈局。所有的項目都是面板（Ext.form.Panel）其中：

resizable : true, 
draggable:true,

具體地，給定一個初始情況類似下面

initial situation

我想能夠拖動高亮顯示的門戶到一個新的位置，並讓其他portlet「爲其騰出空間」。不幸的是，我得到現在的問題是

real situation overlap

即兩個portlet重疊。我想獲得這個代替（無重疊）：

desired situation no overlap

所以，問題是：有沒有辦法來實現這一目標而無需列有一個固定的大小？

謝謝。

來源

2013-02-25 Marco

您是在擴展演示還是您自己構建門戶？ – A1rPun 2013-02-25 14:39:09

我沒有擴展演示，我從頭開始開發，因爲（查看源代碼）演示具有固定列數和大小的列布局，並且不允許使用可調整大小的面板。 – Marco 2013-02-25 15:15:46

好吧，你知道這裏要求很多，因爲重疊是可拖動面板上的預期功能。我無法爲您提供代碼。 – A1rPun 2013-02-25 15:24:27

真的很簡單。所有你需要的是處理移動事件，例如在您的自定義面板控制器：

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

所有其它面板的位置會自動從您的列布局管理。

來源

2013-02-26 11:33:08 Marco

ExtJS列布局，移動可調整大小的面板不重疊

回答

相關問題