Failed to call getValues ​​() in Ext Js FormPanel when initializing container panel

Question

I have an Ext Js panel that I am adding to my main TabPanel. The panel I'm adding contains a FormPanel as one of its elements, and inside the FormPanel I have a Name field. I want to change the name of the tab based on the name in the form field.

The problem is that if I call FormPanel getForm().getValues()inside the initComponent panel, I get the following javascript error:

Uncaught TypeError: Cannot read property 'dom' of undefined

If I do this outside of initComponent (for example, when a button is clicked), everything works fine. After some testing, I think the problem is that the FormPanel is not yet displayed (and therefore dom does not exist) getValues()fails. However, I cannot figure out how to get FormPanel values ​​from the panel at boot time.

I tried to listen to events. I tried:

this.detailForm.on('afterrender', function () { alert('test'); });

but it showed that it was AfterRendercalled before the form was actually displayed (it is not visible on the screen). Changing the warning for my custom function handler results in a previous dom exception. I tried to use events activateand enableinstead AfterRender, but even if the API said FormPanel runs these events, a warning ( 'test') is never called.

, , FormPanel . - ?

Answer 1

getFieldValues ​​() getValues ​​() , getValue() DOM. , .

Answer 2

, afterlayout.

Answer 3

.deferredRender: false try.

Ext.TabPanel.deferredRender

, , : false.

I believe that the problem is caused by the fact that inactive tabs are not displayed until they become active. In your scenario, you cannot get the values ​​because they do not exist until the tab is activated / shown.

Setting deferredRender: false will display items in all tabs. A performance hit may occur by setting deferredRender: false, so testing should be done.

Hope this helps.