Ext.ux.form.CheckboxCombo

[cnelissen]

This is very similar to Saki's LovCombo extension (http://www.extjs.com/forum/showthread.php?t=32692), however it extends TriggerField rather than ComboBox and uses a CheckboxGroup internally rather than templates.

Features Include:

• Supports mostly all the same config options as a regular combobox
• Works fine as a grid editor
• Supports keyboard navigation
• Tested in Chrome, FF, and IE8

getValue() will return data like 'value,value,value', and you can use setValue() similarly, ie. checkboxCombo.setValue('value,value,value');

As always, feedback is appreciated. Have fun with it!

Download is available at: http://code.google.com/p/extuxcheckboxcombo/

* UPDATE 12/30/2010 *
Minor bug fixes
Added template support to more closely mimic a regular combobox
Added support for a 'change' event which bubbles the change event from the CheckboxGroup
Incorporated changes submitted by @mitchellsimoens (Thanks Mitchell!)

* UPDATE 5/6/2010 *
Some minor speed enhancements
Moved code over to Google code

* UPDATE 4/22/2010 *
Fixed a couple bugs, corrected issues with maxHeight, and triggerAction = 'all'
Also now includes minified versions of the js and css files

[fargs]

Thanks for the control but I am having the same issue as with Saki's when using it in a grid editor.

Firstly, I had to make the following changes to get the renderer working:

Ext.each(value, function(v) {
            if (this.editor.field.valueField){
                var r = this.editor.field.findRecord(this.editor.field.valueField, v);
                if (r) {
                    text.push(r.data[this.editor.field.displayField]);
                }
            }
        }, this);

Also, when I edit a field and check items then lose focus on the cell to edit another cell, the list is selected with the previous items. I believe this may have to do with each cell hooked into the same store but I'm not sure. I will dig a little further but I was just wondering if you have run into this issue when using the control in a grid.

Thanks,

[fargs]

Anyone that has tried to use a multiselect list in a grid editor might have run into the same problem I have:

Problem
The checked boxes were not updated for each field. The were only set on addCheckColumns which was not called everytime the editor was activated.

Solution:
Separate the creation of the checkbox list and the setting of the checkbox values. I added this function:

setCheckboxValues: function(vals){
        if (typeof vals == 'string') {
            vals = vals.split(',');
        }

        for (var i=0; i < this.cbgroup.columns; i++){
            if (this.cbgroup.panel.getComponent(i).items.length > 0){
                this.cbgroup.panel.getComponent(i).items.each(function(cb) {
                    cb.setValue(false);
                });
            }
        }
        
        Ext.each(vals, function(v) {
            if (this.valueField){
                for (var i=0; i < this.cbgroup.columns; i++){
                    if (this.cbgroup.panel.getComponent(i).items.length > 0){
                        this.cbgroup.panel.getComponent(i).items.each(function(cb) {
                            if (v == cb.inputValue)    
                                cb.setValue(true);
                        });
                    }
                }
            }
        }, this);
    },

And I added an onFocus event handler to this:

onFocus: function(){
        Ext.ux.form.CheckboxCombo.superclass.onFocus.apply(this, arguments);
        this.setCheckboxValues(this.getValue());
    },

Thanks,

[spiderman123]

hi,

can you show me how i can add it into editor grid?

thx

[cnelissen]

Something like this should work:

var cm = new Ext.grid.ColumnModel({
    defaults: {
        sortable: true
    },
    columns: [{
        header: 'Checkboxes',
        dataIndex: 'checkboxes',
        renderer: function(value) {
            return this.editor.field.gridRenderer(value);
        },
        editor: new Ext.ux.form.CheckboxCombo({
            store: new Ext.data.ArrayStore({
                fields: ['value', 'label'],
                data: [
                    ['value1', 'Text 1'],
                    ['value2', 'Text 2'],
                    ['value3', 'Text 3'],
                    ['value4', 'Text 4']
                ]
            }),
            valueField: 'value',
            displayField: 'label',
            allowBlank: true
        })
    }]
}); 

[vikbht]

Excellent stuff! just what the doctor ordered