Extjs: Force a component to re-render

Question

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:

1. When the form is rendered alone (eg. in a window or the first panel in a card layout, everything shows just fine)

2. 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.

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.

In terms of implementation of the control, I am extending Ext.form.field.Base. In initComponent, I simply call this.on('afterrender', this.initControl) to run the custom code for the additional control after render. Here the input field is hidden and the grid is rendered where it is supposed to be.

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?

Answer 1

Have you tried to call the "doLayout" method to make sure that the dimensions are reapplied correctly? Re-rendering is not common in Extjs, usually doLayout does the trick. If it doesn't, there may be something up with your implementation itself.