Ext.ux.CheckCombo

If you have store with this values: {[text: 'Active', value: 1], [text: 'Inactive', value: 2]}
Set them using

Code:

---

{
        value: '1, 2',
        name: 'test',
        xtype: 'checkcombo',
        store: someStore,
        displayField: 'text',
        valueField: 'value'
}

---

Hi Dario,

I just tried to update with the new version, and I now have nothing in my list but the 'No combo data' message.
In fact, my store is cleaned each time I click to expand the combo cause of :

Code:

---

beforequery: function(qe) {
  this.store.removeAll();
  delete qe.combo.lastQuery;       
}

---

Can you tell me what is the purpose behind this listener ?
Thnak you very much. ;)

Hey guys,

I just want to toss in another CheckComboBox implementation that I use. It's just a plugin to visually include the checkboxes into the combobox list. It doesn't do any other logical things, because the combobox already handles multiselect.

Code:

---

/**
 * @class Ext.ux.form.plugin.CheckComboBox
 * @ptype checkcombobox
 * Plugin for ComboBoxes with multiSelect that shows checkboxes in the combobox boundlist.
 * @author makana
 * @date 2013-01-04
 */
Ext.define('Ext.ux.form.plugin.CheckComboBox', {
        alias: 'plugin.checkcombobox',
        /**
        * @cfg {String} [checkBoxCls='ux-boundlist-item-checkbox']
        * CSS-Class to apply to the checkbox element
        */
        checkBoxCls: 'ux-boundlist-item-checkbox',

        /**
        * Init
        * @private
        */
        init: function(combo)
        {
                if (!(combo instanceof Ext.form.field.ComboBox))
                        Ext.Error.raise('Plugin "Ext.ux.form.plugin.CheckComboBox" can only be used on fields of type Ext.form.field.ComboBox.');
               
                if (combo.multiSelect)
                {
                        combo.listConfig = Ext.apply({
                                getInnerTpl: this.getListInnerTpl()
                        }, combo.listConfig);

                        if (!combo.editable)
                        {
                                combo.selectOnTab = false;
                                combo.on({
                                        'expand': this.onComboExpand,
                                        single: true,
                                        scope: combo
                                });
                        }
                }
        },
        /**
        * Return this default innerListTpl for CheckBoxCombos
        */
        getListInnerTpl: function()
        {
                var me = this;
                return function(displayField)
                {
                        return '<span class="' + me.checkBoxCls + '">&nbsp;</span> {' + displayField + '}';
                };
        },
        /**
        * Called once on first expand of the ComboBox.
        * Adds a Key-Handler to select/deselect on space key.
        * @private
        */
        onComboExpand: function()
        {
                var me = this; // ComboBox
                if (!me.listKeyNav)
                        me.listKeyNav = new Ext.view.BoundListKeyNav(this.inputEl, {
                                boundList: me.getPicker(),
                                forceKeyDown: true,
                                // Leave 'tab' here, because it does a select/deselect followed by blur.
                                // That can lead to deselecting a selected record and leave
                                // the field immediately afterwards.
                                space: function(e) {
                                        this.selectHighlighted(e);
                                }
                        });
        }
});

---

SCSS:

Code:

---

.ux-boundlist-item-checkbox
{
        background-repeat: no-repeat;
        background-position: center;
        background-color: transparent;
        width: 16px;
        height: 16px;
        display: inline-block;

        background-image: theme_image($theme-name, 'grid/unchecked.gif');
        background-image: theme_image($theme-name, 'grid/checked.gif');
}

---

I personally prefer the plugin aproach, because I have some other ComboBox implementations that optionally use checkboxes, so I don't need to extend from CheckComboBox but just apply the plugin to it.

Regards
makana

You can remove that part of the code, I will update my source, problem is that my stores are dynamically changed server side so this forces store to reload it's data every time from server-side.

Hi All,

I Have an issue ,that checkCombo box having dependent data does not populate properly when i change any data in my independent checkCombo. This issue came up when i tried using checkCombo box instead of combo.Even sometimes the last value of the dependent checkCombo list is getting clipped.The code i m using for checkCombo is as below:

Code:

---

Ext.define('LABKEY.layout.component.BoundList', {
        extend: 'Ext.layout.component.BoundList',
        alias: 'layout.boundlist-checkbox',
        beginLayout: function(ownerContext){
            this.callParent(arguments);
            ownerContext.listContext = ownerContext.getEl('outerEl');
        },
        measureContentHeight: function(ownerContext) {
        }
    });


    Ext.define('Ext.ux.CheckCombo',
    {
        extend: 'Ext.form.field.ComboBox',
        alias: 'widget.checkcombo',
        multiSelect: true,
        addAllSelector: false,
        allText: 'All',
        height:'auto',
        delim: ';',
        editable : false,

        initComponent: function()
        {
            this.listConfig = this.listConfig || {};
            var me = this;
            Ext.apply(this.listConfig, {
                tpl:[
                    '<ul><tpl for=".">',
                        '<li role="option" class="' + Ext.baseCSSPrefix + 'boundlist-item"><span class="' + Ext.baseCSSPrefix + 'combo-checker">&nbsp;</span> {' + this.displayField + '}</li>',
                    '</tpl></ul>'
                ],
                childEls: [
                    'listEl',
                    'outerEl',
                    'checkAllEl'
                ],
                renderTpl: [
(this.addAllSelector ? '<div id="{id}-checkAllEl" class="' + Ext.baseCSSPrefix + 'boundlist-item" role="option"><span class="' + Ext.baseCSSPrefix + 'combo-checker">&nbsp;</span> '+this.allText+'</div>' : ''),
                    '<div id="{id}-outerEl" style="overflow:auto;">',
                    (false ? '' : ''),
                    '<div id="{id}-listEl" class="{baseCls}-list-ct"></div>',
                    '{%',
                        'var me=values.$comp, pagingToolbar=me.pagingToolbar;',
                        'if (pagingToolbar) {',
                            'pagingToolbar.ownerLayout = me.componentLayout;',
                            'Ext.DomHelper.generateMarkup(pagingToolbar.getRenderTree(), out);',
                        '}',
                    '%}',
                    '</div>',
                    {
                        disableFormats: true
                    }
                ],
                componentLayout: 'boundlist-checkbox',
                onDestroy: function() {
                    Ext.destroyMembers(this, 'pagingToolbar', 'outerEl', 'listEl');
                    this.callParent();
                }
            });


            this.callParent(arguments);
        },


        createPicker: function()
        {
            var picker = this.callParent(arguments);
            picker.setHeight('auto');
          picker.on('render', function(picker){
                if (picker.checkAllEl)
                {
                    picker.checkAllEl.addClsOnOver(Ext.baseCSSPrefix + 'boundlist-item-over');


                    picker.checkAllEl.on('click', function(e)
                    {
                        if(picker.checkAllEl.hasCls(Ext.baseCSSPrefix + 'boundlist-selected'))
                        {
                            picker.checkAllEl.removeCls(Ext.baseCSSPrefix + 'boundlist-selected');
                            this.setValue('');
                            this.fireEvent('select', this, []);
                        }
                        else
                        {
                            var records = [];
                            this.store.each(function(record)
                            {
                                records.push(record);
                            });
                            picker.checkAllEl.addCls(Ext.baseCSSPrefix + 'boundlist-selected');
                            this.select(records);
                            this.fireEvent('select', this, records);
                        }
                    }, this);
                }
            }, this, {single: true});
            return picker;
        },
     

        getValue: function()
        {
            return this.value.join(this.delim);
        },


        getValueAsArray: function(){
            return this.value;
        },


        getSubmitValue: function()
        {
            return this.getValue();
        },


        onListSelectionChange: function(list, selectedRecords)
        {
            this.callParent(arguments);


            var checker = this.getPicker().checkAllEl;
            if(checker)
            {
                if(selectedRecords.length == this.store.getTotalCount())
                    checker.addCls(Ext.baseCSSPrefix + 'boundlist-selected');
                else
                    checker.removeCls(Ext.baseCSSPrefix + 'boundlist-selected');
            }
        },
        setValue: function(value, doSelect) {
              var me = this,
                  valueNotFoundText = me.valueNotFoundText,
                  inputEl = me.inputEl,
                  i, len, record,
                  dataObj,
                  matchedRecords = [],
                  displayTplData = [],
                  processedValue = [];

              if (me.store.loading) {
                  // Called while the Store is loading. Ensure it is processed by the onLoad method.
                  me.value = value;
                  me.setHiddenValue(me.value);
                  return me;
              }

              // This method processes multi-values, so ensure value is an array.
              value = Ext.Array.from(value);

              // Loop through values, matching each from the Store, and collecting matched records
              for (i = 0, len = value.length; i < len; i++) {
                  record = value[i];
                  if (!record || !record.isModel) {
                      record = me.findRecordByValue(record);
                  }
                  // record found, select it.
                  if (record) {
                      matchedRecords.push(record);
                      //only else if part was there ,we have modified as per our need
                      if(me.store.getTotalCount() == len && len>1){
                          displayTplData = [];
                          displayTplData.push('All');
                          }
                      else if (len == 1){displayTplData.push(record.data);}
                      else {
                          displayTplData.push('Multiple Selections');
                      }
                      processedValue.push(record.get(me.valueField));
                  }
                  // record was not found, this could happen because
                  // store is not loaded or they set a value not in the store
                  else {
                      // If we are allowing insertion of values not represented in the Store, then push the value and
                      // create a fake record data object to push as a display value for use by the displayTpl
                      if (!me.forceSelection) {
                          processedValue.push(value[i]);
                          dataObj = {};
                          dataObj[me.displayField] = value[i];
                          displayTplData.push(dataObj);
                          // TODO: Add config to create new records on selection of a value that has no match in the Store
                      }
                      // Else, if valueNotFoundText is defined, display it, otherwise display nothing for this value
                      else if (Ext.isDefined(valueNotFoundText)) {
                          displayTplData.push(valueNotFoundText);
                      }
                  }
              }

              // Set the value of this field. If we are multiselecting, then that is an array.
              me.setHiddenValue(processedValue);
              me.value = me.multiSelect ? processedValue : processedValue[0];
              if (!Ext.isDefined(me.value)) {
                  me.value = null;
              }
              me.displayTplData = displayTplData; //store for getDisplayValue method
              me.lastSelection = me.valueModels = matchedRecords;

              if (inputEl && me.emptyText && !Ext.isEmpty(value)) {
                  inputEl.removeCls(me.emptyCls);
              }

              // Calculate raw value from the collection of Model data
              me.setRawValue(me.getDisplayValue());
              me.checkChange();

              if (doSelect !== false) {
                  me.syncSelection();
              }
              me.applyEmptyText();

              return me;
          },

---

With the checkCombo, you can't easily see what is selected without expanding the dropdown. This is ok for small lists but not for large trees that are not expanded.

Does anyone know how to implement a quicktip that will display the checked items in a pop up when the mouse hovers over the combo?

I found some code on the forum that I modified so its dynamic:

PHP Code:

---

afterrender: function(combo) {
            Ext.create('Ext.tip.ToolTip', {
                target: combo.getEl(),
                html: combo.getValue(),
                listeners: {
                    beforeshow: function(tip) {
                        var msg = combo.getRawValue();
                        tip.update(msg);
                        return (msg.length > 0);
                    }
                }
            });
        } 


---

Add as a listener to the combo.

I used the same code for the TreeCombo. Now when hovering the mouse over the non expanded combo, you can see all selected items in the quick tip.

With 4.2, all of the drop down lists have bullets and are indented. What css changes are needed to fix this?

I gave the plugin version a try (in 4.2) and I can't figure out how the checkbox checks and unchecks. I don't use SCSS and if I just use the CSS code, the background-image for checked/unchecked is the same and the result is the checkbox is always checked.

With 4.2, all of the drop down lists have bullets and are indented. How to remove bullets?