[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 :)

Thanks for the bug report.

The Select class has since been refactored and this issue has now be resolved. Marking as fixed.

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.............