1. #1
    Sencha User
    Join Date
    Oct 2012
    Posts
    4
    Vote Rating
    0
    Sumit Pathak is on a distinguished road

      0  

    Default Unanswered: Combo box with check box

    Unanswered: Combo box with check box


    Hi i am trying to put a check box inside a combo box and populating it with data from database. All the values are to be checked at render and if all values are checked the option all must also be checked. Below is my code for component

    Code:
    Ext.define('Ext.ux.CheckCombo', 
    { 
    	extend: 'Ext.form.field.ComboBox', 
        alias: 'widget.checkcombo', 
        multiSelect: true, 
        allSelector: false,
        addAllSelector: false,
        allText: 'All', 
        createPicker: function() { 
        	var me = this, 
            picker, 
            menuCls = Ext.baseCSSPrefix + 'menu', 
            opts = Ext.apply({ 
            	pickerField: me, 
                selModel: { 
                	mode: me.multiSelect ? 'SIMPLE' : 'SINGLE',
                },
                floating: true, 
                hidden: true, 
                ownerCt: me.ownerCt, 
                cls: me.el.up('.' + menuCls) ? menuCls : '', 
                store: me.store, 
                displayField: me.displayField, 
                focusOnToFront: false, 
                pageSize: me.pageSize, 
                tpl:  
                [ 
    '<ul><tpl for=".">', 
    '<li role="option" class="' + Ext.baseCSSPrefix + 'boundlist-item"><span class="x-combo-checker">&nbsp;</span> {' + me.displayField + '}</li>', 
                    '</tpl></ul>' 
                ] 
            }, me.listConfig, me.defaultListConfig); 
        	
        	picker = me.picker = Ext.create('Ext.view.BoundList', opts); 
            if (me.pageSize) { 
            	picker.pagingToolbar.on('beforechange', me.onPageChange, me); 
            }         
            me.mon(picker, { 
            	itemclick: me.onItemClick, 
                refresh: me.onListRefresh, 
                scope: me 
            }); 
        
            me.mon(picker.getSelectionModel(), { 
            	'beforeselect': me.onBeforeSelect, 
                'beforedeselect': me.onBeforeDeselect, 
                'selectionchange': me.onListSelectionChange,
                'blur':me.onBlur,
                scope: me 
            }); 
        
            return picker; 
        }, 
         
        getValue: function() 
        { 
        	return this.value.join(','); 
        }, 
        
        getSubmitValue: function() 
        { 
        	return this.getValue(); 
        }, 
        
        expand: function() 
        { 
        	var me = this, 
            bodyEl, picker, collapseIf; 
        	if (me.rendered && !me.isExpanded && !me.isDestroyed) { 
        		bodyEl = me.bodyEl; 
                picker = me.getPicker(); 
                collapseIf = me.collapseIf; 
    // show the picker and set isExpanded flag 
                picker.show(); 
                me.isExpanded = true; 
                me.alignPicker(); 
                bodyEl.addCls(me.openCls); 
                if(me.addAllSelector == true && me.allSelector == false) 
                { 
                	me.allSelector = picker.getEl().insertHtml('afterBegin', '<div class="x-boundlist-item" role="option"><span class="x-combo-checker">&nbsp;</span> '+me.allText+'</div>', true);
                    me.allSelector.on('click', function(e) 
                    { 
                    	if(me.allSelector.hasCls('x-boundlist-selected')) 
                        { 
                    		me.allSelector.removeCls('x-boundlist-selected'); 
                            me.setValue(''); 
                            me.fireEvent('select', me, []); 
                        } 
                        else 
                        { 
                        	var records = []; 
                            me.store.each(function(record) 
                            { 
                            	records.push(record); 
                            }); 
                            me.allSelector.addCls('x-boundlist-selected'); 
                            me.select(records); 
                            me.fireEvent('select', me, records);  
                        } 
                    }); 
                } 
    // monitor clicking and mousewheel 
                me.mon(Ext.getDoc(), { 
                mousewheel: collapseIf, 
                mousedown: collapseIf, 
                scope: me 
                }); 
                Ext.EventManager.onWindowResize(me.alignPicker, me); 
                me.fireEvent('expand', me); 
                me.onExpand(); 
            } 
        }, 
        
        onBlur : function(selectedRecords){
        
        },
        
        onListSelectionChange: function(list, selectedRecords)
        { 
        	var me = this, 
            isMulti = me.multiSelect, 
            hasRecords = selectedRecords.length > 0; 
    // Only react to selection if it is not called from setValue, and if our list is 
            if (!me.ignoreSelection && me.isExpanded) {
            	if (!isMulti) { 
            		Ext.defer(me.collapse, 1, me); 
                } 
            	/* 
            	 * Only set the value here if we're in multi selection mode or we have 
            	 * a selection. Otherwise setValue will be called with an empty value 
            	 * which will cause the change event to fire twice. 
            	 */
            	if (isMulti || hasRecords) {
    //Author Exilant : All will be set in combo for all selection
            		me.setValue(selectedRecords, false); 
            	} 
            	if (hasRecords) { 
            		me.fireEvent('select', me, selectedRecords); 
            	} 
            	me.inputEl.focus(); 
            } 
            if(me.addAllSelector == true && me.allSelector != false) 
            { 
            	if(selectedRecords.length == me.store.getTotalCount())
            	{
            		me.allSelector.addCls('x-boundlist-selected'); 
            	}
            	else 
            		me.allSelector.removeCls('x-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);
                    if(me.store.getTotalCount() == len){
                    	displayTplData = [];
                        displayTplData.push('All');
                    }
                    else {
                    	displayTplData.push(record.data);
                    }
                    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;
        },
    });
    My code for view is
    Code:
    {  xtype : 'checkcombo',
    						        	 valueField: 'subRegion',
    						        	 queryMode : 'local',
    						        	 id : 'subRegionId',
    						        	 displayField: 'subRegion',
    						        	 store: 'deliveryGroupPerformances.SubRegionStore',
    						        	 addAllSelector: true,
    						        	 action : 'selectSubRegion',
    						        	 value : 'All',
    						        	 listeners: {
    								            afterrender: function(display){
    								            	display.tip = Ext.create('Ext.tip.ToolTip', {
    								                    target: display.el,
    								                    trackMouse: true,
    								                    dismissDelay: 5000
    								                });
    								            }
    										}
    						        		},
    All the values are checked at render but the option all is not getting checked.Please help me out

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,327
    Answers
    3540
    Vote Rating
    850
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Moved to Ext JS 4 Q&A forum.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

Thread Participants: 1