Ext JS grid panel spacer removal

Question

I am quite new to Ext JS 4 and I have created a Panel with a fixed column. There seems to be some kind of bug(as read on some forum) and if I make a column fixed, a spacer (xtype: tbspacer) is automatically inserted at its top, ruining the table's alignment(if it is just a matter of bad configuration, please let me know). What I would like to do is to remove that spacer.

In order to do this, I have to select it, but it doesn't have a "static" id, meaning that if I make any modifications to the view, the spacer gets another id, so I need a method to select it without making use of the id. I have tried doing something like this:

list.query('.tbspacer')[0].setHeight(0);

where list is the panel. But it doesn't seem to work. The list.query() method returns an empty array. I get the same issue when trying to select a textfield .

Am I missing something, or is it just another bug?

This is how I create the locked column(nothing special):

{
  header: headerName, 
  dataIndex: i, 
  locked: true
}

EDIT Here is also a screenshot:

EDIT That spacer shouldn't have existed in the first place, it was(maybe still is?) in that version of the framework. See my other question here . I will mark the only answer here as accepted because it seemed to provide a fix to the problem mentioned in this question.

Answer 1

First, you're doing a wrong query. It should be just tbspacer , without the dot. Second, instead of setHeight(0) , why not just destroy it?

list.query('tbspacer')[0].destroy();