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.

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 20 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 22 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. View all posts by Robert Watkins