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

[elilindner]

Very nice plugin.

Not sure if you can do this out of the box, but instead of returning a number of POST variables, I have created a small override to submit an array of values instead.

Ext.override(Ext.ux.form.field.BoxSelect, {
    getSubmitData: function() {        var val = {};        val[this.name] = Ext.JSON.encode(this.getSubmitValue());        return val;    }
}); 

[ngd]

I would like the combo-box's height to remain unchanged as I have a space constraint. How do I do that?

I tried a few css settings but a) doesn't work in all browsers and b) cursor doesn't move back to the first option.

Any help will be be appreciated. Thanks again for some wonderful work.

[tommytob]

I must say it's a great plugin,

but I have the same problem as smalltalker and ngd

the panel/fieldset/... where the boxselect is into will not change the heigth

greetz thomas

[commanche]

It's a nice extension, thanks for sharing it.

However, there is a small problem when using it in "autocomplete" mode. If the user clicks at the input field to enter some text to be found, the trigger action is fired and the query tries to fetch all the records which is not desired. The query should be fired after certain number of letters (minChars) has been entered.

I'd suggest adding a config option like triggerOnClick: true/false like this:

    triggerOnClick: false,

    // skip

    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;
        }


        if (itemEl) {
            if (closeEl) {
                me.removeByListItemNode(itemEl);
            } else {
                me.toggleSelectionByListItemNode(itemEl, evt.shiftKey);
            }
            me.inputEl.focus();
        } else {
            if (this.triggerOnClick) {
                me.onTriggerClick();
            }
        }
    },

[kveeiv]

I appreciate everyone's patience and wanted to just post a quick message to say that this extension is still being maintained and the contributions that have been made as well as some other bug fixes will be included in an update that will be coming in the next week. Thanks for everyone's support!

[tommytob]

I have the solution. You must not use the hbox but a column layout.

[sankarbaluz]

Hi,
Thanks for your great plugin.Could I understand that how we are giving "displayFieldTpl"?I am getting only the "displayField" in my combo.Please help me out from this.I given something like:

displayFieldTpl: '{ctrType} ({delFlg})'

Regards,
Sankar

[zombeerose]

Two bugs when using emptyText config...

1) Empty text is not displayed at all:

Ext.define('State', {
    extend: 'Ext.data.Model',
    fields: [
        {type: 'string', name: 'abbr'},
        {type: 'string', name: 'name'},
        {type: 'string', name: 'slogan'}
    ]
});


var states = [
    {"abbr":"AL","name":"Alabama","slogan":"The Heart of Dixie"},
    {"abbr":"AK","name":"Alaska","slogan":"The Land of the Midnight Sun"},
    {"abbr":"AZ","name":"Arizona","slogan":"The Grand Canyon State"}
];


var statesStore = Ext.create('Ext.data.Store', {
    model: 'State',
    data: states
});


var singleSelect = Ext.create('Ext.ux.form.field.BoxSelect', {
    emptyText: 'States',
    fieldLabel: 'Select a state',
    renderTo: Ext.getBody(),
    displayField: 'name',
    width: 500,
    labelWidth: 130,
    store: statesStore,
    queryMode: 'local',
    valueField: 'abbr'
});

2) Error "me.value is null" when setting multiSelect to false.

Ext.define('State', {
    extend: 'Ext.data.Model',
    fields: [
        {type: 'string', name: 'abbr'},
        {type: 'string', name: 'name'},
        {type: 'string', name: 'slogan'}
    ]
});


var states = [
    {"abbr":"AL","name":"Alabama","slogan":"The Heart of Dixie"},
    {"abbr":"AK","name":"Alaska","slogan":"The Land of the Midnight Sun"},
    {"abbr":"AZ","name":"Arizona","slogan":"The Grand Canyon State"}
];


var statesStore = Ext.create('Ext.data.Store', {
    model: 'State',
    data: states
});


var singleSelect = Ext.create('Ext.ux.form.field.BoxSelect', {
    emptyText: 'States',
    multiSelect: false,
    fieldLabel: 'Select a state',
    renderTo: Ext.getBody(),
    displayField: 'name',
    width: 500,
    labelWidth: 130,
    store: statesStore,
    queryMode: 'local',
    valueField: 'abbr'
});

Running version 1.1

[notjoshing]

For lists with tens or even hundreds of items this works well. I've found it tends to bog down on larger lists, though. It may be a good idea to buffer the picker so that it only renders a limited selection at any given moment. What do you think?

[kveeiv]

1.2 has been released and the first post has been updated. Please see that post for a more complete list of updates. Many thanks go out to the many testing and coding contributions that have been made so far for this extension.

#1 When typing in a state in the examples, like "Conn" for conneticut, and then hitting return, Conneticut is entered into the field but then the text "Conn" is still after it. If a match is found and the return key is pressed, the typed text showed go away (?)

I have tied this behavior to the pinList: false configuration.

#2 I tried using a store with a proxy to get data remotely and I load that using the .load() command on the store when I first create my form that the box select field is in. But if I try to use local query mode when I try to select an item from the list nothing shows up in the field after I click on a selection. If I switch to remote I am sent a query string on the server side which I can use to filter the list but I would prefer to let the store search the store that is already loaded rather than having to go to the server.

Can you please try this with 1.2? If you're still able to duplicate it but unable to debug the problem, I will need a small example. What you describe is my most common use case, so this should be working.

When you select an item, the top of the control moves up

I would like the combo-box's height to remain unchanged as I have a space constraint. How do I do that?

the panel/fieldset/... where the boxselect is into will not change the heigth

I have the solution. You must not use the hbox but a column layout.

All of these comments should be addressed in 1.2. The component layout has been redone and should respect heights that are set by the containing layout, through the initial configuration, or directly manipulated through things like setHeight. As hbox is for fixed heights, if you want the field to grow you will want to use a column layout as you mentioned. Additionally, support for the grow/growMin/growMax configuration options has been added, so you should now be able to achieve any desired effects with regards to height and layout.

Not sure if you can do this out of the box, but instead of returning a number of POST variables, I have created a small override to submit an array of values instead.

Thanks for the contribution! I have incorporated this functionality in to 1.2, configurable via the encodeSubmitValue option.

However, there is a small problem when using it in "autocomplete" mode. If the user clicks at the input field to enter some text to be found, the trigger action is fired and the query tries to fetch all the records which is not desired. The query should be fired after certain number of letters (minChars) has been entered. I'd suggest adding a config option like triggerOnClick: true/false

Thanks for the contribution! I have incorporated this functionality in to 1.2. I have defaulted this to 'true', but you can globally override this in your code by using Ext.ux.form.field.BoxSelect.prototype.triggerOnClick = false; if you find that matches more of your use cases.

Hi,
Thanks for your great plugin.Could I understand that how we are giving "displayFieldTpl"?

This is not a valid ComboBox configuration according to the docs. If you would like to implement support for this type of functionality, contributions are always greatly appreciated!

Two bugs when using emptyText config...
1) Empty text is not displayed at all:
2) Error "me.value is null" when setting multiSelect to false.

Thanks for the report. I have fixed the logic associated to emptyText that was introduced in 1.1, and have added emptyText configurations in to the examples page to prevent this error from popping back up.

For lists with tens or even hundreds of items this works well. I've found it tends to bog down on larger lists, though. It may be a good idea to buffer the picker so that it only renders a limited selection at any given moment. What do you think?

I haven't used it, but I believe ComboBox's configuration of 'pageSize' is exactly what you're looking for. BoxSelect currently doesn't manipulate the picker at all, so if it works for ComboBox it should work fine for this component as well.