Sencha Touch 2 - SplitButton component for Touch

Last in the series of posts on menus and associated custom components for Sencha Touch 2, I would present SplitButton component for Touch in this blog post.

First things first, here's a live example:

Followed by the code for the Splitbutton component:

Ext.define('Ext.ux.SplitButton', {
	extend: 'Ext.SegmentedButton',
	xtype: 'ext_ux_splitbutton',

	constructor: function(config) {
		var me = this;

		config.items = [
			{
    			text: config.text,
    			handler: function() {
    				me.setPressedButtons([]);

    				if (me.handler) {
    					me.handler(arguments);
    				}

    				var a = Ext.toArray(arguments);
    				a.unshift('tap');
    				me.fireEvent.apply(me, a);
    			}
			},
			{
    			xtype: 'ext_ux_dropdownbutton',
    			iconCls: 'arrow_down',
    			iconMask: true,
    			menu: config.menu,
    			handler: function() {
    				var a = Ext.toArray(arguments);
    				a.unshift('menushow');
    				me.fireEvent.apply(me, a);
    			}
			}
		];

		this.callParent(arguments);
	},

	initialize: function() {
		this.callParent(arguments);

		var me = this;
		this.menu = this.items.get(1).menu;
		this.menu.on('hide', function() {
			me.setPressedButtons([]);
		});
	},

	destroy: function() {
		if (this.menu && this.menu.destroy) {
			this.menu.destroy();
		}

		this.callParent(arguments);
	}
});

Please note that SplitButton uses the Menu and Drop down button components from the previous two blog posts, here and here.

The SplitButton itself is just a plain SegmentedButton having 2 sub-buttons, one a plain old Touch button and the second a custom DropDownButton from the previous blog post with a menu. SplitButton manages the pressed states of the 2 buttons together with some other routine plumbing jobs.

Finally here's how to use this component:

{
	xtype: 'ext_ux_splitbutton',
	text: 'Split Button',
	handler: function() {
		Ext.Msg.alert('', 'Main button was clicked');
	},
	listeners: {
		//You can use 'tap' listener also here to handle 'tap' on main button press.
		menushow: function() {
			//Can't use an alert here, as click OK would hide the menu.
			//So appending to panel.
			var pnl = Ext.getCmp('pnl1');
			pnl.setHtml((pnl.getHtml() || '') + '<br />Split Button Menu is being shown');
		}
	},
	menu: {
		items: [
			{
				text: 'Level 1 - Item 1',
				handler: function() {
					Ext.Msg.alert('', this.getText() + ' clicked.');
				}
			},
			{
				text: 'Level 1 - Item 2',
				handler: function() {
					Ext.Msg.alert('', this.getText() + ' clicked.');
				}
			},
			{
				text: 'Level 1 - Item 3 with sub-menu',
				items: [
					{
						text: 'Level 2 - Item 1',
						handler: function() {
							Ext.Msg.alert('', this.getText() + ' clicked.');
						}
					},
					{
						text: 'Level 2 - Item 2 with sub-menu',
						items: [
							{
								text: 'Level 3 - Item 1',
								handler: function() {
									Ext.Msg.alert('', this.getText() + ' clicked.');
								}
							},
							{
								text: 'Level 3 - Item 2',
								handler: function() {
									Ext.Msg.alert('', this.getText() + ' clicked.');
								}
							},
							{
								text: 'Level 3 - Item 3',
								handler: function() {
									Ext.Msg.alert('', this.getText() + ' clicked.');
								}
							}
						]
					},
					{
						text: 'Level 2 - Item 3 with sub-menu',
						items: [
							{
								text: 'Level 3 - Item 4',
								handler: function() {
									Ext.Msg.alert('', this.getText() + ' clicked.');
								}
							},
							{
								text: 'Level 3 - Item 5',
								handler: function() {
									Ext.Msg.alert('', this.getText() + ' clicked.');
								}
							},
							{
								text: 'Level 3 - Item 6',
								handler: function() {
									Ext.Msg.alert('', this.getText() + ' clicked.');
								}
							}
						]
					}
				]
			}
		]
	}
}

Simple I think it is, text config option for the main button and menu for the drop-down part. You can specify a handler for listening to tap on the main button part (or you can specify a tap listener explicitly too). Another custom event menushow is triggered each time you click the drop-down icon.