Continuing with my previous blog post on a Menu component for Sencha Touch 2, here I present a DropDownButton component for Touch 2 supporting any depth of nested sub-menus for the drop-down.

First a live example:

Now the source for the DropDownButton component:

{syntaxhighlighter brush: jscript;fontsize: 100; first-line: 1; }Ext.define(‘Ext.ux.DropDownButton’, {
extend: ‘Ext.Button’,
xtype: ‘ext_ux_dropdownbutton’,

initialize: function() {
if (this.menu) {
if (!this.menu.isComponent) {
this.menu = new Ext.ux.Menu(this.menu);
this.on(‘tap’, function() {
//Trying to show a menu which is already visible mysteriously masks the screen.
if (this.menu.isHidden()) {
this.menu.showBy(this);
}
});
}
}

this.callParent(arguments);
},

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

this.callParent(arguments);
}
});{/syntaxhighlighter}

As you can see, its a pretty simple component that creates a Ext.ux.Menu from the previous blog post out of the menu object in config, if specified and ensures Menu’s destruction when the button itself is destroyed. Bulk of the functionality for the menu comes from the code from the previous blog post referenced above.

And now sample code on how to use the DropDownButton component (this code produces the toolbar button in the above example):

{syntaxhighlighter brush: jscript;fontsize: 100; first-line: 1; }{
xtype: ‘toolbar’,
docked: ‘top’,
items: [
{
xtype: ‘ext_ux_dropdownbutton’,
text: ‘Drop Down Menu Button’,
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}

All you have to do is to use the xtype for the new component (ext_ux_dropdownbutton) and specify the configuration for the menu through menu config option to the button.

You can use handler config option or regular listeners option to subscribe to tap and/or other events for the menu items.