Best Way To Add A Select Field To HTML Inside A Panel

[uksencha]

Hi

I need to add a select field inside some html that I have inside a panel.

I can't work out a way of adding a Sencha Touch Ext.form.Select to it so I tried using a simple html5 select and that works fine but every time I select something the screen bounces and the safari address bar becomes visible.

Could somebody tell me the best way to approach this please - I would be happy to either use the Sencha Touch Select (if possible) or the HTML 5 select.

Thanks

Chris

[uksencha]

This code shows what I am trying to do (simple example) :

var topBar = new Ext.Toolbar({
dock: 'top'
});

var bottomBar = new Ext.Toolbar({
dock: 'bottom'
});


var appPanel = new Ext.Panel({
fullscreen: true,
html: '<select><option value="1">First Option</option><option value="2">Second Option</option></select>',
dockedItems: [topBar,bottomBar]
});

In case anybody is wondering why I am not using a standard Sencha Form Panel - the above code is just a simple example. I need to create a canvas element on one panel in the app and then have a select field on the same panel - that is why I am using html.

Thanks

Chris

[uksencha]

Finally found something that seems acceptable - works ok with all but a small flicker on an IPhone 3gs.

I added an event listener for the focus event to the html5 select object as follows:

$('#impactSelect').bind('focus', function(e) {
$('html, body').animate({scrollTop:0,scrollLeft:0},'slow');
});

I am using JQuery for some other reasons but I am guessing you could do the same with a normal listener.

Hope this helps anyone else with the same problem.

[uksencha]

Hi

Sorry to be a nuisance but I just worked that on focus listener into my main code and I'm afraid now on the Iphone you get a brief flash of the address bar which makes it look really messy - I guess this is because the focus event does not fire quickly enough with all the other stuff going on in the screen.

Please can anyone think how I might fix this or alternatively use a Sencha Touch select field in an html panel.

Thanks

Chris