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

      0  

    Default checkComboIssue

    checkComboIssue


    Hi ,

    I have an requirment of checkCombo. and bydefault All will be selected.

    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,
                            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(); 
                        } 
                    }, 
                  
                    onListSelectionChange: function(list, selectedRecords)
                    { 
                        var me = this, 
                            isMulti = me.multiSelect, 
                            hasRecords = selectedRecords.length > 0; 
                        if (!me.ignoreSelection && me.isExpanded) {
                            if (!isMulti) { 
                                Ext.defer(me.collapse, 1, me); 
                            } 
                              
                            if (isMulti || hasRecords) {
    
                                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) {
                     console.log('got it');
                        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;
                    },
                });
    i am using dependant checkCombos. But for first time when m expanding the combo it is automatically triggering and giving me all the records instead filter records.

    When i am doing queryMode : 'local', then
    my values all comming are checked but i am getting the All unchecked that is on the top of all values inside the combo.


    Please Guide me what will i do.

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,548
    Vote Rating
    873
    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


    So the issue is how to know when the all should be checked?
    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.

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

      0  

    Default


    Quote Originally Posted by mitchellsimoens View Post
    So the issue is how to know when the all should be checked?
    Yes mitchellsimoens, for defalult configration i need All should be checked when all values are checked.

    please help.

Thread Participants: 1

Tags for this Thread