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:

enter image description here

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.

Can u provide your code? And probably a screenshot or feeble so we can see exactly what's happening. — sha
@sha I edited my question with some code(I don't know what exactly should I select from it). As for the screenshot, I couldn't make one with a good quality. The issue is that all the data in the fixed column is with one row below the others. — Dragos
What is locked? I can't find it in the ExtJs docs. If you need to disable resizing of the column - use resizable: false — sha
@sha It seems to be missing from their docs, but it makes a column fixed, meaning that it won't disappear when I scroll to the right, it remains on the first position, no matter what. — Dragos
I now understand what you're trying to achieve, but without screenshot can't really get what's going wrong... (Replace header with the text btw) — sha

Vasiliy Faronov Vasiliy Faronov · Accepted Answer · 2012-06-27T14:29:07

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();

Ext JS grid panel spacer removal

1 Answers