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

[charlie17]

Love the plugin - but have found an issue. When used along with ext-all-scoped.css, the boxselect will not 'auto-expand' as new selections are added to the box. Its height remains at one line.

When used with ext-all.css, it works just fine.

I'm going to dig in and see if I can find a manual fix within ext-all-scoped.css...but maybe someone else has already dealt with this?

I need to use ext-all-scoped.css to avoid other problems in my app, so sort of stuck between a rock and a hard place.

[charlie17]

Found the culprit - the following appears at line 7746 of ext-all-scoped.css, and gets applied to the boxselect:

.x-border-box .x-reset .x-form-text {
height: 22px;
}

It does not come into play when using ext-all.css.

Seems this 'hard-codes' the height of the boxselect, preventing auto-expansion.

[bobmanc]

I am trying to use this for multiple emails with auto-suggest using a remote store. If I have two fields (To and CC) and I type an unknown value in the first and tab to the second and enter the minimum chars (minChar) it calls load on the store and the label of the first field changes to NaN.

[bobmanc]

I guess this extension has become unsupported

[ernst96]

I found that when using setValue() while queryMode is set to true the store will execute a query correctly and load the returned records into the store, however the values are not being selected.

Unless I am missing something this is because of a problem with setValue():

    setValue: function(value, doSelect, skipLoad) {
        var me = this,
        valueStore = me.valueStore,
        valueField = me.valueField,
        record, len, i, valueRecord, h,
        unknownValues = [];


        if (Ext.isEmpty(value)) {
            value = null;
        }
        if (Ext.isString(value) && me.multiSelect) {
            value = value.split(me.delimiter);
        }
        value = Ext.Array.from(value, true);


        for (i = 0, len = value.length; i < len; i++) {
            record = value[i];
            if (!record || !record.isModel) {
                valueRecord = valueStore.findExact(valueField, record);
                if (valueRecord >= 0) {
                    value[i] = valueStore.getAt(valueRecord);
                } else {
                    valueRecord = me.findRecord(valueField, record);
                    if (!valueRecord) {
                        if (me.forceSelection) {
                            unknownValues.push(record);
                        } else {
                            valueRecord = {};
                            valueRecord[me.valueField] = record;
                            valueRecord[me.displayField] = record;
                            valueRecord = new me.valueStore.model(valueRecord);
                        }
                    }
                    if (valueRecord) {
                        value[i] = valueRecord;
                    }
                }
            }
        }


        if ((skipLoad !== true) && (unknownValues.length > 0) && (me.queryMode === 'remote')) {
            var params = {};
            params[me.valueField] = unknownValues.join(me.delimiter);
            me.store.load({
                params: params,
                callback: function(records) {
                    if (me.itemList) {
                        me.itemList.unmask();
                    }                    
                    // value and doSelect are out of scope; use the records returned by the query instead
// and hardcode doSelect to true
                    // replaced 
                    // me.setValue(value, doSelect, true);
                    // with
                    me.setValue(records, true, true); 
                    me.autoSize();
                }
            });
            return false;
        }


        // For single-select boxes, use the last good (formal record) value if possible
        if (!me.multiSelect && (value.length > 0)) {
            for (i = value.length - 1; i >= 0; i--) {
                if (value[i].isModel) {
                    value = value[i];
                    break;
                }
            }
            if (Ext.isArray(value)) {
                value = value[value.length - 1];
            }
        }


        return me.callParent([value, doSelect]);
    },

[scottw]

Thank you for the time you have spent creating this terrific component.

I am having an issue using "filterPickList". I'm running on ExtJS 4.1.3 and am using a remote store. I get the following error:

Uncaught TypeError: Object [object Object] has no method 'createFilterFn'

This error is occurring in the "onTypeAhead" function:

    onTypeAhead: function() {
        var me = this,
        displayField = me.displayField,
        inputElDom = me.inputEl.dom,
        valueStore = me.valueStore,
        boundList = me.getPicker(),
        record, newValue, len, selStart;

        if (me.filterPickList) {
            var fn = this.createFilterFn(displayField, inputElDom.value);

In digging into this, the "createFilterFn" method exists on the store, not on the ComboBox, so I can see why the error is occurring. I had to change it to:

var fn = this.store.createFilterFn(displayField, inputElDom.value);

[srarnold]

Still loving this control, but have come across a little issue running under Ext JS 4.2, it is easier to show the screen shots than try and explain the problem so here goes:
This screen shot is the BoxSelect running under Ext JS 4.2, as you can see you now have a white line under the drop down trigger, also the small 'x' is missing on the selected item, and is no longer aligned at the top of the control

ExtJS42.png
ExtJS41.png
The bottom image is the same code running under Ext JS 4.1, can anybody help me and get this control to work the same under Ext JS 4.2 ?

I will add, that it just seems to be more cosmetic issues with the control than behavior, apart from the 'x' missing on the item which you can no longer remove from the list by clicking on it, you now have to press backspace to delete the items.

Thanks in advance.
Simon.

[charlie17]

Ditto - 4.2 is a non-starter for me without the functioning box select. Hope this can be addressed...

[Avman2119]

Has anyone been able to get the BoxSelect auto expand (when selecting multiple items) to work in a tbar of a grid?

[Avman2119]

nm figured it out. you have to give the grid an id and then override the .x-form-text css class to height: auto