vrs.ux.MenuPanel: Extension to simplify creation of ios style menus with forms

[abierbaum]

On one of my current projects, I found that I needed to create a lot or "menus" in the interface with a look and feel similar to the iPhone settings menus. I was having trouble making it easy to create something that looked good and didn't take a lot of code. So I created an extension that allows for the simple creation of menus with decorations (left and right side icons) using sencha touch FormPanel and fieldsets. I also included a styling flag to allow developers to make it look a bit more like iOS. Hopefully this will prove useful for other people.

You can find links to demo and source code on github: https://github.com/vrsource/vrs.ux.touch/wiki

The code looks like:

   menu_items = [
      {content: 'Photo Gallery', leftIcon: 'img/flower.png', rightIcon: 'img/chevron.png'},
      {content: 'Messaging', leftIcon: 'img/sms.png', rightIcon: 'img/chevron.png'},
      {content: 'Allow Tracking', leftIcon: 'img/checked.png' }
   ]

   var menu = new vrs.ux.touch.MenuPanel({
      menuItems: menu_items,
      listeners: {
         itemTap: function(fl, index) { console.log('Tapped index: ', index); },
         leftTap:   function(fl, index) { console.log('Left item selected: ', index); },      
      }
   });

Let me know what you think. If you have ideas, please pass them along or better yet fork the code on github and try it out.

[steve1964]

Hi, very well done, i'm using your plugin for a "more" tab in an app i'm developing. I've tested the plugin on iPad, iPod, Samsung Galaxy Tab and Samsung Galaxy GT 9003 and it work as expected.
Thanks a lot...

[abierbaum]

Hi, very well done, i'm using your plugin for a "more" tab in an app i'm developing. I've tested the plugin on iPad, iPod, Samsung Galaxy Tab and Samsung Galaxy GT 9003 and it work as expected.
Thanks a lot...

that is great to hear. I am glad it is proving useful.

[eyalfx]

I just started using it and whaooo... it's unbelievable.
Thank you so much for sharing it.
YOU ROCK!