title: Extjs: Force a component to re-render
body: <p>I have a custom component in ExtJs that is a form field (GridField). It displays a grid as a form field and works as expected. The observations are as follows:</p>
  
  <ol>
  <li><p>When the form is rendered alone (eg. in a window or the first panel in a card layout, everything shows just fine)</p></li>
  <li><p>When the form is is not the first panel in a card layout or is hidden the first time it is rendered, the field name shows and the space required is left but the control does not show. </p></li>
  </ol>
  
  <p>I did some inspection and found out that the custom component is actually rendered but the width of all the html elements (divs, etc) were 0. They all had the style (width:0). My guess is that it is because the form panel was not visible at the time the rendering was done.</p>
  
  <p>In terms of implementation of the control, I am extending <code>Ext.form.field.Base</code>. In <code>initComponent</code>, I simply call <code>this.on('afterrender', this.initControl)</code> to run the custom code for the additional control after render. Here the <code>input</code> field is hidden and the grid is rendered where it is supposed to be.</p>
  
  <p>My questions are
  1. How do I force the control to re-render so that the width is no longer 0?
  2. If the current implementation is wrong, what is the right way to use a grid or another ext component as a form field?</p>