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

[moegal]

this is very nice. Is there any way I can limit the number of selections? I want the user to only select 3.

Thanks, Marty

[xidianamoi]

a great extension

[Mark]

Hi Clint,
would you be so kind and post an example with a remote store,please?
I'd tried quite hard to get it, but with no success!
Here is my testcase:

var F1 = {
      xtype: 'form',
      id: 'form_add_address_diverse',
      bodyStyle: 'padding:15px;background:transparent',
      border: false,
      url: '/func/ext/save_new_diverse.php',
      labelWidth: 60,
      items:[

          {xtype: 'textfield',
          anchor: '100%',
          labelStyle: 'color:#999999;padding:0',
          fieldLabel: 'Firma',
          name: 'NAME',
          allowBlank: false
          },
          {xtype: 'textarea',

          labelStyle: 'color:#999999;padding:0,margin:0',
          fieldLabel: 'Adresse',

          anchor: '100%',
          name: 'ADDRESS',
          allowBlank: true
          }, {
          xtype: 'checkboxcombo',
          width: 150,
          mode: 'remote',
          store: new Ext.data.Store(
              {
              proxy: new Ext.data.HttpProxy(
                  {
                  url: 'func/ext/getCombos_openitems.php?TYPE=CUSTOMER&ADDRESSID=70126',
                  autoLoad: true,
                  method: 'GET'

                  }
                ),
              reader: new Ext.data.JsonReader(
                  {
                  root: 'data',
                  totalProperty: 'total'
                  },
                  [
                    {
                    name: 'V_FIELD'
                    },
                    {
                    name: 'D_FIELD'
                    }
                  ]
                )
              }
            ),

          valueField: 'V_FIELD',
          displayField: 'D_FIELD',
          allowBlank: true
          }
        ],
      buttonAlign: 'center',
      buttons:[
          {
          text: 'Speichern',
          handler: function() {
              var f = Ext.getCmp('form_add_address_diverse');
              f.getForm().submit();
              win.close();
            }
          },
          {
          text: 'Abbrechen',
          handler: function() {
              win.close();
            }
          }
        ]
      }

      win = new Ext.Window(
        {
        title: 'Combotest',

        layout: 'form',
        id: 'win',
        width: 340,
        height: 260,
        closeAction: 'close',

        items:[F1]
        }
      );
      win.show();

    }
  );

What am I missing??
Thanks in advance!

Mark

[cnelissen]

Try this, it works fine for me:

{
	xtype: 'checkboxcombo',
	hiddenName: 'field_name',
	fieldLabel: 'Field Label',
	store: new Ext.data.JsonStore({
		fields: ['value', 'label'],
		url: 'func/ext/getCombos_openitems.php?TYPE=CUSTOMER&ADDRESSID=70126',
		method: 'GET',
		autoLoad: true
	}),
	valueField: 'value',
	displayField: 'label',
	allowBlank: true
}