Add item to column header

[rothaar]

Hello again all,

I'm playing with an EditorGridPanel and running into a little trouble. From several other posts I've read it seems that maybe I'm messing around with an uncomfortable amount of undocumented/unsupported features, but I'm getting close to what I want to do.

My EditorGridPanel will eventually allow the user to add columns to the grid via a combotree-type object (currently it just adds an auto-numbered faux-column via a tbar button), and I'd LIKE them to be able to dismiss or close a column via a small "x" icon or something in the column header.

Unless I'm misunderstanding the API Docs, it seems that the "header" config option on a columnModel allows only string input. I suppose I could slap in HTML (see my example code) and get a reasonable result, but it feels like a filthy hack.

Has anyone had any experience extending or overriding the columnModel to allow for non-strings within? I've had no luck finding such a modification on the forums, but my google ninja skills are admittedly rusty.

Here's the code I'm working with, along with the truly fugly HTML (just slapped an alert in there for testing purposes... I would eventually need to call actions.removeDataPoint in that trigger).


var actions = {
addDataPoint: new Ext.Action({
text: _('Add'),
handler: function(){
var dpName = 'dataPoint ' + ++intAutoNumber;
var grid = Ext.getCmp('grdRawData');
var colConfig = grid.getColumnModel().config;
var headerHTML = '<div>' + dpName + '&nbsp;&nbsp;<a href="#" onClick="alert(\'CLICK\'); return false">x</a></div>'
colConfig.push({
header: headerHTML,
dataIndex: dpName,
editor: new Ext.form.TextField({
})
});
grid.getColumnModel().setConfig(colConfig, true);
grid.reconfigure(grid.getStore(), new Ext.grid.ColumnModel(colConfig));
}
}),
removeDataPoint: new Ext.Action({
text: _('Remove'),
handler: function(sender, e){
var grid = Ext.getCmp('grdRawData');
var selModel = grid.getSelectionModel();
var colModel = grid.getColumnModel();

var selColumnIdx = selModel.getSelectedCell()[1];
var selColumnId = colModel.getColumnId(selColumnIdx);
var selColumnObj = colModel.getColumnById(selColumnId);

if (!selColumnObj.noDelete) {
var colConfig = colModel.config;
var selDataIndex = colModel.getDataIndex(selColumnIdx)
colConfig.splice(colConfig.IndexOfByMember('dataIndex', selDataIndex), 1);
for (var i=1; i<colConfig.length; i++) {
delete colConfig[i].id;
}
colModel.setConfig(colConfig, true);
grid.reconfigure(grid.getStore(), new Ext.grid.ColumnModel(colConfig));
}
}
})
}

var win = new Ext.Window({
title: _('Raw Data Editor'),
width: 750,
height: 500,
layout: 'border',
constrain: true,
modal: true,
plain: true,
closable: false,
bodyStyle: 'padding: 5px;',
buttonAlign: 'center',
items: new Ext.grid.EditorGridPanel({
id: 'grdRawData',
region: 'center',
//clicksToEdit: 1,
store: rawDataStore,
enableHdMenu: false,
cm: new Ext.grid.ColumnModel([
{
header: 'Time',
dataIndex: 'time',
noDelete: true
}
])
}),
tbar: [
actions.addDataPoint,
actions.removeDataPoint
]
});

Anyone have any relevant examples of extending or overriding the ColumnModel code in this way, or should I stick with the yucky HTML insertion?

[mjlecomte]

Condor posted some code for adding columns not long back.

[rothaar]

Sorry, I'm not being clear. The code above works for adding and removing columns. I'm happy with it. I'm just searching for some extension of ColumnModel that allows for the addition of buttons (rather than just text) to the header. I'm playing with it myself and will gladly post what I come up with if it's decent, but I just didn't want to reinvent the wheel if a relevant solution already exists and I've just missed in my forum searches.

[Condor]

Don't override ColumnModel. Instead, specify a different header cell template for the GridView (templates.hcell).

[rothaar]

Should I be able to set the template for the header cell within the GridView before render? Currently the following code still heads to ext-all-debug with this.templates undefined:


var rawDataView = new Ext.grid.GridView({
});
rawDataView.templates = {
header: new Ext.Template(
'<table border="0" cellspacing="0" cellpadding="0" style="{tstyle}">',
'<thead><tr class="x-grid3-hd-row">TEST</tr></thead>',
'</table>'
)
};

var win = new Ext.Window({
title: _('Raw Data Editor'),
width: 750,
height: 500,
layout: 'border',
constrain: true,
modal: true,
plain: true,
closable: false,
bodyStyle: 'padding: 5px;',
buttonAlign: 'center',
items: new Ext.grid.EditorGridPanel({
id: 'grdRawData',
region: 'center',
//clicksToEdit: 1,
store: rawDataStore,
enableHdMenu: false,
cm: new Ext.grid.ColumnModel([
{
header: 'Time',
dataIndex: 'time',
noDelete: true
}
]),
view: rawDataView
}),
tbar: [
actions.addDataPoint,
actions.removeDataPoint
]
});

Do I need to explicitly do a grid.getView().templates = { header: ... } and a refresh() after render? That feels sloppy, but I'm notoriously sloppy anyway, so...

[rothaar]

My apologies. The code block above is correct, but it wasn't correct in my copy locally. I had the "view: rawDataView" parameter set on the WINDOW, not on the GRID. Dummy. Anyway, it's allowing me to get at the header now. Thanks for your help. I'll post a reasonable facsimile of the finished product once I'm done tweaking.

[StevenMcD]

now we've done something similar but we having a problem now when a user tries to sort on the newly added column, the column doesn't "show" its being sorted. So there's no little arrow next to the HeaderText.

Have you had this problem at all? If you did, anyway to work around it?

Thanks!