Панель индикаторов ExtJS, потерявших столбцы и другие проблемы

Question

С выпуском ExtJS 5 появился компонент панели управления, который по существу представляет собой панель, в которой есть компоненты, такие как старый пример портала из ExtJS 4.2.

В настоящее время в проекте, который мы строим, мы используем модифицированный вариант портала для нашей главной страницы с перетаскиваемыми панелями в 3 столбцах и другими настраиваемыми функциями, такими как показ, скрытие, добавление и удаление панелей. Однако после того, как мы перешли на ExtJS 5, мы узнали об этом новом классе панели мониторинга, и мы думаем о его реализации, чтобы извлечь выгоду из любых дополнительных возможностей, которые sencha может повторно использовать в будущем.

Так что я с ним работал, и мне кажется, что это действительно не работает правильно. Я создал простую панель инструментов с тремя столбцами одинаковой ширины, каждая из которых имеет отдельную панель внутри defaultContent. Когда страница загружается, все хорошо, но как только я перемещаюсь по панели, так как она является последней в своем столбце, столбец несколько исчезает, и я получаю только 2 столбца возможных позиций для панели «перетаскивание». На предыдущем примере портала вы должны указать количество столбцов, и они всегда останутся вне зависимости от того, что они заполнены панелями или нет. Также я не вижу возможности добавления разделителей между столбцами. Даже если вы можете изменить их ширину, вы просто наводите мышь на пустое пространство между панелями, нет «индикатора».

Это 2 из самых ранних проблем, с которыми я столкнулся, просто играя с ним в течение 30 минут. Если у вас есть какие-либо решения, которые помогут, но я также хотел бы узнать о вашем опыте использования этого компонента. Я не мог найти никаких примеров в Интернете, так как это так ново. На данный момент мы придерживаемся нашей настраиваемой панели портала.

Благодаря

Answer 1

Вроде бы известная проблема: 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(); 
      } 
     } 
    } 
}); 

Изменения находятся в коде с комментарий: «старый код:»