2014-10-03 31 views
2

隨着ExtJS的5的釋放來儀表板部件基本上是具有像從ExtJS的4.2舊門戶實施例部件的面板。ExtJS的儀表板失去列和其它問題

目前在我們正在建設我們使用的是修改門戶網站例如我們的主要頁面拖動面板在3列樣顯示,隱藏其他的自定義功能,增加和麪板的拆卸工程。然而,一旦我們升級到ExtJS 5,我們就會發現這個新的儀表板類,我們正在考慮實施它,以便從將來可能釋放的任何類型的額外功能中受益。

所以我一直在玩弄與它周圍,並在我看來,它並沒有真正正常工作。我創建了一個簡單的儀表板,其中有三列等寬,每個在defaultContent內有一個面板。頁面加載時一切都很好,但一旦我周圍面板移動,因爲它是在其列最後一列有所消失,我結束了2只爲「上拖動」面板中可能的位置列。在較舊的門戶網站示例中,您將指定列的數量,並且無論是否使用面板填充,它們都將保持不變。另外我沒有看到在列之間添加分隔符的選項。即使你可以修改它們的寬度,只需將鼠標放在面板之間的空白區域,也沒有任何「指示」。

這些都是我所面臨的只是玩弄它周圍的30分鐘非常早期的問題2。如果你有任何解決方案可以幫助,但我也想知道你使用這個組件的經驗。我在互聯網上找不到任何例子,因爲這是如此新的。現在我們堅持使用我們定製的門戶面板。

感謝

回答

2

這似乎是一個已知的問題: Sencha - Dashboard Customize columns

你需要覆蓋儀表板列的onRemove的默認行爲

Ext.override(Ext.dashboard.Column, { 
    onRemove: function() { 
     var me = this, 
      ownerCt = me.ownerCt, 
      remainingSiblings, numRemaining, 
      totalColumnWidth = 0, 
      i; 

     // If we've just emptied this column. 
     if (ownerCt && me.items.getCount() === 0) { 

      // Collect remaining column siblings when this one has gone. 
      // /!\ Old code: remainingSiblings = Ext.Array.filter(ownerCt.query('>' + me.xtype + '[rowIndex=' + me.rowIndex + ']'), function(c) { 
      remainingSiblings = Ext.Array.filter(ownerCt.query('>' + me.xtype), function(c){ 
       return c !== me; 
      }); 
      numRemaining = remainingSiblings.length; 

      // If this column is not destroyed, then remove this column (unless it is the last one!) 
      // /!\ old code: if (!me.destroying && !me.isDestroyed) { 
      if (!me.destroyed && numRemaining) { 
       ownerCt.remove(me); 

       // Down to just one column; it must take up full width 
       if (numRemaining === 1) { 
        remainingSiblings[0].columnWidth = 1; 
       } 
       // If more than one remaining sibling, redistribute columnWidths proportionally so that they 
       // still total 1.0 
       else { 
        for (i = 0; i < numRemaining; i++) { 
         totalColumnWidth += remainingSiblings[i].columnWidth; 
        } 
        for (i = 0; i < numRemaining; i++) { 
         remainingSiblings[i].columnWidth = remainingSiblings[i].columnWidth/totalColumnWidth; 
        } 
       } 

       // Needed if user is *closing* the last portlet in a column as opposed to just dragging it to another place 
       // The destruction will not force a layout 
       ownerCt.updateLayout(); 
      } 
     } 
    } 
}); 

變動都與代碼註釋:「舊代碼:」

+0

那麼現在我們已經解決了我們使用我們的定製實現,所以我在斷定我不是離子來測試你的解決方案。如果任何人都可以測試它,它的作品請評論,所以我可以將其標記爲答案。 – Konstantine 2015-08-21 10:11:07