Ext.ux.form.field.BoxSelect - Intuitive Multi-Select ComboBox

[kveeiv]

Actually, a slightly cleaner approach would be to add true as the second param on the Ext.Array.from that is already there to return a new reference

Thanks for the report, good catch. Added to next commit. I'll push these various changes up to github so that people that are following that repo can get them as they happen, and will let those build up for a few days before releasing a 2.0.1 so that people don't get release paralysis.

[alicexyl]

kveeiv, thank you very much for all your hard work on this great widget! It works great for me in Chrome and IE9, but in IE8, I'm getting error "SCRIPT438: Object doesn't support property or method 'addEventListener' ". Here's my BoxSelect config:

        var nameCombo = {
            xtype: 'boxselect',
            id: 'nameCombo',
            width: 430,
            hidden: true,
            fieldLabel: "Select a name", 
            store: nameStore,
            triggerAction: 'all',
            valueField: 'nameId',
            displayField: 'value',
            renderFieldBtns:false,
            listConfig: {
                resizable: true,
                cls: 'comboDisable'
            },
            listeners: {
                'beforeshow': function (cb, record, index) {
                                     ...
                },
                'select': function (cb, record, index) {
                                     ...
                },
                'beforeselect': function (cb, record, index) {
                                     ...
                }
            },
            emptyText: "Enter a name", 
            queryMode: 'local'
        };
        // Then add this as an item in a container to be rendered

This is happening in onRender(), which calls initTrigger(), which calls mon(triggerWrapper, {...}):

    initTrigger: function() {
            ...
            me.mon(triggerWrap, {
                click: me.onTriggerWrapClick,
                mouseup: me.onTriggerWrapMousup,
                scope: me
            });
            ...

Then it fails at registering the click handler:

addListener: function(element, eventName, fn, scope, options) {
            ...
            var dom = element.dom || Ext.getDom(element),
                bind, wrap;
            ...
            if (dom.attachEvent) {
                dom.attachEvent('on' + bind.eventName, wrap);
            } else {
                dom.addEventListener(bind.eventName, wrap, options.capture || false);
            }

Looks like the box select's dom is a DispHTMLElementCollection in IE8, with no attachEvent(). In IE9, it's an HTMLTableElement, with attachEvent(). This isn't a problem for a regular combo box somehow. Could you help provide any insight for fixing? Would really appreciate any help with this blocking issue.

[kveeiv]

@alicexyl Can you replicate this in a plain examples environment or provide a more simplified use case? I am unable to produce this error.

BoxSelect does not do any special handling of the trigger field on its own, so I am assuming this is something external to the class that you'll be able to get more help on in the q&a forum.

There are a couple of things that I can quickly note as places to start your debugging efforts though. The first is that 'renderFieldBtns' is not a valid configuration option so my first assumption would be that it is something happening in an override somewhere or this field was used as a replacement of another field and expected to have the same internal behavior. The second is that the 'id' configuration is being used. This is typically dangerous at best, you should look over the warnings about this configuration in the Ext docs as it could easily cause problems with your rendering and events.

[omarc]

Thanks for the update! I had been using this component with 4.0 and really liked it.

I have one suggestion, I noticed that there is a fixed amount of 35 pixels in Ext.ux.layout.component.field.BoxSelectField. If this could be configurable, that would be great since I have small fields that have multiSelect=false and they generate a new line when I don't need one.

Keep up the great work!

Omar

[alicexyl]

kveeiv, not sure exactly what happened, but the widget works in IE8 for me now. It's possible the Ext 3 to 4 migration tool I was using was interfering with it. There's no issue after all.

[alaley]

Hello!

I have tried to switch to boxselect-2.0 instead of 1.3 on my ExtJS-4.0.7 based project,
but got exceptions in BoxSelect.js. Looks like "valueStore" is not initialized, because "bindStore" function was renamed to "onBindStore".
So, should boxselect-2.0 be used with ExtJS 4.1+ only?

Excuse me for the dumb question, if any.

[abraxxa]

Yes that is a dumb question because the author wrote in his 4.1 support post that its only compatible with 4.1: http://www.sencha.com/forum/showthre...l=1#post818135

[alaley]

Thank you for pointing!

BTW, it would be good to see such mentions on the first page, because "now w/ 4.1 support!" does not automatically mean of dropping 4.0 support.

[alicexyl]

How do we change the template used to display the dropdown fields, and the selected fields? In SuperBoxSelect, the configs were tpl and displayFieldTpl. Woudl appreciate your help!

[kveeiv]

2.0.1 is now available for download. This release was largely centered around documentation. Please see the first post for more details.

Thank you for pointing!

BTW, it would be good to see such mentions on the first page, because "now w/ 4.1 support!" does not automatically mean of dropping 4.0 support.

Fair enough, adding that to the original post now.

How do we change the template used to display the dropdown fields, and the selected fields? In SuperBoxSelect, the configs were tpl and displayFieldTpl. Woudl appreciate your help!

With the release of 2.0.1, I've included an example that shows these configurations. Check it out!