Grid with locked column not displayed
===

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,
    });
