CODEWITHSUNDEEP
javascriptextjscombobox
Hernan Diaz
Hernan Diaz

Reputation: 566

Select all - Select none in Ext JS Combobox

Based on the answer to this question: Select all in ExtJS 4.0 Combobox

afterrender: function () {
        me.container.on({
            click: function(e) {
                console.log('on clic called');
                var el = e.getTarget('div', 3, true);
                if(el.getAttribute('action') == 'select-all') {
                    me.select(me.getStore().getRange());
                    me.setSelectedCount(me.getStore().getRange().length, flabel);
                    allSelected = true;
                } else if (el.getAttribute('action') == 'select-none'){
                    me.reset();
                    allSelected = false;
                }
            }
        })
    }

I have implemented my own Combobox with 'Select All' and 'Select None' in Ext JS.

However, if I use it more than once, the actions are applied to all the instances. Just try to click 'Select all / Select none' in one combo and you will see how the other changes: http://jsfiddle.net/hernan666/vfbkgmmu/.

For the original answer I get the same wrong behavior: http://jsfiddle.net/hernan666/dFEsc/414/

I would appreciate any help to fix this issue

Upvotes: 0

Views: 355

Answers (1)

CD..
CD..

Reputation: 74126

I think using me.container.on is the problem.

I tried a different approach, based on your example, listening to the expand and then to the picker element click and it seems to work:

listeners: {
    expand: {
        single: true,
        fn: function () {
            var me = this,
                flabel = this.getFieldLabel();

            me.picker.on({
                click: {
                    element: 'el',
                    fn: function (e) {
                        var el = e.getTarget('div', 3, true);

                        if (el.getAttribute('action') == 'select-all') {
                            me.select(me.getStore().getRange());
                            me.setSelectedCount(me.getStore().getRange().length, flabel);
                            allSelected = true;
                        } else if (el.getAttribute('action') == 'select-none') {
                            me.reset();
                            allSelected = false;
                        }
                    }
                }
            });
        }
    }
}

A working example: http://jsfiddle.net/ot0eaqv1/

Upvotes: 2

Related Questions