PDA

View Full Version : [FIXED] Dasboard - customize columns



Misiu
4 Apr 2014, 3:54 AM
Open http://dev.sencha.com/ext/5.0.0/examples/portal/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:

48570

Animal
8 Apr 2014, 3:29 PM
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:



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

Animal
8 Apr 2014, 3:29 PM
Thanks for the report! I have opened a bug in our bug tracker.