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

Use an object tag instead of an iframe and see if that makes a difference.