1. #1
    Sencha User
    Join Date
    Nov 2011
    Posts
    39
    Vote Rating
    0
    uksencha is on a distinguished road

      0  

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

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


    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

  2. #2
    Sencha User
    Join Date
    Nov 2011
    Posts
    39
    Vote Rating
    0
    uksencha is on a distinguished road

      0  

    Default


    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

  3. #3
    Sencha User
    Join Date
    Nov 2011
    Posts
    39
    Vote Rating
    0
    uksencha is on a distinguished road

      0  

    Default


    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.

  4. #4
    Sencha User
    Join Date
    Nov 2011
    Posts
    39
    Vote Rating
    0
    uksencha is on a distinguished road

      0  

    Default


    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