Adding a custom attribute to an existing sencha touch component (and why it might cause error after production build)

Lately we’ve been using Sencha Touch for an interesting project. We found a problem which something was working correctly while on develop mode but stopped working after the app was built for production.

Turned out the problem was becuase we added a custom attribute to an existing sencha component which we wanted to use.

Ext.define('SomeView', {
	extend: 'Panel',
	...,
	config: {
		...,
		items: [{
			id: 'myCustomContainer',
			xtype: 'Container',
			customAttribute: 'customValue'
		}]
	}
});

And afterwards tried to get the custom attribute from the specific Custom Container (let’s say stored in variable myCustomContainer) as:

myCustomContainer.customAttribute

This works correctly if the app is tested without building it for production but gives an JS error when in the built for production app it tries to access the custom attribute.

The correct way to do so is simply to define a custom container that inherits the built-in one and put the custom attribute in it’s config with it’s default value.

Ext.define('MyCustomContainer', {
	extend: 'Ext.Container',
	xtype: 'myCustomContainer',
	config: {
		myCustomAttribute: null
	}
});

Now you can use the xtype ‘myCustomContainer’ instead of ‘Container’ in the view and Sencha automatically creates a getter and a setter for it.

To use (get/set) the custom attribute you can do something like this:

// if we want to set it
myCustomContainer.getMyCustomAttribute();
// or if we want to set it:
myCustomContainer.setMyCustomAttribute('NewValue');

And now after the production build the app works again