Results 1 to 3 of 3

Thread: Dasboard - customize columns

    Success! Looks like we've fixed this one. According to our records the fix was applied for EXTJS-13051 in 5.0.0b3.
  1. #1
    Sencha User Misiu's Avatar
    Join Date
    Jun 2012
    Location
    Poland
    Posts
    264

    Default Dasboard - customize columns

    Open http://dev.sencha.com/ext/5.0.0/exam...tal/index.html.
    After removing "Sencha Blog" And "CNN.com" how can we move "Markets" to second column?

    Can we configure 6 columns and change item to take 3 columns width?
    I would like to be able to create this kind of look:

    ops-dashboard-screenshot1.jpg

  2. #2
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,892

    Default

    It is possible to drag to force creation of a new column. Try it by running the app, and dragging the "Markets" portlet to the top right. It will insert a new column.

    The bug is that the portal's column layout is not responding and reallocating width correctly when the number of columns drops.

    Try the following overrides:

    Code:
    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.
                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!)
                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();
                }
            }
        }
    });
    
    Ext.override(Ext.dashboard.Panel', {
        finishClose: function () {
            var me = this,
                closeAction = me.closeAction;
    
            me.closing = false;
            me.fireEvent('close', me);
    
            // The close of the last portlet within a column results in removal of both the column and its splitter.
            // So coalesce any layouts resulting from this operation.
            Ext.suspendLayouts();
            me[closeAction]();
            Ext.resumeLayouts(true);
    
            if (closeAction === 'hide') {
                me.el.setOpacity(1);
            }
        }
    });

  3. #3
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,892

    Default

    Thanks for the report! I have opened a bug in our bug tracker.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •