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

[dedoz]

first i love this ux saved so much time, i dont use Ext.combo anymore all my combos are boxSelect ;d

question, is there a event when user clicks a (already) selected value, that is displayed as a bubble in the rectangle field. when i click one of those it changes its color, so i guess theres a event for that ? thats not part of the default Ext.combox because there selected values arent displayed as bubbles :d


edit.
since i didnt find any event i added one :d, added one line that fires itemClick event passing the record clicked (added the red code)

onItemListClick: function(evt, el, o) {
        var me = this,
            itemEl = evt.getTarget('.x-boxselect-item'),
            closeEl = itemEl ? evt.getTarget('.x-boxselect-item-close') : false;
            
        
        if (me.readOnly || me.disabled) {
            return;
        }
        
        evt.stopPropagation();

        if (itemEl) {
            if (closeEl) {
                me.removeByListItemNode(itemEl);
            } else {
                 me.fireEvent('itemClick',me.getRecordByListItemNode(itemEl));
                me.toggleSelectionByListItemNode(itemEl, evt.shiftKey);

            }
            me.inputEl.focus();
        } else if (me.triggerOnClick) {
            me.onTriggerClick();
        }
        
        
    },

[srarnold]

It seems with this config option on, when I click on an empty control the first time I get this.createFilterFn is not a function line 946, my definition for the control is as follows:

{
xtype: 'boxselect',
labelAlign: 'top',
labelSeparator: '',
id: 'bxsTMRoles',
fieldLabel: 'Roles',
queryMode: 'local',
editable: true,
lastQuery: '',
typeAhead: true,
emptyText: 'Please select a role',
width: 320,
growMin: 75,
growMax: 150,
triggerOnClick: true,
forceSelection: true,
filterPickList: true,
displayField: 'Name',
valueField: 'RoleID',
store: roleListStore,
listeners: {
beforequery: function(qe) {
delete.qe.combo.lastQuery;
}
 }
 }

This does not seem to stop the control from working, I just keep getting these errors displaying in FireBug.

[kveeiv]

2.0.2 has been released! Please see the first post for more details. Most notably, events have been exposed for the selection/focusing of current values. I have added the event listeners of these (valuefocuschange, valueselectionchange) to the event logging example. This is somewhat experimental and I'd like to have a better use case and example for showing off this more advanced functionality. Feedback and contributions are greatly appreciated as always!

A plea on bug reports and questions:
I use the included examples/boxselect.html as a test bed when verifying a release against various browsers.

I have been getting a huge increase in invalid bug reports through this thread, private messages, and the github repository issues, that have fallen in to 2 buckets. The first is not specifying the proper doctype tags for older versions of IE, and the second is using mismatched versions of this component and ExtJS.

Please reproduce your issue in the simplified framework of examples/boxselect.html before submitting your request, as these reports are becoming quite time consuming and making it difficult to separate the signal from the noise for valid issues. By doing so, you will dramatically increase the odds and speed of someone helping resolve your issue! You are also much more likely to receive a response here in this thread than in a private message.

Thanks for your help and consideration!

[ettavolt]

Hello.
Thank you very much for maintaining such a wonderful component. After I've used it, I was able to completely remove some blocks from page.
However, there is a problem with laying out this field when it's width is managed by a container. InputElCt is sized with respect to old (before layout) field's width.
To fix this, a component's layout should be changed:

Ext.define('Ext.ux.layout.component.field.BoxSelectField', {

    /* Begin Definitions */

    alias: ['layout.boxselectfield'],

    extend: 'Ext.layout.component.field.Trigger',

    /* End Definitions */

    type: 'boxselectfield',

    /*For proper calculations we need our field to be sized.*/
    waitForOuterWidthInDom:true,

    beginLayout: function(ownerContext) {
        var me = this,
            owner = me.owner;

        me.callParent(arguments);

        ownerContext.inputElCtContext = ownerContext.getEl('inputElCt');
        owner.inputElCt.setStyle('width','')

        me.skipInputGrowth = !owner.grow || !owner.multiSelect;
    },

    beginLayoutFixed: function(ownerContext, width, suffix) {
        var me = this,
            owner = ownerContext.target;

        owner.triggerEl.setStyle('height', '24px');

        me.callParent(arguments);

        if (ownerContext.heightModel.fixed && ownerContext.lastBox) {
            owner.listWrapper.setStyle('height', ownerContext.lastBox.height+'px');
            owner.itemList.setStyle('height', '100%');
        }
        /*No inputElCt calculations here!*/
    },

    /*Calculate and cache value of input container.*/
    publishInnerWidth:function(ownerContext) {
        var me = this,
            owner = me.owner,
            width = owner.itemList.getWidth(true) - 10,
            lastEntry = owner.inputElCt.prev(null, true);

        if (lastEntry && !owner.stacked) {
            lastEntry = Ext.fly(lastEntry);
            width = width - lastEntry.getOffsetsTo(lastEntry.up(''))[0] - lastEntry.getWidth();
        }

        if (!me.skipInputGrowth && (width < 35)) {
            width = width - 10;
        } else if (width < 1) {
            width = 1;
        }
        ownerContext.inputElCtContext.setWidth(width);
    }

});

Usually fields do no calculations, because they are rendered as<table>s.

With hope this is useful,
Arseniy.

[gaurav.rehan]

Hi, is there a mobile version of BoxSelect available? I am working on a html application for Blackberry 9790 device. this BoxSelect control is little too heavy/and slow on the actual device. It will be good to know if there is a light weight/mobile friendly version of this control available.
Thanks,
Gaurav

[alicexyl]

How can I remove an item from drop-down menu when user select that items?
(as SuperBox do).
Thanks

Use filterPickList. You can see this work in the demo.

[alicexyl]

While testing in Chrome, I found an issue where 'beforedeselect' event isn't fired when:

1. The box select has just been loaded with existing value(s)
2. User deletes one of the values

In this case, only 'change' event is fired. If user adds a new value, then delete, then 'beforedeselect' is fired. Since 'change' event does not distinguish between user change and programmatic change, we don't want to put logic related to user-initiated change in its handler. Here's a test case:

            var countrySelectionBox = X4.create('Ext.ux.form.field.BoxSelect', {
                id:'countrySelectionBox',
                emptyText: 'Enter a country',
                 store: <countries store>,

               value: ['US', 'BR'],
                queryMode: 'local',
                displayField: 'value',
                width:410,
                valueField: 'id',
                hideTrigger: true,
                triggerOnClick: false, 
                filterPickList: true, 
                listConfig: {
                    resizable: true
                },
                listeners: {
                    'change': function (bs, newValue, oldValue) {
                        console.log("new: " + newValue + " old: " + oldValue);
                    },
                    'beforedeselect': function (bs, record) {
                        console.log("Removed " + record.getId());
                    },
                    'select': function (bs, records) {
                        console.log("Selected " + records);
                    }
                }
            });

UPDATE: Did more debugging. Looks like if user deletes a value right after the box select is loaded, then the picker is not available yet, so in BoxSelect.syncSelection(), a whole block of code is not run:

    syncSelection: function() {
        var me = this,
        picker = me.picker,
        valueField = me.valueField,
        pickStore, selection, selModel;

*** Block below not run because picker isn't available ***
        if (picker) {
            pickStore = picker.store;


            // From the value, find the Models that are in the store's current data
            selection = [];
            if (me.valueStore) {
                me.valueStore.each(function(rec) {
                    var i = pickStore.findExact(valueField, rec.get(valueField));
                    if (i >= 0) {
                        selection.push(pickStore.getAt(i));
                    }
                });
            }


            // Update the selection to match
            me.ignoreSelection++;
            selModel = picker.getSelectionModel();
            selModel.deselectAll();
            if (selection.length > 0) {
                selModel.select(selection);
            }
            if (me.ignoreSelection > 0) {
                --me.ignoreSelection;
            }
        }
    },

UPDATE 2: I found a workaround that seems to work well for me, which is to call createPicker() in the 'change' event handler if it's not available yet:

            'change': function (bs) {
                if (!bs.getPicker()) {
                    bs.createPicker();
                }
            }

[kveeiv]

2.0.3 has been released. Please see the first post for details. This release includes a layout fix posted by ettavolt that resolves field relayouts and some layout issues with older versions of IE. I had been having difficulty reproducing these IE issues, so much appreciation to ettavolt for providing a fix that has resolved them for the users that had been reporting them! This release also includes some changes to the example documentation to be able to see the configs of the example BoxSelect's inline.

However, there is a problem with laying out this field when it's width is managed by a container. InputElCt is sized with respect to old (before layout) field's width.
To fix this, a component's layout should be changed:
....
[/CODE]
Usually fields do no calculations, because they are rendered as<table>s.

With hope this is useful,
Arseniy.

Thank you very much for this contribution. Several users had been reporting problems in IE7 and IE8 and this patch seems to have solved their problems as well, which I had not yet been able to reproduce.

Hi, is there a mobile version of BoxSelect available?

There is not of this particular component. Anything targeting the mobile platforms should really be using the Sencha Touch framework instead. I haven't looked in a little bit, but I think a few options for multi-select capabilities were circulating around the forums for ST 2.

alicexyl[/COLOR]]

While testing in Chrome, I found an issue where 'beforedeselect' event isn't fired when:

1. The box select has just been loaded with existing value(s)
2. User deletes one of the values

Can you give me a description of what functionality you were creating off of this event? I am not currently accounting for deselect from an event perspective (beyond what the superclass combobox control provides) and when I went to fix this issue I was torn in a few ways as to when/where to implement it. Some use cases would help define this better for me. I'm glad you have found a workaround in the meantime.

[ngd]

I know my request is going to sound ridiculous but given that your component works beautifully with remote stores, i would suggest it anyway.

For "single" valued combos, provide a config option that will make it look like a regular combo i.e. w/o the border and the "cross" symbol. That way I can use your combo everywhere. Currently I have a big problem in using ExtJS's native combo because it doesn't load default values in my combo if my combo is remote.

I've posted in various forums without success on how to achieve this. But since you do it anyway, I think it will be good.

[talha06]

Just a little suggestion, IMHO it'll be better if boxselect expands itself when input expands. And a clear button will be nice too..

Thanks a lot again for this *MUST* extension..