ExtJS Dashboard losing columns and other problems

Question

With the release of ExtJS 5 came the dashboard component which is essentially a panel that has components like the old Portal Example from ExtJS 4.2.

Currently at the project we're building we are using a modified portal example for our main page with draggable panels in 3 columns and other custom functionality like showing, hiding, adding and removing of panels. However once we upgraded to ExtJS 5 we found out about this new dashboard class and we are thinking of implementing it in order to benefit from any type of extra features sencha might realease in the future.

So I've been toying around with it and it seems to me it doesn't really work correctly. I created a simple dashboard with 3 columns of equal width and each has a single panel inside defaultContent. When the page loads everything is good but once I move around a panel since it is the last one on its column the column somewhat disappears and I end up with only 2 columns of possible positions for the "on drag" panel. On the older portal example you would specify the number of columns and they would always remain regardless of being populated with panels or not. Also I do not see an option for adding separators between the columns. Even though you can modify their width you just put your mouse on a blank space between panels there is no "indicator" of sorts.

Those are 2 of the very early problems I faced by just toying around with it for 30 minutes. If you have any solutions that would help but I'd also like to know of your experience using this component. I couldn't find any examples on the internet either since this is so new. For now we're sticking with our custom made portal panel.

Thanks

Didier Aupest Didier Aupest · Accepted Answer · 2015-08-20T10:32:51

It seems to be a known issue: Sencha - Dashboard Customize columns

You need to override the default behaviour of the onRemove of the Dashboard Column

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

Changes are in the code with the comment: "old code:"

ExtJS Dashboard losing columns and other problems

1 Answers