extjs apps on iphone

Question

This is an extjs single-page application which works fine in FF, IE, and Safari.

There are several problems with viewing or using this extjs app in the iphone. The extjs panels/windows do not resize, as it would in a normal screen. When the user zooms out, the expanding viewing area is blanked out. An example image is below:

• Iphone does not recognize the combo box of the extjs.
• Unable to scroll down.

Viewport Issue: The main issue is with the viewport. It does not scroll or zoom properly in Iphone.

Answer 1

Ext JS is not (and will likely not be) optimized for mobile devices. That's the purpose for Sencha Touch, which is the mobile framework built on Ext JS and specifically intended for iPhone and Android. I doubt you're going to have much luck resolving these types of issues using standard Ext JS.

Answer 2

We have experienced the same kind of problem with ExtJS and iPhones, and a slightly different, yet comparable, problem with android devices. I guess that those browsers report the screen size in a way that confuses ExtJS, so the layout mechanisms do not work. Since Sencha Touch has a similar API like ExtJS, making a Sencha Touch version of your software is probably the smartest way to make it work properly on iDevices and Androids.

Answer 3

Rather than using viewport, I used a column layout panel container. Most of the extjs stuff works fine. I placed this container layout into a div and specified its height and width. Also, <meta name="viewport" content="height=700" />.