Change Grid Column menuText

[ventryj]

Hello,

I am trying to make a simple change of updating a column's header text and menu text based on user input. I am able to update the header text by using the column's setText() method, and it is working fine. However, setText() does not seem to update the menu text for that column in the header show/hide menu. I tried to manually change the menuText for the column, but it did not seem to work. Is there a known way to update a columns menuText dynamically?

52749



var fields = this.getMyStoreStore(),
grid = Ext.ComponentQuery.query('#mygrid')[0],
columns = grid.columns,
change = false,
column;

fields.load(function(records, operation, success) {
if(records.length > 0) {
for(var i = 0; i < columns.length; i++) {
column = columns[i];
customField = fields.findRecord('DataIndex', column.dataIndex);

if(customField) {
column.setText(customField.get('FieldName'));
column.menuText = customField.get('FieldName');
change = true;
}
}
}

return callback(change, columns);
});


Thanks!

Joey

[joel.watson]

Hi--

When the header menu is created, it is cached and reused for subsequent scenarios that need to show the header menu. So then, when you change the column text like you are, the menu is never informed of the change and so continues to show the cached version.

I'd recommend using reconfigure() (http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.grid.Panel-method-reconfigure) to change the column. This should not only allow you to change the column(s) in whatever way you like, but will also invalidate the header menu and require a recreation of it.

I hope that helps--thanks!
Joel

[ventryj]

Thanks for the response, Joel!

I tried to use the reconfigure() method as you suggested, but I am getting the following error:

Uncaught TypeError: Cannot read property 'removeCls' of null

My updated code is below:


var fields = this.getMyStore(),
grid = Ext.ComponentQuery.query('#mygrid')[0],
columns = grid.columns,
change = false,
column;


fields.load(function(records, operation, success) {
if(records.length > 0) {
for(var i = 0; i < columns.length; i++) {
column = columns[i];
customField = fields.findRecord('DataIndex', column.dataIndex);


if(customField) {
column.setText(customField.get('FieldName'));
column.menuText = customField.get('FieldName');
change = true;
}
}

if(change) grid.reconfigure(false, columns);
}
});


Any thoughts on where I'm going wrong?

Thanks,

Joey

[joel.watson]

I'm not entirely sure. Can you create a test case that demonstrates the issue?

https://fiddle.sencha.com

Thanks!
Joel