Best way to create a custom component

[Tegola]

Hello,
I'm creating a complicate custom component. It's a timer which has a display (to show the current time), a play/pause, a remove button and a few other things inside.

I'm actually creating the component by nesting components and adding events on initialization, but I'm not sure this is the best way to do it, and since there may be 8/10 of these complicate components, I'd like to know how to optimize it.

Here's my current component. It's still in early stage:

Ext.define('My.view.Timer', {
	extend: 'Ext.Container',
	xtype: 'timer',
	
	config: {
		baseCls: 'my-timer',
		layout: 'vbox',
		defaults: { xtype: 'component' },
		items: [
			{ // First section
				xtype: 'container',
				layout: 'hbox',
				defaults: {
					xtype: 'button',
					baseCls: 'my-timer-button'
				},
				items: [
					{
						cls: 'my-timer-play-button',
						iconCls: 'play',
						itemId: 'playButton'
					},
					{
						xtype: 'component',
						baseCls: 'my-timer-display',
						itemId: 'display',
						flex: 1,
						tpl: [
							'<div class="field">',
								'<div class="value">{hours}</div>',
								'<div class="label">Hr</div>',
							'</div>',
							'<div class="field colon-field">',
								'<div class="value">:</div>',
								'<div class="label">&nbsp;</div>',
							'</div>',
							'<div class="field">',
								'<div class="value">{minutes}</div>',
								'<div class="label">Min</div>',
							'</div>',
							'<div class="field colon-field">',
								'<div class="value">:</div>',
								'<div class="label">&nbsp;</div>',
							'</div>',
							'<div class="field">',
								'<div class="value">{seconds}</div>',
								'<div class="label">Sec</div>',
							'</div>',
						]
					},
					{
						cls: 'my-timer-save-button',
						iconCls: 'save',
						itemId: 'saveButton'
					},
					{
						cls: 'my-timer-delete-button',
						iconCls: 'delete',
						itemId: 'deleteButton'
					}
				]
			},
			{ // Separator
				baseCls: 'my-timer-separator'
			},
			{ // Description
				baseCls: 'my-timer-description',
				html: 'Timer description',
				itemId: 'descriptionField'
			}
		
		]
	},
	
	initialize: function() {
		this.callParent(arguments);
		
		// Add listeners to elements
		this.down('#playButton').on('tap', this.playPause, this);
		this.down('#saveButton').on('tap', this.save, this);
		this.down('#deleteButton').on('tap', this.delete, this);
	},
	
	updateData: function(data, oldData) {
		this.callParent(arguments);
		
		if (data) {
			this.down('#display').setData({
				hours: Ext.util.Format.leftPad(data.hours, 2, '0'),
				minutes: Ext.util.Format.leftPad(data.minutes, 2, '0'),
				seconds: Ext.util.Format.leftPad(data.seconds, 2, '0')
			});
		}
	},
	
	playPause: function() {
		this.fireEvent('playPause', this);
	}
	
	save: function() {
		this.fireEvent('save', this);
	},


	delete: function() {
		this.fireEvent('delete', this);
	},
});

Is this the right/best way?
Thanks

[mitchellsimoens]

What you have will work but you could also add this to the config object instead of the on methods:

control : {
    '#playButton' : {
        tap : 'playPause'
    },
    '#saveButton' : {
        tap : 'save'
    },
    '#deleteButton' : {
        tap : 'delete'
    }
}

[Tegola]

I didn't know I could use the control config inside a view. Neat!

Thanks!

[Tegola]

Is there also a way to mimick the "refs" config?
In self contained components I'm finding myself referencing to child components, and I'm actually using "this.down(...)" to find them.

I know I could do something like:

initialize: {
  this.callParent(arguments);

  this.myButton = this.down('#myButton');
}

but any events controller by the "control" config would fire before the "initialize" method, thus not finding myButton.

Thanks