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

  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
    222
    Vote Rating
    7
    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

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi