Problems with sencha touch application inside an iframe

Question

In my webpage I have to show the contents of another webpage which is done using sencha touch.I am using iframes for this purpose.But the problem is that the select menu in the sencha touch webpage(loaded through iframe) is not coming when viewed in iphone browser.There is an overlay coming,but not the select menu.When the sencha touch app is viewed directly through the browser it is coming fine.So i figure the problem is with the iframe.Any solution to make this work with iframe?.Modifying the sencha touch will not be possible as this is being maintained by a different team and I dont have any control over that code.

To illustrate the problem I have loaded sencha touch kitchen sink app in an iframe.Here is the url. http://pastehtml.com/view/c6mqj67b0.html

Please open the select menu "Rank" from an iphone browser/simulator and you can see the problem.

Any solutions that can be done at my end to make this work?.

Thanks in advance.

Answer 1

Sorry @user700284 but overlay iframe not yet works on iOS and android browser; only for this moment works on browser desktop. But you can put iframe not overlay into your Ext.Panel something like this,

Ext.Panel({
   items: [
    {
       xtype: 'panel',
       html: '<iframe width="560" height="315" src="http://www.sencha.com/products/touch/" frameborder="0" allowfullscreen></iframe>',
       id: 'Idpanel',
       hideOnMaskTap: true
    },
   ]
})

Hope these helps. :)

Answer 2

使用对象标记而不是iframe，看看是否有所不同。

Answer 3

The iFrame loading a selectfield works perfectly on the iPad (native and mobile safari). But on the iPhone it gives the same error. Any other solutions for this ??