Extjs 6.2.0. How to change header text in Grid with locked columns

Question

I have a ExtJs Grid with two left most columns locked. I am trying in a handler to dynamically change the text of the column headers depending on the ComboBox:

grid.headerCt.getHeaderAtIndex(1).ownerCt.setText('<font color = "black">New H1 '+comboBox.value+'</font>');
...

Also due to the internally divides of the locked grid into two grids, I tried to do as follows:

grid.items.items[0].headerCt.getHeaderAtIndex(1).ownerCt.setText('<font color = "black">New H1 '+comboBox.value+'</font>');
...

But in both cases I get the error:

Uncaught TypeError: k.view.getScrollable is not a function

This used to work previously but now after locking columns it no longer works as expected.

How can I solve this problem or maybe there is another way change header text in locked columns?

Any solutions or pointers would be much appreciated.

Answer 1

grid.getColumns()[0].setText("shubham");

Answer 2

The main problem here is, that locked grids are split up into several grids.

These grids are now subitems from the grid and you have to know, if it is inside the locked part or not.

To access these subgrids:

subgrids = grid.getItems().items

To access the differnt parts:

unlocked = subgrids[0].getGrid()
locked   = subgrids[1].getGrid()

To override the header:

locked.getColumns()[0].setText('New Header');

So a single line for the first locked columns header would be

grid.getItems().items[1].getGrid().getColumns()[0].setText('New Header');