Upgrading ExtJS – issues with templates

Quick _aide-mémoire_ so that I don’t forget. When upgrading from ExtJS 4 to ExtJS 5, if you’ve got any components that use a custom template, and expect `childEls` to be configured correctly, you need to add a `data-ref` to the generated HTML.

Advertisements

Quick aide-mémoire so that I don’t forget. When upgrading from ExtJS 4 to ExtJS 5, if you’ve got any components that use a custom template, and expect childEls to be configured correctly, you need to add a data-ref to the generated HTML.

e.g. from this:

childEls: [ 'theSpan' ],
renderTpl: '<div><span id="{id}-theSpan">foo</span></div>'

to this:


childEls: [ 'theSpan' ],
renderTpl: '<div><span data-ref="theSpan" id="{id}-theSpan">foo</span></div>'

Without the data-ref attribute, the Component doesn’t find the corresponding DOM elements after being rendered. You end up with the properties defined on the Component instance, but with undefined values.

This is not documented in the official upgrade guide from Sencha. Which is very annoying. (It is mentioned in the user forums, but that’s only useful after you realise what the problem is)

Now to go and fix the several dozen custom components/widgets we’ve got… sigh

Author: Robert Watkins

My name is Robert Watkins. I am a software developer and have been for over 18 years now. I currently work for people, but my opinions here are in no way endorsed by them (which is cool; their opinions aren’t endorsed by me either). My main professional interests are in Java development, using Agile methods, with a historical focus on building web based applications. I’m also a Mac-fan and love my iPhone, which I’m currently learning how to code for. I live and work in Brisbane, Australia, but I grew up in the Northern Territory, and still find Brisbane too cold (after 16 years here). I’m married, with two children and one cat. My politics are socialist in tendency, my religious affiliation is atheist (aka “none of the above”), my attitude is condescending and my moral standing is lying down.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s