Skip to content

March 9, 2012

1

Making ExtJs (Submenus and Portal) iPad and iPhone friendly

by Joe Kuan

As far as I know there are two main areas in ExtJs applications that need some works for making it touch devices (such as iPad and iPhone) friendly. One area is where the components rely on mouse hover actions such as submenus, whereas the other one is the general drag & drop (DD) motions. For mouse hover actions, only a simple configuration is required. As for drag & drop, simply includes touchHandler code will do the trick. However, application such as portal requires workaround to make sure the portlet title bar supporting DD and at the same time the tool buttons in the title bar response to touch actions.

Submenus

When a mouse is hovered on top of submenus from a top drop down menu, it expands.

But if the submenu is touched on an iPad, the whole drop down menu disappears. To change that behaviour, do the following setting to make the submenu expand on touch events.

subMenuItem = menuConfig.add({
  text : 'Themes',
  iconCls : 'theme',
  hideOnClick: false,
  menu : {
    items : [{
    text : 'Blue',
    group : 'theme',

Drag & Drop – Portal

One of the most useful drag & drop applications is portal which you can move a portlet into any columns. Although importing the touchHandler code will make the application globally supporting touch events, this will make the tools buttons in the panel header inactive. As a result, the whole title bar including tool buttons only reacts to drag & drop.

The only work around that I can think of is to selectively transverse all the way down to the DOM levels and bind the touchHandler. Hence, don’t use the init function call from the example given in touchHandler code. Then applies the addEventListener calls to the panel title element. Here is the screenshot of the panel object dissected on panel.header field.

The first three nodes inside the panel.header.dom.childNodes array are the tool buttons (shown in screenshot above) and the last node is the element containing the title string. In fact, the title element is always the last child inside panel.header.dom.childNodes which panel.header.dom.lastChild can be used instead as a reference.

So here is the code to setup the title of the portlet supporting DD action under touch devices and at the same time does not affect the tool buttons.

afterrender : function(panel) {
  var el = panel.header.dom.lastChild;
  if (el) {
    el.addEventListener('touchstart', touchHandler, true);
    el.addEventListener('touchmove', touchHandler, true);
    el.addEventListener('touchend', touchHandler, true);
  }
}

If you can find a better or more elegant solution, then please let me know. Thanks

1 Comment Post a comment
  1. Oct 27 2012

    I tried using touchHandler for an Ext.slider but it didn’t have any effect. I’m relatively new to ExtJS, but do you have any suggestions/direction on how to get Ext.slider to respond to iPad touch events ? Thanks!

    Reply

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Note: HTML is allowed. Your email address will never be published.

Subscribe to comments

%d bloggers like this: