You are hereBlogs / rahul's blog / Sencha Touch 2 - DropDownButton component for Touch

Sencha Touch 2 - DropDownButton component for Touch


rahul's picture

By rahul - Posted on 04 December 2011

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:

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);
	}
});

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):

 

{
	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.');
										}
									}
								]
							}
						]
					}
				]
			}
		}
	]
}

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.

 

AttachmentSize
sencha-touch-button-with-drop-down-menu.htm4.15 KB

Hello and thanks for your work.  This component worked flawlessly with the PR versions, however I cannot get it to work with the final 2.0.0 release.  The button shows up, but when you click, nothing happens. Do you have any idea what the problem might be?

rahul's picture

Hi Rod, please give me a day or two. I will test and get back.

Hi Rahul,

I too get the following error 

Error: [ERROR][Ext.ux.Menu#getObservableId] Invalid unique id of 'ext-ext.ux.menu-1' for this object

Thanks.

rahul's picture

Well that should be easy. Please change the xtype of the components to contain dashes instead of dots (e.g. change ext.ux.menu to ext-ux-menu).

Touch 2 does not like dots in xtypes.

Cheers bro! I was doing another project, searched for this error (in my case it was an alias) and removing the .'s worked!

Thanks Rahul,

But i now get this error:

TypeError: 'null' is not an object (evaluating 'this.getElement().getParent().getPageBox')

Hi Rahul,

Have you got this working in Sencha touch 2 , The menu button remains unresponsive.

Thanks.

Hi Rahul

Ihave a problem with the dropdown menu in the form with the menu i have a selectfield, after clicking the selectfield when i click on the dropdown menu, a mask appear and that persist.

 

can i get any help to resolv this issue.??

 

Thanks in advance.

 

Jerry

Hello,

In your example, currently, when you press menu (in Chrome browser) I see the menu, however, upon pressing level 1 - item 1 the sub menu appears underneath upper menu, making it inaccessable.

Also, the menu does not collapse at all.
rad1964

Hi Rahul, thank you very much for this work.

I tried to create a list in a DropDown, and each item must connect to an existing view. The link I have to do inside the handler function? There is a specific method?

 

Thanks again.

Post new comment

The content of this field is kept private and will not be shown publicly.
Type the characters you see in this picture. (verify using audio)
Type the characters you see in the picture above; if you can't read them, submit the form and a new image will be generated. Not case sensitive.

Recent comments