View Full Version : HTML inside Container

1 Jul 2013, 1:51 PM
The server is returning dynamically-generated HTML that I need to place inside an Ext.Container

The problem is that input textboxes are not working and not displaying the keyboard when they are tapped.

They do work in the desktop browsers but not in the mobile browsers.

<html manifest="" lang="en-US">
<meta charset="UTF-8">
<script id="microloader" type="text/javascript" src="../touch/microloader/development.js"></script>
<script type="text/javascript" src="app.js"></script>

name: 'MyApp',

launch: function() {

var container = Ext.create("Ext.Container", {

fullscreen: true,
html:"<input type='text' id='myTextbox' name='myTextbox' />"

I am using Sencha Touch 2.2.1 Commercial

Any ideas greatly appreciated.

Thank you!

2 Jul 2013, 3:56 AM
Use textfield instead :
here's the updated code :

var container = Ext.create("Ext.Container", {
fullscreen: true,
items :[
{xtype : 'textfield',
id: 'myTextbox',
name: 'myTextbox'
//html:"<input type='text' id='myTextbox' name='myTextbox' />"

2 Jul 2013, 7:17 AM

Thanks for the reply and yes, that works. But what I have is dynamically-generated HTML that I received via AJAX.

So far, what I have found is that if I reference the open source version from Sencha's CDN,
instead of the commercial version, it works; but I can't use that version for this project.

I am hoping Sencha is able to co-exist with regular HTML.

3 Jul 2013, 4:40 AM
Sounds like this bug: http://www.sencha.com/forum/showthread.php?264579

10 Jul 2013, 11:17 AM
Thank you Mitch. Yes, that seems to be exactly our case and it sounds like a bug.

What we did to work around this problem is to set the focus back to the input box on the "touchend" event.

Something similar to this:

var input = $('#myTextBox');
input.bind('touchend', function () {