title: Grid with locked column not displayed
body: <p>I am trying to insert a data grid with a locked column in a web application.</p>
  
  <p>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).</p>
  
  <p>Why does this happen and how can i fix it?</p>
  
  <p>Here is what I have:</p>
  
  <pre><code>for (var i = 0; i &lt; this.fields.length; i++) {
      var currentField = this.fields[i];
      fields.push(currentField.columnName);
      columns.push({
          header: currentField.name,
          dataIndex: currentField.columnName,
          hidden: i &gt;= 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,
  });
  </code></pre>
  
  <p><strong>EDIT</strong> 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?</p>