MAR 21
Code Javascript

USING SENCHA TOUCH COMPONENTS AS BUTTONS

The documentaiton for the Sencha Touch framework can often be a bit sparse. Case in point: the typical way to make a button inside a container is:

var buttonContainer = Ext.create('Ext.Container', {
	width: '100%',
	height: '100%',
	items: [
		{
			xtype: 'button',
			width: '100',
			height: 40,
			text: 'OK',
			listeners: {
				tap: function() {
					// Do something
				}
			}
		}
	]
});

This is all well and good, if you want to make buttons that adhere strictly to the Sencha framework. But what if you want to make something that you have a little more visual control over, say a container, respond to mouse events?

The previous recommended behavior was to hook into the components ‘initialize’ method, which enabled you to attach listeners to that component. That works fine – as long as you don’t build your project. When the project is built, the references to initialize don’t get called anymore (I lost quite a few hairs trying to figure that one out). Instead, the correct method is:

var buttonContainer = Ext.create('Ext.Container', {
	width: '100%',
	height: '100%',
	items: [
		{
			text: 'Element 1',
		},
		{
			text: 'Element 2',
		},
		{
			text: 'Element 3',
		}
	],
	listeners: {
		tap: {
	        fn: function() {
				// Do Something			
	        },
	        element: 'element'  // The special sauce that gives the listener its reference
	    },
	}	
});

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>