View Full Version : Must Change afterRender to beforeRender

Justin Noel
19 Feb 2012, 4:39 PM
In the sticky notes, you've asked us to identify code changes required to get layouts to work in 4.1.

I've got an issue with migrating from 4.0.7 to 4.1b2. The "afterRender" event does not seem to work the same. It severely ruins the layout.

Here is what 4.0.7 looks like :


Here is the exact same code with 4.1b2.

Changing any "afterRender" references to "beforeRender" SORT of fixes the problem. The screen now lays out properly. However, my main toolbar looses all background coloring. See this image:


You can find a complete working sample of this code on Github @ https://github.com/calendee/Ext-JS-4.X-CRUD-Demo . NOTE : This code will no longer work with 4.0.7 because of changing "afterRender" to "beforeRender".

Also note that this layout problem will exist even if you put no supplemental code in the "afterRendor". Simply referencing afterRender causes the layout to fail.

FYI : Here is the exact file that had to be changed to support 4.1b2 : https://github.com/calendee/Ext-JS-4.X-CRUD-Demo/blob/master/app/view/customers/CustomerManagementToolbar.js

19 Feb 2012, 8:52 PM
You aren't using callParent in your beforeRender/afterRender. I suspect that what's happened is that the overridden method was empty in 4.0.7 so you could get away with a missing callParent but in 4.1 it does some important layout steps so it's causing havoc.

Justin Noel
20 Feb 2012, 8:23 AM

You're a genius! Thank you. That did solve the problem.

New code :

afterRender : function() {

custPanel = Ext.ComponentQuery.query('CustomerManagement');
custLayout = custPanel[0].getLayout();

Thanks for the prompt reply.