Grid with locked column not displayed

Question

I am trying to insert a data grid with a locked column in a web application.

If I display the grid without locked columns, everything runs fine. When I make a column locked, the gird gets created, but it is very small(just a tiny square, making it basically invisible).

Why does this happen and how can i fix it?

Here is what I have:

for (var i = 0; i < this.fields.length; i++) {
    var currentField = this.fields[i];
    fields.push(currentField.columnName);
    columns.push({
        header: currentField.name,
        dataIndex: currentField.columnName,
        hidden: i >= 4,
        locked: i == 1
    });
}
Ext.create('Ext.data.Store', {
    storeId: 'resultsStore',
    fields: fields,
    data: results
});
var grid = Ext.create('Ext.grid.Panel', {
    store: "resultsStore",
    columns: columns,
    title: 'Results',
    renderTo: "actualResultsContainer",
    height: 250,
    width: 500,
    enableLocking: true,
});

EDIT If I try to re-create everything(repeat all actions from above after rendering), the grid gets created and from this point on, it runs just fine. What am I missing?

What happens if you create the store and keep it as a variable... var store = Ext.create('Ext.data.Store', {... var grid = Ext.create('Ext.grid.Panel', { store: store, and then remove enableLocking? Does the grid display? Any errors? — John Moses
Couple things: enableLocking don't need to be specified if you have locked: true in the columns definition. And I'm not sure - but I think you can only lock first column, and looks like you're trying to lock the second one, no? — sha
@JohnMoses I have tried what you said, but nothing happened. Still the same problem. — Dragos
@sha I have deleted the enableLocking and the number of column has nothing to do with this. If a column is locked, it will be moved to the left. In order to be sure of this, I have tried to make the first column locked, but the issue persisted. — Dragos
I would try to simplify things - move columns declaration inside grid declaration. Don't use loops and other objects - just define columns manually. — sha

sha sha · Accepted Answer · 2012-07-11T13:48:31

It should work the way you wrote it. Check that div you're rendering grid to is created in a timely manner.

Grid with locked column not displayed

1 Answers