PDA

View Full Version : Column header alignment completly broken when changing column order under hori-scroll



SebTardif
24 Sep 2014, 4:57 AM
Code below is a slight variation from Sencha API Doc at: http://docs.sencha.com/extjs/5.0.1/#!/api/Ext.grid.column.Widget-cfg-enableFocusableContainer

If you scroll to the right, then take the last column to move it to the previous last, the entire layout is completely mixed-up.


var grid = new Ext.grid.Panel({ title: 'Substation power monitor',
width: 1400,
columns: [{
text: 'Id',
dataIndex: 'id',
width: 520
}, {
text: 'Rating',
dataIndex: 'maxCapacity',
width: 500
}, {
text: 'Avg.',
dataIndex: 'avg',
width: 505,
formatter: 'number("0.00")'
}, {
text: 'Max',
dataIndex: 'max',
width: 80
}, {
text: 'Instant',
dataIndex: 'instant',
width: 80
}, {
text: '%Capacity',
width: 150,


// This is our Widget column
xtype: 'widgetcolumn',
dataIndex: 'capacityUsed',


// This is the widget definition for each cell.
// Its "value" setting is taken from the column's dataIndex
widget: {
xtype: 'progressbarwidget',
textTpl: [
'{percent:number("0")}% capacity'
]
}
}],
renderTo: document.body,
disableSelection: false,
store: {
fields: [{
name: 'id',
type: 'string'
}, {
name: 'maxCapacity',
type: 'int'
}, {
name: 'avg',
type: 'int',
calculate: function(data) {
// Make this depend upon the instant field being set which sets the sampleCount and total.
// Use subscript format to access the other psuedo fields which are set by the instant field's converter
return data.instant && data['total'] / data['sampleCount'];
}
}, {
name: 'max',
type: 'int',
calculate: function(data) {
// This will be seen to depend on the "instant" field.
// Use subscript format to access this field's current value to avoid circular dependency error.
return (data['max'] || 0) < data.instant ? data.instant : data['max'];
}
}, {
name: 'instant',
type: 'int',


// Upon every update of instananeous power throughput,
// update the sample count and total so that the max field can calculate itself
convert: function(value, rec) {
rec.data.sampleCount = (rec.data.sampleCount || 0) + 1;
rec.data.total = (rec.data.total || 0) + value;
return value;
},
depends: []
}, {
name: 'capacityUsed',
calculate: function(data) {
return data.instant / data.maxCapacity;
}
}],
data: [{
id: 'Substation A',
maxCapacity: 1000,
avg: 770,
max: 950,
instant: 685
}, {
id: 'Substation B',
maxCapacity: 1000,
avg: 819,
max: 992,
instant: 749
}, {
id: 'Substation C',
maxCapacity: 1000,
avg: 588,
max: 936,
instant: 833
}, {
id: 'Substation D',
maxCapacity: 1000,
avg: 639,
max: 917,
instant: 825
}]
}
});


// Fake data updating...
// Change one record per second to a random power value
Ext.interval(function() {
var recIdx = Ext.Number.randomInt(0, 3),
newPowerReading = Ext.Number.randomInt(500, 1000);


grid.store.getAt(recIdx).set('instant', newPowerReading);
}, 10000);

Gary Schlosberg
24 Sep 2014, 8:09 AM
Thanks for the report. I haven't been able to recreate this issue. I added your code to this Fiddle.
https://fiddle.sencha.com/#fiddle/are

I dragged the '%Capacity' column one space to the left, between 'Max' and 'Instant', but I don't see any issues. In which browser are you seeing this?

SebTardif
24 Sep 2014, 9:54 AM
You are right that the fiddle you provided does work but the bug does occur in my application and if you paste it in the example at: http://docs.sencha.com/extjs/5.0.1/#!/api/Ext.grid.column.Widget

You could try that? Maybe you will figure out how to make a Fiddle to also fail?

The bugs happens with both latest Chrome on Windows and IE 11.

By the way, there is an unrelated issue with API Doc that shows only with Chrome, and works fine with IE 11. This second issue is that the most outside horizontal scrollbar doesn't work in Chrome.