Thank you for reporting this bug. We will make it our priority to review this report.
  1. #1
    Sencha User
    Join Date
    Jan 2008
    Location
    Toronto, Canada
    Posts
    480
    Vote Rating
    4
    elishnevsky is on a distinguished road

      0  

    Default [FIXED-502] List created by Select field is never destroyed if hidden on mask tap

    [FIXED-502] List created by Select field is never destroyed if hidden on mask tap


    Select field has createList function that creates List of options, which is configured with hideOnMaskTap: true. If a user taps one of the items in this List, it gets hidden and destroyed properly. However if a user taps on a mask, the list gets hidden but is never destroyed and therefore stays in DOM forever.

    Proposed solution in Select.js (the changes are highlighted in red):
    Code:
    createList: function() {
            return new Ext.List({
                store: this.store,
                tpl  : [
                    '<tpl for=".">',
                        '<div class="x-list-item">',
                            '<span class="x-list-label">{' + this.displayField + '}</span>',
                            '<span class="x-list-selected"></span>',
                        '</div>',
                    '</tpl>'
                ],
                cls             : 'x-select-overlay',
                itemSelector    : '.x-list-item',
                floating        : true,
                stopMaskTapEvent: true,
                hideOnMaskTap   : true,
                singleSelect    : true,
                
                listeners: {
                    selectionchange: {
                        fn: this.onListSelect,
                        scope: this
                    },
                    hide: function() {
                        this.destroy();
                    }
                }
            });
        },
    
        onListSelect : function(list, node, records) {
            var me       = this,
                selected = records[0];
            
            if (selected) {
                me.setValue(selected.get(me.valueField));
                me.fireEvent('select', me, me.getValue());
            }
            
            me.list.hide({
                type: 'fade',
                out: true
                
    // This is not needed because the list gets destroyed by its own hide event
    //          after: function() {
    //              me.list.destroy();
    //          },
    //          scope: me
                
            });
        },
    Something like this. It should to the trick although I haven't personally tested it

  2. #2
    Sencha - GXT Dev Team BrendanC's Avatar
    Join Date
    Aug 2010
    Posts
    534
    Vote Rating
    3
    BrendanC is on a distinguished road

      0  

    Default


    Thanks for the bug report.

  3. #3
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    16,778
    Vote Rating
    598
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default


    The Select class has since been refactored and this issue has now be resolved. Marking as fixed.
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  4. #4
    Sencha User
    Join Date
    May 2012
    Posts
    3
    Vote Rating
    0
    vijayarajan_1990 is on a distinguished road

      0  

    Default How to take control over multiple x-select-overlay classes ?????????

    How to take control over multiple x-select-overlay classes ?????????


    Hi,
    This is Vijay. I have a doubt. In my application there are more than one select fields. I need to configure each select field with different styles say colors, width, height. The id generated for x-select-overlay is not unique or is there anyway we can give an id to the x-select-overlays individually ?. Can anyone suggest a way to style the x-select-overlay classes individually. Is the createList function in this thread defined by Sencha or user defined ?? can we override this funciton in our code to take a control of x-select-overlay classes ???? Kindly reply with a solution asap. !!! Thanks in advance.............

Similar Threads

  1. Tap event on List
    By denishoctor in forum Sencha Touch 1.x: Discussion
    Replies: 5
    Last Post: 31 Aug 2010, 6:17 AM
  2. Replies: 0
    Last Post: 4 Aug 2010, 7:36 AM
  3. [FIXED] List on hidden panel is visible
    By GaryW in forum Sencha Touch 1.x: Bugs
    Replies: 7
    Last Post: 19 Jul 2010, 10:10 AM
  4. Update a hidden field on a ComboBox select?
    By travisbell in forum Ext 3.x: Help & Discussion
    Replies: 5
    Last Post: 22 Oct 2009, 3:38 PM
  5. Ext.form.Field (Select) Created From Existing Markup?
    By thejoker101 in forum Ext 2.x: Help & Discussion
    Replies: 2
    Last Post: 24 Jul 2007, 7:59 AM

Thread Participants: 3