Question

随着ExtJS 5的发布，仪表板组件实际上是一个面板，其组件类似于ExtJS 4.2的旧Portal示例。

目前，在我们正在构建的项目中，我们正在使用主页的修改后的门户示例，其中包含3列可拖动面板以及其他自定义功能，如显示，隐藏，添加和删除面板。然而，一旦我们升级到ExtJS 5，我们发现了这个新的仪表板类，我们正在考虑实施它，以便从将来可能发布的任何类型的额外功能中受益。

所以我一直在玩弄它，在我看来它并没有真正正常工作。我创建了一个简单的仪表板，其中3列宽度相等，每个列都有一个defaultContent内的面板。当页面加载时一切都很好但是一旦我在一个面板上移动，因为它是列中的最后一个，列有些消失了，我最终只有2列可能的位置用于＆＃34;在拖动＆＃34;面板。在较旧的门户网站示例中，您将指定列数，无论是否填充了面板，它们都将始终保留。此外，我没有看到在列之间添加分隔符的选项。即使你可以修改它们的宽度，你只需将鼠标放在面板之间的空白处，就没有＆＃34;指示符＆＃34;各种。

这是我面对的最早问题中的两个，只是玩弄了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();
            }
        }
    }
});

代码中的更改带有注释：“旧代码：”

ExtJS仪表板丢失列和其他问题

1 个答案: