1. #1
    Sencha User
    Join Date
    Aug 2011
    Posts
    43
    Answers
    4
    Vote Rating
    1
    camdagr8 is on a distinguished road

      0  

    Default Unanswered: Prevent searchfield focus

    Unanswered: Prevent searchfield focus


    Is it possible to prevent the searchfield from receiving focus?

    When I display a list with a docked toolbar & searchfield, the keyboard displays because the searchfield gets focus some how.

    I tried setting the searchfield's disabled value to false before showing the list and then using a timeout to set it back, but it still keeps getting focus some how.

    If anyone knows something or can tell me if this is a bug, I would appreciate it.

    I'm using Sencha Touch 2.2, phonegap 2.5.0, on iOS

    ss.jpg

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,327
    Answers
    3540
    Vote Rating
    850
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    How is that list being shown? It seems like the touch event is getting passed through the button to the search field because it's behind the button.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha User
    Join Date
    Aug 2011
    Posts
    43
    Answers
    4
    Vote Rating
    1
    camdagr8 is on a distinguished road

      0  

    Default


    That's what's most perplexing. The main container is an hbox layout.
    The list is at 0 and the container with the button is at 270 with a width of 320. There is another list to the right and it's at 540 and does the same thing when you click the button to display it (the search field receives focus). It's as if the tap event is firing on the entire main container (which it's not I checked). So in other words, the list isn't being overlaped by anything.

  4. #4
    Sencha User
    Join Date
    Aug 2011
    Posts
    43
    Answers
    4
    Vote Rating
    1
    camdagr8 is on a distinguished road

      0  

    Default Code

    Code


    Code:
    // Main Panel
    Ext.define('App.view.Main', {
        extend: 'Ext.Container',
        config: {
            hidden: true,
            fullscreen: true,
            id: 'main-container',
            items: [
                {
                    xtype: 'container',
                    id: 'main',
                    width: 860,
                    layout: 'hbox',
                    left: 0,
                    items: [
                        { // Menu
                            xtype: 'list',
                            id: 'menu',
                            width: 270,
                            height: window.screen.height - 20,
                            itemTpl: new Ext.XTemplate(
                                '{[this.label(values.title, values.icon)]}',
                                {
                                    compiled: true,
                                    label: function (title, icon) {
                                        if (!icon) {
                                            return '<span class="sprite-blank"></span><span class="list-label">'+title+'</span>';
                                        } else {
                                            return '<span class="sprite-'+icon+'"></span><span class="category">'+title+'</span>';
                                        }
                                    }
                                }
                            ),
                            data: [
                                {title: 'Events', icon: 'star'},
                                {title: 'Lorem Ipsum Dolor Sit Amet'},
                                {title: 'Lorem Ipsum Dolor Sit Amet'},
                                {title: 'Lorem Ipsum Dolor Sit Amet'},
                                {title: 'Lorem Ipsum Dolor Sit Amet'},
                                {title: 'Tours', icon: 'map'},
                                {title: 'Lorem Ipsum Dolor Sit Amet'},
                                {title: 'Lorem Ipsum Dolor Sit Amet'},
                                {title: 'Lorem Ipsum Dolor Sit Amet'},
                                {title: 'Lorem Ipsum Dolor Sit Amet'},
                                {title: 'Help Center',             icon: 'help'},
                                {title: 'Terms &amp; Policy',     icon: 'file',},
                                {title: 'Report A Problem',     icon: 'bug'}
                            ],
                            items: [
                                {
                                    xtype: 'toolbar',
                                    docked: 'top',
                                    cls: 'gradient-left',
                                    height: 48,
                                    items: [
                                        {
                                            xtype: 'searchfield',
                                            centered: true,
                                            width: '90%',
                                            id: 'menu-search',
                                            placeHolder: 'Search',
                                            name: 'search',
                                        }
                                    ]
                                },
                            ]
                        },
                        { // Content
                            xtype: 'container',
                            id: 'content',
                            width: 320,
                            height: window.screen.height - 20,
                            baseCls: 'gradient',
                            zIndex: 1000,
                            items: [
                                { // Titlebar
                                    xtype: 'titlebar',
                                    id: 'mainbar',
                                    docked: 'top',
                                    title: 'iHear',
                                    draggable: {
                                        direction: 'horizontal',
                                        listeners: {
                                            drag: function(draggable, evt, offsetX, offsetY) {
                                                var x = Core.dragStart + offsetX;
                                                Core.drag(x, evt.previousY);
                                            },
                                            dragend: function (draggable, evt) {
                                                Core.dragEnd();
                                            },
                                            dragstart: function (draggable) {
                                                var cont = Ext.getCmp('main');
                                                var x = cont.getLeft();
                                                Core.dragStart = x;
                                            }
                                       }
                                    },
                                    items: [
                                        { // Menu Button
                                            xtype: 'button',
                                            id: 'btn-menu',
                                            baseCls: 'z-button',
                                            cls: 'z-button-left',
                                            height: 50,
                                            style: {
                                                'padding-top': '12px',
                                                'text-align': 'center',
                                            },
                                            html : '<i class="icon-list"></i>',
                                            align: 'left',
                                        },
                                        { // Table of Contents Button
                                            xtype: 'button',
                                            id: 'btn-toc',
                                            baseCls: 'z-button',
                                            cls: 'z-button-right',
                                            height: 50,
                                            style: {
                                                'padding-top': '12px',
                                                'text-align': 'center',
                                            },
                                            html : '<i class="icon-headphones"></i>',
                                            align: 'right',
                                        }
                                    ]
                                },
                            ]
                        },
                        { // Table of contents
                            xtype: 'list',
                            id: 'toc',
                            width: 270,
                            height: window.screen.height - 20,
                            itemTpl: new Ext.XTemplate(
                                '{[this.label(values)]}',
                                {
                                    compiled: true,
                                    label: function (item) {
                                        var track = item.media;
                                        var icon = item.icon;
                                        var title = item.title;
    
                                        if (track) {
    
                                            return '<div class="list-icon"><i class="icon-play"></i></div> <span class="list-label">'+title+'</span>';
                                        } else {
                                            if (!icon) {
                                                return '<span class="sprite-blank"></span><span class="list-label">'+title+'</span>';
                                            } else {
                                                return '<span class="sprite-'+icon+'"></span><span class="category">'+title+'</span>';
                                            }
                                        }
                                    }
                                }
                            ),
                            data: [
                                {title: 'Record A Session',     icon: 'comment', media: null},
                                {title: 'Sessions',             icon: 'star', media: null},
                                {title: 'Lorem Ipsum Dolor Sit Amet', icon: null, media: 1},
                                {title: 'Lorem Ipsum Dolor Sit Amet', media: 2},
                                {title: 'Lorem Ipsum Dolor Sit Amet', media: 3},
                                {title: 'Lorem Ipsum Dolor Sit Amet', media: 4},
                            ],
                            items: [
                                {
                                    xtype: 'toolbar',
                                    docked: 'top',
                                    cls: 'gradient-right',
                                    height: 48,
                                    items: [
                                        {
                                            xtype: 'searchfield',
                                            centered: true,
                                            width: '90%',
                                            id: 'menu-search',
                                            placeHolder: 'Search',
                                            name: 'search',
                                        }
                                    ]
                                },
                            ]
                        },
                    ]
                }
            ],
        }
    });

  5. #5
    Sencha User
    Join Date
    Aug 2011
    Posts
    43
    Answers
    4
    Vote Rating
    1
    camdagr8 is on a distinguished road

      0  

    Default


    Does anyone know if it's possible to prevent the tap event from bubbling down/up?

  6. #6
    Sencha Premium Member
    Join Date
    Mar 2012
    Posts
    38
    Vote Rating
    1
    Matt_d is on a distinguished road

      0  

    Default Similar problem since upgrading Sencha Touch

    Similar problem since upgrading Sencha Touch


    I have a similar problem that has only emerged since I upgraded from Sencha Touch 1.9.0 to 2.1.1.

    I have a list view with no search bar. Tapping the list items opens a second list view with search bar. If I tap the top item in the first list view, the second list appears with the search bar selected and keyboard visible.

    I've been trying to stop the itemtap event from bubbling up using e.stopPropagation() in the handler of the itemtap event for the first list. So far I haven't had any luck getting this to work though. 'e' is supposed to be the event that's passed to the itemtap handler, but I've noticed that another parameter that's passed to this handler (the target which supposed to be of type Ext.Element) is not working either - see my posting here http://www.sencha.com/forum/showthre...in-Touch-2.1.1

  7. #7
    Sencha User
    Join Date
    Aug 2011
    Posts
    43
    Answers
    4
    Vote Rating
    1
    camdagr8 is on a distinguished road

      1  

    Default Hackish Fix

    Hackish Fix


    I ended up disabling the search field and then enabling it 600 ms later via setTimeout(); Hackish I know but I can't find anything else =\

  8. #8
    Sencha Premium Member
    Join Date
    Mar 2012
    Posts
    38
    Vote Rating
    1
    Matt_d is on a distinguished road

      0  

    Default


    Thanks for the update. Yeah, crude but effective! Hopefully this will be fixed in the next release of Sencha Touch.

  9. #9
    Sencha User
    Join Date
    Dec 2011
    Location
    Brazil
    Posts
    106
    Vote Rating
    0
    Perdiga is an unknown quantity at this point

      0  

    Default


    i am having this same issue, i open a bug report and i am using setTimeout as workaround

    http://www.sencha.com/forum/showthre...73#post1063773