1. #1
    Ext JS Premium Member cnelissen's Avatar
    Join Date
    Sep 2007
    Location
    California
    Posts
    220
    Vote Rating
    6
    cnelissen is on a distinguished road

      0  

    Default Ext.ux.form.CheckboxCombo

    Ext.ux.form.CheckboxCombo


    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
    Attached Images
    - Clint Nelissen

  2. #2
    Ext JS Premium Member
    Join Date
    Oct 2009
    Location
    Hamilton ON Canada
    Posts
    25
    Vote Rating
    0
    fargs is on a distinguished road

      0  

    Default


    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:

    Code:
    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,

  3. #3
    Ext JS Premium Member
    Join Date
    Oct 2009
    Location
    Hamilton ON Canada
    Posts
    25
    Vote Rating
    0
    fargs is on a distinguished road

      0  

    Default


    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:

    Code:
    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:

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

  4. #4
    Sencha User
    Join Date
    Feb 2008
    Posts
    30
    Vote Rating
    0
    spiderman123 is on a distinguished road

      0  

    Default


    hi,

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

    thx

  5. #5
    Ext JS Premium Member cnelissen's Avatar
    Join Date
    Sep 2007
    Location
    California
    Posts
    220
    Vote Rating
    6
    cnelissen is on a distinguished road

      0  

    Default


    Something like this should work:

    PHP Code:
    var cm = new Ext.grid.ColumnModel({
        
    defaults: {
            
    sortabletrue
        
    },
        
    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',
                
    allowBlanktrue
            
    })
        }]
    }); 
    - Clint Nelissen

  6. #6
    Ext User
    Join Date
    Aug 2009
    Posts
    1
    Vote Rating
    0
    vikbht is on a distinguished road

      0  

    Default


    Excellent stuff! just what the doctor ordered

  7. #7
    Sencha User
    Join Date
    Mar 2008
    Posts
    566
    Vote Rating
    0
    moegal is on a distinguished road

      0  

    Default


    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

  8. #8
    Ext User
    Join Date
    Nov 2009
    Posts
    5
    Vote Rating
    0
    xidianamoi is on a distinguished road

      0  

    Default


    a great extension

  9. #9
    Sencha User
    Join Date
    Apr 2007
    Location
    Ettlingen, Germany
    Posts
    65
    Vote Rating
    0
    Mark is on a distinguished road

      0  

    Default Example with remote Store?

    Example with remote Store?


    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:
    Code:
    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

  10. #10
    Ext JS Premium Member cnelissen's Avatar
    Join Date
    Sep 2007
    Location
    California
    Posts
    220
    Vote Rating
    6
    cnelissen is on a distinguished road

      0  

    Default


    Try this, it works fine for me:

    Code:
    {
    	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
    }
    - Clint Nelissen