Hybrid View

  1. #1
    Ext JS Premium Member cnelissen's Avatar
    Join Date
    Sep 2007
    Location
    California
    Posts
    222
    Vote Rating
    7
    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
    222
    Vote Rating
    7
    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