1. #21
    Sencha User
    Join Date
    Jul 2009
    Posts
    30
    Vote Rating
    7
    da_bar is on a distinguished road

      0  

    Default


    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'
    }

  2. #22
    Ext JS Premium Member
    Join Date
    Apr 2011
    Posts
    5
    Vote Rating
    0
    Edhilion is on a distinguished road

      0  

    Default


    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.

  3. #23
    Sencha User makana's Avatar
    Join Date
    Apr 2008
    Location
    Dresden, Germany
    Posts
    527
    Vote Rating
    19
    makana has a spectacular aura about makana has a spectacular aura about

      0  

    Default Another plugin aproach

    Another plugin aproach


    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
    Programming today is a race between software engineers striving to build bigger and better Ń–diot-proof programs, and the universe striving to produce bigger and better idiots. So far, the universe is winning. (Rick Cook)

    Enhanced ExtJS adapter for Adobe AIR

  4. #24
    Sencha User
    Join Date
    Jul 2009
    Posts
    30
    Vote Rating
    7
    da_bar is on a distinguished road

      0  

    Default


    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.

  5. #25
    Sencha User
    Join Date
    Jul 2012
    Posts
    235
    Vote Rating
    0
    chandan.behura is on a distinguished road

      0  

    Default


    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;
               },

  6. #26
    Sencha User
    Join Date
    Nov 2007
    Posts
    115
    Vote Rating
    8
    kerbo is on a distinguished road

      0  

    Default


    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?

  7. #27
    Sencha User
    Join Date
    Nov 2007
    Posts
    115
    Vote Rating
    8
    kerbo is on a distinguished road

      0  

    Default


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

    PHP Code:
    afterrender: function(combo) {
                
    Ext.create('Ext.tip.ToolTip', {
                    
    targetcombo.getEl(),
                    
    htmlcombo.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.

  8. #28
    Sencha User
    Join Date
    Nov 2007
    Posts
    115
    Vote Rating
    8
    kerbo is on a distinguished road

      0  

    Default


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

  9. #29
    Sencha User
    Join Date
    Nov 2007
    Posts
    115
    Vote Rating
    8
    kerbo is on a distinguished road

      0  

    Default


    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.

  10. #30
    Sencha User
    Join Date
    Jul 2012
    Posts
    2
    Vote Rating
    0
    KOLANU is on a distinguished road

      0  

    Default


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