PDA

View Full Version : setPadding method in Ext.grid.column.Column removed in 4.2.1 from 4.2.0



m0r14rty
26 Aug 2013, 7:45 AM
So in the 4.2.0 docs, setPadding exists and is in the source, while in 4.2.1, the method no longer exists.

I'm using the filterbar plugin (which I understand is user created), but there is one part that keeps the headers from resizing by using an interceptor:



Ext.each(me.grid.headerCt.getGridColumns(), function(column) {
if (!Ext.Array.contains(excludedCols, column.id)) {
column.setPadding = Ext.Function.createInterceptor(column.setPadding, function(h) {
return false;
});
}
});

(removed an extra bit about checkbox columns to reduce confusion.)

Essentially, this worked with 4.2.0 because setPadding() was called to change the padding in the column header, but now that setPadding isn't the function being used, there's nothing (or at least I don't know what should be there) to intercept and cancel.

How does 4.2.1 set column header padding now, since it's not calling Ext.grid.column.Column.setPadding()? If I knew, I could fix the interceptor and regain functionality to the plugin. (And save me from creating explicit comboboxes to filter out the dozens of grids in my application)

I'll note this in the plugin's thread as well.

Phil Guerrant
26 Aug 2013, 9:11 AM
In Ext JS 4.2.1 the text is vertically centered within the column header by ColumnComponentLayout. (see publishInnerHeight). It only sets the top/bottom padding if the header is vertically stretched (e.g. header parallel to a group header). I would not, however recommend overriding this method, as it is private and may change in future releases.

Which UX are you using? It may be possible to acheive the result you want using only CSS.

m0r14rty
26 Aug 2013, 12:12 PM
I'm using the filterbar UX.
https://market.sencha.com/extensions/ext-ux-grid-filterbar
There are a few edits you already need to do for it to work ine 4.2 (such as removing "true" as a param from a few calls of getColumns();)

I was thinking css might be an option, but it seemed like a sloppy way around the issue so I wanted to check if there was still a solution that could stay within the plugin and still use the interceptor.

The plugin expands the height of the header to make space for an additional input box to be placed directly below the header. The interceptor keeps the header padding from taking the entire (new) height, and leaving room for the input box to be visible. Without that function working, the input box for filters is placed under the header and hidden behind the first row's cell.

It somehow works with non-grouped headers and some grouped headers where there is no value for the text, but for grouped headers (sub-headers with text) the header text is stretched over the entire height and the box is rendered hidden behind the grid.

welshcathy
13 Dec 2013, 10:03 AM
I had the same problem too - 4.2.1
This simple override works for me.



Ext.define('MyApp.override.grid.ColumnComponentLayout', {
override: 'Ext.grid.ColumnComponentLayout',

/**
* Don't recalculate the inner height when a filter config
* is applied to the column
*/
publishInnerHeight: function(ownerContext, outerHeight) {
if (this.owner.filter){
return;
}
this.callParent(arguments);
}

});

SebTardif
4 Aug 2014, 8:26 AM
In Ext JS 5, we still need the override.


Should we have a better way to do this?


It seems if I could set somehow ownerContext.hasRawContent to false it could work without the override. Even if my column container has items, hasRawContent is still true.


Extract from ColumnComponentLayout:

// If we are not a container, but just have HTML content...
if (ownerContext.hasRawContent) {
// Vertically center the header text and ensure titleContext occupies availableHeight
textHeight = owner.textEl.getHeight();
if (textHeight) {
availableHeight -= textHeight;
if (availableHeight > 0) {
paddingTop = Math.floor(availableHeight / 2);
paddingBottom = availableHeight - paddingTop;
ownerContext.titleContext.setProp('padding-top', paddingTop);
ownerContext.titleContext.setProp('padding-bottom', paddingBottom);
}
}
}


// There are child items
else {
ownerContext.setProp('innerHeight', innerHeight - owner.titleEl.getHeight(), false);
}