PDA

View Full Version : Moving Column Header Text along with Horizontal Scroll of the grid.



extrookie
16 Sep 2013, 9:07 AM
Hi Everyone,

I have a strange requirement. Hoping someone will help me out. I have grid where in I have column header grouping as shown in the figure below.In the first figure you can see two main columns Company and Stock Price and Stock Price has many child columns. The Issue here is with the Stock Price Header text which is left aligned. Now when I move the horizontal scroll bar to right as shown in figure 2 the Stock Price Header text is moved to left. My requirement is to show the Stock Price Header text always along with the scroll . Can someone please help me with this.

4582045821

droessner
17 Sep 2013, 4:36 AM
You could move the text element manually. Probably needs some tweaking, but something like this would work:



Ext.create('Ext.grid.Panel', {
renderTo: Ext.getBody(),
title: 'Example',
width: 400,
height: 300,
store: [],
columns: [{
text: 'column 1',
width: 100
}, {
text: 'column 2',
itemId: 'wideColumn',
style: {
'text-align': 'left'
},
columns: [{
text: 'sub-column 1',
width: 350
}, {
text: 'sub-column 2',
width: 350
}, {
text: 'sub-column 3',
width: 350
}, {
text: 'sub-column 4',
width: 350
}]
}, {
text: 'column 3',
width: 500
}],
listeners: {
afterrender: function() {
this.mon(this.getView().getEl(), 'scroll', function(event, target) {
var column = this.down('#wideColumn'),
textEl = column.textEl,
width = column.getWidth(),
offset = textEl.getOffsetsTo(this)[0] * -1;


if (offset > 0) {
textEl.setStyle('padding', '0 0 0 ' + (offset + 10) + 'px');
} else {
textEl.setStyle('padding', '0 0 0 0');
}
}, this);
}
}
});

extrookie
17 Sep 2013, 8:23 AM
Thanks Droessner. I tried with do it multiple columns groups by looping around it but I am unable to make it work. Can you please check the sample below and help me with it.


Ext.require([ 'Ext.grid.*',
'Ext.data.*',
'Ext.util.*',
'Ext.state.*'
]);


Ext.onReady(function() {
Ext.QuickTips.init();


// sample static data for the store
var myData = [
['3m Co', 71.72, 0.02, 0.03, '9/1 12:00am'],
['Alcoa Inc', 29.01, 0.42, 1.47, '9/1 12:00am'],
['Altria Group Inc', 83.81, 0.28, 0.34, '9/1 12:00am'],
['American Express Company', 52.55, 0.01, 0.02, '9/1 12:00am'],
['American International Group, Inc.', 64.13, 0.31, 0.49, '9/1 12:00am'],
['AT&T Inc.', 31.61, -0.48, -1.54, '9/1 12:00am'],
['Boeing Co.', 75.43, 0.53, 0.71, '9/1 12:00am'],
['Caterpillar Inc.', 67.27, 0.92, 1.39, '9/1 12:00am'],
['Citigroup, Inc.', 49.37, 0.02, 0.04, '9/1 12:00am'],
['E.I. du Pont de Nemours and Company', 40.48, 0.51, 1.28, '9/1 12:00am'],
['Exxon Mobil Corp', 68.1, -0.43, -0.64, '9/1 12:00am'],
['General Electric Company', 34.14, -0.08, -0.23, '9/1 12:00am'],
['General Motors Corporation', 30.27, 1.09, 3.74, '9/1 12:00am'],
['Hewlett-Packard Co.', 36.53, -0.03, -0.08, '9/1 12:00am'],
['Honeywell Intl Inc', 38.77, 0.05, 0.13, '9/1 12:00am'],
['Intel Corporation', 19.88, 0.31, 1.58, '9/1 12:00am'],
['International Business Machines', 81.41, 0.44, 0.54, '9/1 12:00am'],
['Johnson & Johnson', 64.72, 0.06, 0.09, '9/1 12:00am'],
['JP Morgan & Chase & Co', 45.73, 0.07, 0.15, '9/1 12:00am'],
['McDonald\'s Corporation', 36.76, 0.86, 2.40, '9/1 12:00am'],
['Merck & Co., Inc.', 40.96, 0.41, 1.01, '9/1 12:00am'],
['Microsoft Corporation', 25.84, 0.14, 0.54, '9/1 12:00am'],
['Pfizer Inc', 27.96, 0.4, 1.45, '9/1 12:00am'],
['The Coca-Cola Company', 45.07, 0.26, 0.58, '9/1 12:00am'],
['The Home Depot, Inc.', 34.64, 0.35, 1.02, '9/1 12:00am'],
['The Procter & Gamble Company', 61.91, 0.01, 0.02, '9/1 12:00am'],
['United Technologies Corporation', 63.26, 0.55, 0.88, '9/1 12:00am'],
['Verizon Communications', 35.57, 0.39, 1.11, '9/1 12:00am'],
['Wal-Mart Stores, Inc.', 45.45, 0.73, 1.63, '9/1 12:00am']
];


/**
* Custom function used for column renderer
* @param {Object} val
*/
function change(val) {
if (val > 0) {
return '<span style="color:green;">' + val + '</span>';
} else if (val < 0) {
return '<span style="color:red;">' + val + '</span>';
}
return val;
}


/**
* Custom function used for column renderer
* @param {Object} val
*/
function pctChange(val) {
if (val > 0) {
return '<span style="color:green;">' + val + '%</span>';
} else if (val < 0) {
return '<span style="color:red;">' + val + '%</span>';
}
return val;
}


// create the data store
var store = Ext.create('Ext.data.ArrayStore', {
fields: [
{name: 'company'},
{name: 'price', type: 'float'},
{name: 'change', type: 'float'},
{name: 'pctChange', type: 'float'},
{name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
],
data: myData
});


// create the Grid
var grid = Ext.create('Ext.grid.Panel', {
store: store,
columnLines: true,
columns: [{
text : 'Company',
flex : 1,
sortable : false,
dataIndex: 'company'
}, {
text: 'Stock Price',
allowHeaderMove:'true',
columns: [{
text : 'Price',
width : 75,
sortable : true,
renderer : 'usMoney',
dataIndex: 'price'
}, {
text : 'Change',
width : 75,
sortable : true,
renderer : change,
dataIndex: 'change'
}, {
text : '% Change',
width : 75,
sortable : true,
renderer : pctChange,
dataIndex: 'pctChange'
},
{
text : 'Price',
width : 75,
sortable : true,
renderer : 'usMoney',
dataIndex: 'price'
}, {
text : 'Change',
width : 75,
sortable : true,
renderer : change,
dataIndex: 'change'
},
{
text : 'Price',
width : 75,
sortable : true,
renderer : 'usMoney',
dataIndex: 'price'
}, {
text : 'Change',
width : 75,
sortable : true,
renderer : change,
dataIndex: 'change'
}]
},
{
text: 'Label Price',
allowHeaderMove:'true',
columns: [{
text : 'Price',
width : 75,
sortable : true,
renderer : 'usMoney',
dataIndex: 'price'
}, {
text : 'Change',
width : 75,
sortable : true,
renderer : change,
dataIndex: 'change'
}, {
text : '% Change',
width : 75,
sortable : true,
renderer : pctChange,
dataIndex: 'pctChange'
},
{
text : 'Price',
width : 75,
sortable : true,
renderer : 'usMoney',
dataIndex: 'price'
}, {
text : 'Change',
width : 75,
sortable : true,
renderer : change,
dataIndex: 'change'
},
{
text : 'Price',
width : 75,
sortable : true,
renderer : 'usMoney',
dataIndex: 'price'
}, {
text : 'Change',
width : 75,
sortable : true,
renderer : change,
dataIndex: 'change'
}]
},
{
text : 'Last Updated',
width : 85,
sortable : true,
renderer : Ext.util.Format.dateRenderer('m/d/Y'),
dataIndex: 'lastChange'
}],
listeners: {
afterrender: function() {
this.mon(this.getView().getEl(), 'scroll', function(event, target) {

Ext.each(this.columns, function(column, index) {
debugger;
if(column.allowHeaderMove == 'true'){
var textEl = column.textEl,
width = column.getWidth(),
offset = textEl.getOffsetsTo(this)[0] * -1;
if (offset > 0) {
textEl.setStyle('padding', '0 0 0 ' + (offset + 10) + 'px');
} else {
textEl.setStyle('padding', '0 0 0 0');
}
}
});


}, this);
}
},
height: 350,
width: 200,
title: 'Grouped Header Grid',
renderTo: Ext.getBody(),
viewConfig: {
stripeRows: true
}
});
});

droessner
17 Sep 2013, 9:25 AM
When you are looping through this.columns, you are never actually hitting the group header. this.columns only contains the actual columns. Additonally, because you are using Ext.each, you are losing your scope, so the getOffsetsTo(this) is not getting the offset from the correct element.

Try changing your code in the afterrender listener to:



this.mon(this.getView().getEl(), 'scroll', function(event, target) {
Ext.each(this.query('gridcolumn[allowHeaderMove=true]'), function(column, index) {
var textEl = column.textEl,
width = column.getWidth(),
offset = textEl.getOffsetsTo(this)[0] * -1;
if (offset > 0) {
textEl.setStyle('padding', '0 0 0 ' + (offset + 10) + 'px');
} else {
textEl.setStyle('padding', '0 0 0 0');
}
}, this);
}, this);

extrookie
17 Sep 2013, 12:32 PM
Thanks droessner. It worked.