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:

 

{syntaxhighlighter brush: jscript;fontsize: 100; first-line: 1; }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);
}
});{/syntaxhighlighter}

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:

 

{syntaxhighlighter brush: jscript;fontsize: 100; first-line: 1; }{
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.’);
}
}
]
}
]
}
]
}
}{/syntaxhighlighter}

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.