1. #621
    Sencha User
    Join Date
    Apr 2012
    Posts
    15
    Vote Rating
    0
    ldashevskiy is on a distinguished road

      0  

    Default


    epoks, could you, please, explain, how to use your "overwrite"?

    Why do you say that it is PHP code, when in actuality it is JavaScript code, no? Or am I misunderstanding something?

    Oh, yes, and does it at all work with Ext 3.4?

    Thanks.

  2. #622
    Sencha User
    Join Date
    Oct 2007
    Location
    Berlin, Germany
    Posts
    891
    Vote Rating
    9
    wm003 will become famous soon enough

      0  

    Default


    if you add

    PHP Code:
    ,assertValue Ext.emptyFn 
    it works under all Ext.Versions up to 3.4.x

    Without that it would only work up to Ext 3.1.1

  3. #623
    Sencha User
    Join Date
    Apr 2012
    Posts
    15
    Vote Rating
    0
    ldashevskiy is on a distinguished road

      0  

    Default


    Thanks, wm003.

    I ended up finding a working soluation and it has the following override:

    assertValue:function() {
    this.list.hide();
    var rv = this.getRawValue();
    var rva = rv.split(new RegExp(RegExp.escape(this.separator) + ' *'));
    var va = [];
    var snapshot = this.store.snapshot || this.store.data;


    // iterate through raw values and records and check/uncheck items
    Ext.each(rva, function(v) {
    snapshot.each(function(r) {
    if(v === r.get(this.displayField)) {
    va.push(r.get(this.valueField));
    }
    }, this);
    }, this);
    this.setValue(va.join(this.separator));
    this.store.clearFilter();
    }

    though, this is a slightly customized LovCombo...

  4. #624
    Sencha User
    Join Date
    Jan 2013
    Posts
    2
    Vote Rating
    0
    yerman is on a distinguished road

      0  

    Default


    Thank you mholyszko,

    Your fix was very useful for me!

  5. #625
    Sencha User
    Join Date
    Jun 2013
    Posts
    1
    Vote Rating
    0
    kwyc is on a distinguished road

      0  

    Default LovCombo works in form but not in grid column

    LovCombo works in form but not in grid column


    I have implemented LovCombo and it works in Form but not in Grid Column

    For the LovCombo on the Form, on thing I have to change for the "onRealBlur" event is to use "this.getValue();" instead of "this.getRawValue();"
    "this.setValue(rv);" rather than "this.setValue(va.join(this.separator));"
    in order for the selected LovCombo values to be displayed after blurring out of the event.

    However now I run into a problem =( ....the LovCombo doesn't work on the Grid Column

    When I tried to reuse the LoveCombo within a grid, I can select multiple values alright within the LovCombo, but when I leave the focus (blurred out) the values disappear from the dropdown display, showing empty. When I try to select 1 value instead of multiple values, the dropdown does display that 1 value. When I try to select multiple values again, the dropdown is emptied upon blurring out. (see attached screenshots)

    I noticed that when I selected multiple values, Grid Cell events doesn't get hit. The Grid Cell events only get hit when I selected 1 value.

    Anyone knows how to fix this?

    Thanks!
    lovcombo.png

    ============ Overried onRealBlur function ============
    , onRealBlur: function() {
    this.list.hide();
    var rv = this.getValue();
    var rva = rv.split(new RegExp(RegExp.escape(this.separator) + ' *'));
    var va = [];
    var snapshot = this.store.snapshot || this.store.data;
    // iterate through raw values and records and check/uncheck items
    Ext.each(rva, function(v) {
    snapshot.each(function(r) {
    if (v === r.get(this.displayField)) {
    va.push(r.get(this.valueField));
    }
    }, this);
    }, this);
    this.setValue(rv);
    this.store.clearFilter();
    } // eo function onRealBlur



    ============ Grid ============

    buildColumnModel: function() {
    ...
    var comboEmployeeTax = new TaxComboBox();
    // load the tax combobox list
    comboEmployeeTax.getStore().load({ params: { ListType: 'GetTaxes'} });
    ...
    var colModel = new Ext.grid.ColumnModel({
    columns: [
    sm,
    ...
    { header: '<font class="mandatorylabel">Tax</font>&nbsp;<font class="redlabel">*</font>', width: 80, sortable: true, renderer: this.renderCombo(comboEmployeeTax), dataIndex: 'TaxID', editor: comboEmployeeTax
    })
    }
    ]
    });
    return colModel;
    }, //eo buildColumnModel function



    ============ renderCombo ============
    renderCombo: function(combo) {
    return function(value, params, record, rowIndex, colIndex) {
    var comboRecord = combo.findRecord(combo.valueField, value);
    ...
    else if (combo.getXType() == 'taxcombobox') {
    if (comboRecord == null) {
    return record.get('TaxDescription');
    }
    else {
    return comboRecord ? comboRecord.get(combo.displayField) : combo.valueNotFoundText;
    }
    }
    ...
    }
    }, // eo function renderCombo

  6. #626
    Sencha User razvanioan's Avatar
    Join Date
    Feb 2008
    Location
    Romania
    Posts
    128
    Vote Rating
    51
    razvanioan has a spectacular aura about razvanioan has a spectacular aura about razvanioan has a spectacular aura about

      0  

    Default


    Although this is an old UX, I want to confirm that it is still useful / working (using ext-3.4.1.1).

    The only thing I needed to tweak around (as I use it with a remote JsonStore) was that on loading some data of the record trough AJAX into the form, because the values of the lovCombo were loading automatically on this event and it was displayed correctly, the values were not selected (displayed as selected) in the combo.

    The only thing I've done was to add the following code in the onLoad method of the combo:

    Code:
    if(this.getValue()){
    	this.setValue(this.getValue());
    }
    ---
    Razvan Ioan ANASTASESCU
    Senior WEB Developer

  7. #627
    Sencha User razvanioan's Avatar
    Join Date
    Feb 2008
    Location
    Romania
    Posts
    128
    Vote Rating
    51
    razvanioan has a spectacular aura about razvanioan has a spectacular aura about razvanioan has a spectacular aura about

      0  

    Default


    I've found another issue which bothered me quite some time until I tracked it down...

    onLoad of the combo's store, originalValue is deleted / lost.

    This was causing blank / empty values in lovCombo whenever the JsonStore got loaded after the form load operation succeeded.

    This was happening only sometimes, because of the response time of the async server calls: load / populate combo & load / populate form

    For the moment I tweaked it a little more complicated using the two load listeners (form & combo store), but I will try to figure it out tomorrow how to resolve it in some more fashion way (now I'm tired).

    Thx,
    ---
    Razvan Ioan ANASTASESCU
    Senior WEB Developer

  8. #628
    Sencha User
    Join Date
    Mar 2015
    Posts
    12
    Vote Rating
    0
    shipra007 is on a distinguished road

      0  

    Default LovCombo Text field getting cleared automatically & Not able to Tab select DD Values

    LovCombo Text field getting cleared automatically & Not able to Tab select DD Values


    Hi,

    I am using LovCombo Box. But am not able to select dropdown values with Tab Key. Also, while i am typing text in input field of LovCombo Box its automatically getting cleared. Please help me with it
    PFB the LovCombo.js code i am using currently.

    ****************************************************************************

    // vim: ts=4w=4:nu:fdc=4:nospell
    /**
    * Ext.ux.form.LovCombo, List of Values Combo
    *
    * @author Ing. Jozef Sakáloš
    * @copyright (c) 2008, by Ing. Jozef Sakáloš
    * @date 16. April 2008
    * @version $Id: Ext.ux.form.LovCombo.js 285 2008-06-06 09:22:20Z jozo $
    *
    * @license Ext.ux.form.LovCombo.js is licensed under the terms of the Open Source
    * LGPL 3.0 license. Commercial use is permitted to the extent that the
    * code/component(s) do NOT become part of another Open Source or Commercially
    * licensed development library or toolkit without explicit permission.
    *
    * License details: http://www.gnu.org/licenses/lgpl.html
    */

    /*global Ext */

    // add RegExp.escape if it has not been already added
    if('function' !== typeof RegExp.escape) {
    RegExp.escape = function(s) {
    if('string' !== typeof s) {
    return s;
    }
    // Note: if pasting from forum, precede ]/\ with backslash manually
    return s.replace(/([.*+?^=!:${}()|[\]\/\\])/g, '\\$1');
    }; // eo function escape
    }

    // create namespace
    Ext.ns('Ext.ux.form');

    /**
    *
    * @class Ext.ux.form.LovCombo
    * @extends Ext.form.ComboBox
    */
    Ext.ux.form.LovCombo = Ext.extend(Ext.form.ComboBox, {

    // {{{
    // configuration options
    /**
    * @cfg {String} checkField name of field used to store checked state.
    * It is automatically added to existing fields.
    * Change it only if it collides with your normal field.
    */
    checkField:'checked'

    /**
    * @cfg {String} separator separator to use between values and texts
    */
    ,separator:','

    /**
    * @cfg {String/Array} tpl Template for items.
    * Change it only if you know what you are doing.
    */
    // }}}
    // {{{
    ,initComponent:function() {

    // template with checkbox
    if(!this.tpl) {
    this.tpl =
    '<tpl for=".">'
    +'<div class="x-combo-list-item">'
    +'<img src="' + Ext.BLANK_IMAGE_URL + '" '
    +'class="ux-lovcombo-icon ux-lovcombo-icon-'
    +'{[values.' + this.checkField + '?"checked":"unchecked"' + ']}">'
    +'<div class="ux-lovcombo-item-text">{' + (this.displayField || 'text' )+ '}</div>'
    +'</div>'
    +'</tpl>'
    ;
    }

    // call parent
    Ext.ux.form.LovCombo.superclass.initComponent.apply(this, arguments);

    // install internal event handlers
    this.on({
    scope:this
    ,beforequery:this.onBeforeQuery
    ,blur:this.onRealBlur
    });

    // remove selection from input field
    this.onLoad = this.onLoad.createSequence(function() {
    if(this.el) {
    var v = this.el.dom.value;
    this.el.dom.value = '';
    this.el.dom.value = v;
    }
    });

    } // e/o function initComponent
    // }}}
    // {{{
    /**
    * Disables default tab key bahavior
    * @private
    */
    ,initEvents:function() {
    Ext.ux.form.LovCombo.superclass.initEvents.apply(this, arguments);

    // disable default tab handling - does no good
    this.keyNav.tab = false;

    } // eo function initEvents
    // }}}
    // {{{
    /**
    * clears value
    */
    ,clearValue:function() {
    this.value = '';
    this.setRawValue(this.value);
    this.store.clearFilter();
    this.store.each(function(r) {
    r.set(this.checkField, false);
    }, this);
    if(this.hiddenField) {
    this.hiddenField.value = '';
    }
    this.applyEmptyText();
    } // eo function clearValue
    // }}}
    // {{{
    /**
    * @return {String} separator (plus space) separated list of selected displayFields
    * @private
    */
    ,getCheckedDisplay:function() {
    var re = new RegExp(this.separator, "g");
    return this.getCheckedValue(this.displayField).replace(re, this.separator + ' ');
    } // eo function getCheckedDisplay
    // }}}
    // {{{
    /**
    * @return {String} separator separated list of selected valueFields
    * @private
    */
    ,getCheckedValue:function(field) {
    field = field || this.valueField;
    var c = [];

    // store may be filtered so get all records
    var snapshot = this.store.snapshot || this.store.data;

    snapshot.each(function(r) {
    if(r.get(this.checkField)) {
    c.push(r.get(field));
    }
    }, this);

    return c.join(this.separator);
    } // eo function getCheckedValue
    // }}}
    // {{{
    /**
    * beforequery event handler - handles multiple selections
    * @param {Object} qe query event
    * @private
    */
    ,onBeforeQuery:function(qe) {
    qe.query = qe.query.replace(new RegExp(this.getCheckedDisplay() + '[ ' + this.separator + ']*'), '');
    } // eo function onBeforeQuery
    // }}}
    // {{{
    /**
    * blur event handler - runs only when real blur event is fired
    */
    ,onRealBlur:function() {
    this.list.hide();
    var rv = this.getRawValue();
    var rva = rv.split(new RegExp(RegExp.escape(this.separator) + ' *'));
    var va = [];
    var snapshot = this.store.snapshot || this.store.data;

    // iterate through raw values and records and check/uncheck items
    Ext.each(rva, function(v) {
    snapshot.each(function(r) {
    if(v === r.get(this.displayField)) {
    va.push(r.get(this.valueField));
    }
    }, this);
    }, this);
    this.setValue(va.join(this.separator));
    this.store.clearFilter();
    } // eo function onRealBlur
    // }}}
    // {{{
    /**
    * Combo's onSelect override
    * @private
    * @param {Ext.data.Record} record record that has been selected in the list
    * @param {Number} index index of selected (clicked) record
    */
    ,onSelect:function(record, index) {
    if(this.fireEvent('beforeselect', this, record, index) !== false){

    // toggle checked field
    record.set(this.checkField, !record.get(this.checkField));

    // display full list
    if(this.store.isFiltered()) {
    this.doQuery(this.allQuery);
    }

    // set (update) value and fire event
    this.setValue(this.getCheckedValue());
    this.fireEvent('select', this, record, index);
    }
    } // eo function onSelect
    // }}}
    // {{{
    /**
    * Sets the value of the LovCombo
    * @param {Mixed} v value
    */
    ,setValue:function(v) {
    if(v) {
    v = '' + v;
    if(this.valueField) {
    this.store.clearFilter();
    this.store.each(function(r) {
    var checked = !(!v.match(
    '(^|' + this.separator + ')' + RegExp.escape(r.get(this.valueField))
    +'(' + this.separator + '|$)'))
    ;

    r.set(this.checkField, checked);
    }, this);
    this.value = this.getCheckedValue();
    this.setRawValue(this.getCheckedDisplay());
    if(this.hiddenField) {
    this.hiddenField.value = this.value;
    }
    }
    else {
    this.value = v;
    this.setRawValue(v);
    if(this.hiddenField) {
    this.hiddenField.value = v;
    }
    }
    if(this.el) {
    this.el.removeClass(this.emptyClass);
    }
    }
    else {
    this.clearValue();
    }
    } // eo function setValue
    // }}}
    // {{{
    /**
    * Selects all items
    */
    ,selectAll:function() {
    this.store.each(function(record){
    // toggle checked field
    record.set(this.checkField, true);
    }, this);

    //display full list
    this.doQuery(this.allQuery);
    this.setValue(this.getCheckedValue());
    } // eo full selectAll
    // }}}
    // {{{
    /**
    * Deselects all items. Synonym for clearValue
    */
    ,deselectAll:function() {
    this.clearValue();
    } // eo full deselectAll
    // }}}

    }); // eo extend

    // register xtype
    Ext.reg('lovcombo', Ext.ux.form.LovCombo);

    // eof
    *************************************************************************

  9. #629
    Sencha User
    Join Date
    Apr 2012
    Posts
    15
    Vote Rating
    0
    ldashevskiy is on a distinguished road

      0  

    Default


    Quote Originally Posted by shipra007 View Post
    Hi,
    I am using LovCombo Box. But am not able to select dropdown values with Tab Key. Also, while i am typing text in input field of LovCombo Box its automatically getting cleared.
    Hello, shipra007, I am not experiencing, what you described.
    I can use the Tab key to navigate around my UI to get the focus on the LovCombo box, then use the Down arrow key to show the drop-down list, then use the arrow keys to navigate up and down it, while pressing the ENTER key selects/deselects the choices.

    Though, I'm using an extension of the LovCombo box, which I developed.
    It has the following additional features:
    - working Autocomplete feature on several choices, not just the first one, just signify the end of selecting an element with the chosen separator (nothing gets cleared)
    - an extra clear button
    - expand on click
    - additional method to get the checked indices
    - the drop-down list is dynamically sized based on the data in it
    - extra checkbox to quickly toggle select/deselect ALL
    - correctly displays blank fields and special characters
    - a hover over tooltip displays all of the values selected (the field itself might be small to display all selected)

    Its code is below (couldn't upload for some reason for attachment):

    Code:
    Ext.ux.form.ExtendedLovCombo = Ext.extend( Ext.ux.form.LovCombo, {
    
    
        // True to show the drop down list when the text field is clicked, not just the trigger
        expandOnFocus: true,
    
    
        //True for use selectAll item
        addSelectAllItem: true,
    
    
        //True to add the extra Clear trigger button
        addClearItem: true,
    
    
        //Value of valueField for selectAll item
        selectAllValueField: '_all',
    
    
        //Value of textField for selectAll item
        selectAllDisplayField: 'Select all',
    
    
        //Toggle selectAll item
        allSelected: false,
    
    
        //css class for selactAll item : ux-lovcombo-list-item-all
        initComponent: function() {
    
    
            // template with checkbox and 'Select all' item
            if ( ! this.tpl ) {
                this.tpl = new Ext.XTemplate(
                    '<tpl for=".">'
                        + '<div class=\'x-combo-list-item\'>'
                            + '<img src=\'' + Ext.BLANK_IMAGE_URL + '\' '
                            + 'class=\'ux-lovcombo-icon ux-lovcombo-icon-'
                            + '{[values.' + this.checkField + '?\'checked\':\'unchecked\'' + ']}\'>'
                            + '<div class=\'ux-lovcombo-item-text\'>{' + this.displayField + ':this.process}</div>'
                        + '</div>'
                    +'</tpl>',
                    {
                        process : function(value) {
                            return value === '' ? '&nbsp' : Ext.util.Format.htmlEncode( value );
                        }
                    }
                );
            }
    
    
            // Add selected value tool tip
            this.mon( this, {
                afterrender: function(){
                    new Ext.ToolTip({
                        target: this.getEl(),
                        html: this.getValue(),
                        listeners: {
                            beforeshow: function(tip) {
                                var msg = this.getRawValue();
                                tip.update( Ext.util.Format.htmlEncode( msg ) );
                                return (msg.length > 0);
                            },
                            scope: this
                        },
                        renderTo: document.body
                    });
    
    
                    if ( this.expandOnFocus ){
                        this.mon( this.getEl(), {
                            click: function(){
                                if ( this.isExpanded() ){
                                    this.collapse();
                                    this.el.focus();
                                } else {
                                    this.onFocus({});
                                    if ( this.triggerAction == 'all' ){
                                        this.doQuery( this.allQuery, true );
                                    } else {
                                        this.doQuery( this.getRawValue() );
                                    }
                                    this.el.focus();
                                }
                            },
                            scope: this
                        });
                    }
    
    
                    this.resizeToFitContent();
                },
                scope: this,
                single: true
            });
    
    
            if ( this.store ){
                this.mon(
                    this.store, {
                        datachanged:  function(){
                            this.resizeToFitContent();
                            this.manageSelectAllState();
                        },
                        add:          this.resizeToFitContent,
                        remove:       this.resizeToFitContent,
                        load:         function(){
                            this.resizeToFitContent();
                            this.initSelectAll();
                        },
                        update:       function(){
                            this.resizeToFitContent.createDelegate(this, [true]);
                            this.manageSelectAllState();
                        },
                        buffer: 5,
                        scope: this
                    }
                );
            }
    
    
            // install internal event handlers
            this.mon( this, {
                beforequery:    this.onBeforeQuery,
                scope: this
            });
    
    
            // remove selection from input field
            this.onLoad = this.onLoad.createSequence(function() {
                if(this.el) {
                    var v = this.el.dom.value;
                    this.el.dom.value = '';
                    this.el.dom.value = v;
                }
            });
    
    
            this.initSelectAll();
    
    
            this.addClearItem
                ? Ext.form.TwinTriggerField.prototype.initComponent.call(this)
                : Ext.ux.form.ExtendedLovCombo.superclass.initComponent.call(this)
            ;
        },
    
    
        onBeforeQuery: function(qe) {
            var ar = this.getRawValue().trim().split( new RegExp( '\\s*' + RegExp.escape( this.separator ) + '\\s*' ) );
            var token = ar.pop();
            Ext.each( ar, function(e, i, a){ a[i] = '(?=^(?:(?!' + RegExp.escape( e ) + '$).)*$)'; });
            var re = '^(?=^' + RegExp.escape( token ) + ')'; // search the list for entries starting with the entered text
            if ( token.length > 0 ){
                re += ar.join(''); // filter out the items already entered fully
            }
            re += '.*$';
            qe.query = new RegExp( re );
            qe.query.length = token.length;
        },
    
    
        onTypeAhead: function(){
            if ( ! this.store.isFiltered() ){   // very important fix
                return;                         // to prevent typeAhead on click of trigger or input text field
            }
            if( this.store.getCount() > 0 ){
                var r           = this.store.getAt(0),
                    newValue    = r.data[this.displayField],
                    len         = newValue.length,
                    rv          = this.getRawValue(),
                    token       = rv.trim().split( new RegExp( '\\s*' + RegExp.escape( this.separator ) + '\\s*' ) ).pop(),
                    selStart    = token.length;
                if ( selStart > 0 && newValue.lastIndexOf( token ) >= 0 ){
                    var i = rv.lastIndexOf( token );
                    if ( i >= 0 ){
                        this.setRawValue( rv.replace( new RegExp( '^(.*)' + RegExp.escape(token) + '(.*)$' ), '$1'+newValue+'$2' ) );
                        this.selectText( i + selStart, i + len );
                    }
                }
            }
        },
    
    
        assertValue: function() {
            this.list.hide();
            var rva = this.getRawValue().trim().split( new RegExp( '\\s*' + RegExp.escape( this.separator ) + '\\s*' ) );
            var va = [];
            var snapshot = this.store.snapshot || this.store.data;
    
    
            // iterate through raw values and records and check/uncheck items
            Ext.each(rva, function(v) {
                snapshot.each(function(r) {
                    if(v === r.get(this.displayField)) {
                        va.push(r.get(this.valueField));
                    }
                }, this);
            }, this);
            this.setValue(va.join(this.separator));
            this.store.clearFilter();
        },
    
    
        /**
         * Selects all items
         */
        selectAll: function() {
            this.store.suspendEvents(true);
            this.store.each(function(record){
                // toggle checked field
                record.set(this.checkField, true);
            }, this);
            this.store.resumeEvents();
    
    
            this.setValue(this.getCheckedValue());
        },
    
    
        // Add the 'Select All' record if appropriate (private)
        initSelectAll: function(){
            if ( this.store && this.addSelectAllItem && this.store.getCount() > 0 ){
                var RecordType = Ext.data.Record.create([this.valueField, this.displayField, this.checkField]), data = {};
                data[this.valueField]   = this.selectAllValueField;
                data[this.displayField] = this.selectAllDisplayField;
                data[this.checkField]   = this.allSelected;
                this.selectAllRecord    = new RecordType(data);
                if ( this.selectAllRecord.get( this.checkField ) ){
                    this.selectAll();
                }
            }
        },
    
    
        //Using allChecked value
        setValue: function( v ) {
            if ( v ) {
                v = '' + v;
                if ( ! this.store.getCount() ){
                    this.store.clearFilter();
                }
                if ( this.valueField ){
                    this.store.suspendEvents(true);
                    this.store.each( function( r ) {
                        r.set(
                            this.checkField,
                            !(
                                v.search(
                                    '(^|' + this.separator + ')' +
                                    RegExp.escape( r.get( this.valueField ) ) +
                                    '(' + this.separator + '|$)'
                                ) == -1
                            )
                        );
    
    
                    }, this);
    
    
                    this.store.resumeEvents();
                    this.value = this.getCheckedValue();
                    this.setRawValue( this.getCheckedDisplay() );
                    if ( this.hiddenField ){
                        this.hiddenField.value = this.value;
                    }
                }
                if ( this.el ){
                    this.el.removeClass(this.emptyClass);
                }
            }
            else {
                this.clearValue();
            }
    
    
            return this;
        },
    
    
        //Toggle action for de/selectAll
        toggleAll: function(){
            if ( this.selectAllRecord.get( this.checkField ) ){
                this.deselectAll();
            } else {
                this.selectAll();
            }
        },
    
    
        //Size the drop-down list to the contents
        resizeToFitContent: function( versionLight ){
            var el = this.getEl();
            if ( el && this.rendered ){
                if ( ! this.elMetrics ){
                    this.elMetrics = Ext.util.TextMetrics.createInstance( el );
                }
                var m = this.elMetrics, width = 0, s = this.getSize();
                if ( this.store ){
                    this.store.each(function (r) {
                        var text = r.get(this.displayField);
                        width = Math.max(width, m.getWidth( Ext.util.Format.htmlEncode(text) ));
                    }, this);
                }
                width += el.getBorderWidth('lr');
                width += el.getPadding('lr');
                if (this.trigger) {
                    width += this.trigger.getWidth();
                }
                s.width = width;
                width += 3 * Ext.getScrollBarWidth() + 60;
                if ( this.pageSize > 0 && this.pageTb ){
                    var toolbar = this.pageTb.el;
                    width = Math.max(
                        width,
                        toolbar.child('.x-toolbar-left-row').getWidth() +
                        toolbar.child('.x-toolbar-left').getFrameWidth('lr') +
                        toolbar.child('.x-toolbar-right').getFrameWidth('lr') +
                        toolbar.getFrameWidth('lr')
                    );
                }
                this.listWidth = width;
                this.minListWidth = width;
                if ( this.list && this.innerList ){
                    this.list.setSize( width );
                    this.innerList.setWidth( width - this.list.getFrameWidth('lr') );
                    if ( versionLight !== true ){
                        this.restrictHeight();
                    }
    
    
                    if ( this.selectAllItem ){
                        this.selectAllItem.setWidth( width - this.list.getFrameWidth('lr') );
                    }
                }
    
    
                if( this.resizable && this.resizer ){
                    this.resizer.minWidth = width;
                }
            }
        },
    
    
        initList: function(){
            if(!this.list){
                var cls = 'x-combo-list',
                    listParent = Ext.getDom(this.getListParent() || Ext.getBody());
    
    
                this.list = new Ext.Layer({
                    parentEl: listParent,
                    shadow: this.shadow,
                    cls: [cls, this.listClass].join(' '),
                    constrain:false,
                    zindex: this.getZIndex(listParent)
                });
    
    
                var lw = this.listWidth || Math.max(this.wrap.getWidth(), this.minListWidth);
                this.list.setSize(lw, 0);
                this.list.swallowEvent('mousewheel');
                this.assetHeight = 0;
                if(this.syncFont !== false){
                    this.list.setStyle('font-size', this.el.getStyle('font-size'));
                }
                if(this.title){
                    this.header = this.list.createChild({cls:cls+'-hd', html: this.title});
                    this.assetHeight += this.header.getHeight();
                }
    
    
                if ( this.addSelectAllItem ){
                    this.selectAllItem = this.list.createChild({
                        cls: cls + '-inner',
                        children: [{
                            cls: 'x-combo-list-item ux-lovcombo-list-item-all',
                            children: [
                                { cls: 'ux-lovcombo-icon ux-lovcombo-icon-unchecked', src: Ext.BLANK_IMAGE_URL, tag: 'img' },
                                { cls: 'ux-lovcombo-item-text', html: this.selectAllDisplayField }
                            ]
                        }]
                    });
    
    
                    this.selectAllItem.child('.x-combo-list-item').addClassOnOver( this.selectedClass );
    
    
                    this.selectAllItem.setWidth(lw - this.list.getFrameWidth('lr'));
    
    
                    this.mon( this.selectAllItem, {
                        containerclick: this.onViewClick,
                        click:          this.onViewClick,
                        scope:          this
                    });
    
    
                    this.assetHeight += this.selectAllItem.getHeight();
                }
    
    
                this.innerList = this.list.createChild({cls:cls+'-inner'});
                this.mon(this.innerList, 'mouseover', this.onViewOver, this);
                this.mon(this.innerList, 'mousemove', this.onViewMove, this);
                this.mon(this.innerList, 'mouseout', function(){ this.view.select(-1); }, this);
                this.innerList.setWidth(lw - this.list.getFrameWidth('lr'));
    
    
                if(this.pageSize){
                    this.footer = this.list.createChild({cls:cls+'-ft'});
                    this.pageTb = new Ext.PagingToolbar({
                        store: this.store,
                        pageSize: this.pageSize,
                        renderTo:this.footer
                    });
                    this.assetHeight += this.footer.getHeight();
                }
    
    
                this.view = new Ext.DataView({
                    applyTo: this.innerList,
                    tpl: this.tpl,
                    singleSelect: true,
                    selectedClass: this.selectedClass,
                    itemSelector: this.itemSelector || '.' + cls + '-item',
                    emptyText: this.listEmptyText,
                    deferEmptyText: false
                });
    
    
                this.mon(this.view, {
                    containerclick: this.onViewClick,
                    click:          this.onViewClick,
                    scope:          this
                });
    
    
                this.bindStore(this.store, true);
    
    
                if ( this.pageSize > 0 && this.pageTb ){
                    var toolbar = this.pageTb.el;
                    var width = Math.max(
                        this.getWidth(),
                        toolbar.child('.x-toolbar-left-row').getWidth() +
                        toolbar.child('.x-toolbar-left').getFrameWidth('lr') +
                        toolbar.child('.x-toolbar-right').getFrameWidth('lr') +
                        toolbar.getFrameWidth('lr')
                    );
                    this.listWidth = width;
                    this.minListWidth = width;
                    if ( this.list && this.innerList ){
                        this.list.setSize( width );
                        this.innerList.setWidth( width - this.list.getFrameWidth('lr') );
                        if ( this.selectAllItem ){
                            this.selectAllItem.setWidth( width - this.list.getFrameWidth('lr') );
                        }
                    }
                }
    
    
                if(this.resizable){
                    this.resizer = new Ext.Resizable(this.list,  {
                        pinned:true, handles:'se', minWidth: this.minListWidth
                    });
                    this.mon(this.resizer, 'resize', function(r, w, h){
                        this.maxHeight = h - this.handleHeight - this.list.getFrameWidth('tb') - this.assetHeight;
                        this.listWidth = w;
                        this.innerList.setWidth( w - this.list.getFrameWidth('lr') );
                        if ( this.selectAllItem ){
                            this.selectAllItem.setWidth( w - this.list.getFrameWidth('lr') );
                        }
                        this.restrictHeight();
                    }, this);
    
    
                    this[this.pageSize?'footer':'innerList'].setStyle('margin-bottom', this.handleHeight+'px');
                }
            }
        },
    
    
        selectPrev: function(){
            var ct = this.store.getCount();
            if ( ct > 0 ){
                if ( this.addSelectAllItem ){
                    if ( this.selectedIndex == -1 ){
                        this.select( ct - 1 );
                    } else if ( this.selectedIndex == -2 ){
                        this.selectAllItem.child('.x-combo-list-item').removeClass( this.selectedClass );
                        this.select( -1 );
                    } else if ( this.selectedIndex > 0 ){
                        this.select( this.selectedIndex - 1 );
                    } else if ( this.selectedIndex == 0 ){
                        this.select( -1 );
                        this.selectedIndex = -2;
                        this.selectAllItem.child('.x-combo-list-item').addClass( this.selectedClass );
                    }
                } else {
                    Ext.ux.form.ExtendedLovCombo.superclass.selectPrev.call(this);
                }
            }
        },
    
    
        selectNext: function(){
            var ct = this.store.getCount();
            if ( ct > 0 ){
                if ( this.addSelectAllItem ){
                    if ( this.selectedIndex == -1 ){
                        this.selectedIndex = -2;
                        this.selectAllItem.child('.x-combo-list-item').addClass( this.selectedClass );
                    } else if ( this.selectedIndex == -2 ){
                        this.selectAllItem.child('.x-combo-list-item').removeClass( this.selectedClass );
                        this.select( 0 );
                    } else if ( this.selectedIndex < ct - 1 ){
                        this.select( this.selectedIndex + 1 );
                    } else if ( this.selectedIndex == ct - 1 ){
                        this.select( -1 );
                    }
                } else {
                    Ext.ux.form.ExtendedLovCombo.superclass.selectNext.call(this);
                }
            }
        },
    
    
        manageSelectAllState: function(){
            if ( this.selectAllItem && this.selectAllRecord ){
                var allSelected = true;
                this.store.each( function( r ) {
                    allSelected = allSelected && r.get( this.checkField );
                }, this);
                this.selectAllRecord.set( this.checkField, allSelected );
    
    
                var icon = this.selectAllItem.child('.ux-lovcombo-icon');
                if ( this.selectAllRecord.get( this.checkField ) ){
                    icon.removeClass( 'ux-lovcombo-icon-unchecked' );
                    icon.addClass( 'ux-lovcombo-icon-checked' );
                } else {
                    icon.removeClass( 'ux-lovcombo-icon-checked' );
                    icon.addClass( 'ux-lovcombo-icon-unchecked' );
                }
            }
        },
    
    
        onViewClick: function(doFocus){
            var index = this.view.getSelectedIndexes()[0],
                    s = this.store,
                    r = s.getAt( index );
            if ( r ){
                this.onSelect( r, index );
            } else {
                if ( this.addSelectAllItem ){
                    this.selectedIndex = -2;
    
    
                    this.toggleAll();
                    this.fireEvent( 'select', this, this.selectAllRecord, -1 );
                } else {
                    this.collapse();
                }
            }
            if ( doFocus !== false ){
                this.el.focus();
            }
        },
    
    
        /**
         * Combo's onSelect override
         * @private
         * @param {Ext.data.Record} record record that has been selected in the list
         * @param {Number} index index of selected (clicked) record
         */
        onSelect: function(record, index) {
            if(this.fireEvent('beforeselect', this, record, index) !== false){
                // toggle checked field
                record.set(this.checkField, !record.get(this.checkField));
    
    
                // set (update) value and fire event
                this.setValue(this.getCheckedValue());
                this.fireEvent('select', this, record, index);
            }
        },
    
    
        onTrigger1Click: Ext.form.ComboBox.prototype.onTriggerClick,
        onTrigger2Click: function()
        {
            if ( ! this.disabled ){
                this.collapse();
                if ( this.selectAllRecord ){
                    this.selectAllRecord.set( this.checkField, false );
                }
                if ( this.store ){
                    this.reset();           // reset contents of combobox, clear any filters as well
                }
                this.clearValue();
                this.fireEvent('cleared');  // send notification that contents have been cleared
            }
        },
    
    
        trigger1Class: Ext.form.ComboBox.prototype.triggerClass,
        trigger2Class: 'x-form-clear-trigger',
    
    
        getTrigger: function(){
            this.addClearItem ? Ext.form.TwinTriggerField.prototype.getTrigger.call(this) : Ext.form.ComboBox.prototype.getTrigger.call(this);
        },
        initTrigger: function(){
            this.addClearItem ? Ext.form.TwinTriggerField.prototype.initTrigger.call(this) : Ext.form.ComboBox.prototype.initTrigger.call(this);
        },
    
    
        getCheckedArrayInds: function() {
            var c = [];
    
    
            // store may be filtered so get all records
            var snapshot = this.store.snapshot || this.store.data;
    
    
            snapshot.each(function(r) {
                if( r.get(this.checkField) ) {
                    c.push(this.store.indexOf(r));
                }
            }, this);
    
    
            return c;
        },
    
    
        /////////////////////////////
        //      Custom configs     //
        /////////////////////////////
        autoSelect: false,
        emptyText: 'Select...',
        forceSelection: true,
        minChars: 0,
        mode: 'local',
        resizable: true,
        triggerAction: 'all',
        typeAhead: true
        /////////////////////////////
    
    
    });
    Ext.reg('extended-lov-combo', Ext.ux.form.ExtendedLovCombo);

  10. #630
    Sencha User
    Join Date
    Mar 2015
    Posts
    12
    Vote Rating
    0
    shipra007 is on a distinguished road

      0  

    Default Still am facing the same issue

    Still am facing the same issue


    Thanks for your response by my issue still persist. If am leaving and bits and pieces of this riddle do let me know. I will help to provide other relevant code to fix this. Its utmost priority for me its very imp to finish this week.

Thread Participants: 196

  1. galdaka (2 Posts)
  2. Dumbledore (8 Posts)
  3. nassaja-rus (2 Posts)
  4. mystix (4 Posts)
  5. fabrizim (1 Post)
  6. sdrew (1 Post)
  7. x5150 (4 Posts)
  8. exo (1 Post)
  9. JorisA (2 Posts)
  10. rarerules (2 Posts)
  11. Darklight (2 Posts)
  12. RhythmFighter (2 Posts)
  13. hui2008 (9 Posts)
  14. ntulip (1 Post)
  15. tobiu (3 Posts)
  16. cmendez21 (1 Post)
  17. steffenk (4 Posts)
  18. zapatista (2 Posts)
  19. george.antoniadis (1 Post)
  20. vlados (3 Posts)
  21. Alcoholov (1 Post)
  22. vibez (1 Post)
  23. dclaussen (1 Post)
  24. stefan.riedel-seifert (1 Post)
  25. nkohari (1 Post)
  26. vishalg (3 Posts)
  27. paparent (3 Posts)
  28. cnelissen (1 Post)
  29. wm003 (2 Posts)
  30. wvuong (3 Posts)
  31. SxOrpheus (5 Posts)
  32. mabello (21 Posts)
  33. sean.zhou (1 Post)
  34. kerbo (2 Posts)
  35. bendawg (2 Posts)
  36. sigaref (3 Posts)
  37. syscobra (1 Post)
  38. mankz (2 Posts)
  39. Sesshomurai (2 Posts)
  40. cblin (1 Post)
  41. smagen (1 Post)
  42. muh-die-kuh (2 Posts)
  43. Zolcsi (1 Post)
  44. evanc (1 Post)
  45. graveyardfashions (2 Posts)
  46. tarini (2 Posts)
  47. franck34 (1 Post)
  48. angelflaree (1 Post)
  49. BuckBazooka (2 Posts)
  50. skbach (5 Posts)
  51. jarnix (1 Post)
  52. ry.extjs (3 Posts)
  53. savva (1 Post)
  54. spiderman123 (1 Post)
  55. razvanioan (2 Posts)
  56. EasyEl (3 Posts)
  57. salvo (5 Posts)
  58. hpet (1 Post)
  59. futurezhang (4 Posts)
  60. chalu (6 Posts)
  61. Maharshi (4 Posts)
  62. siebertm (1 Post)
  63. TwystNeko (1 Post)
  64. dotchris (4 Posts)
  65. brenda (1 Post)
  66. mholyszko (3 Posts)
  67. bt_bruno (2 Posts)
  68. codeminer (1 Post)
  69. dgms (1 Post)
  70. cojas99 (1 Post)
  71. epoks (1 Post)
  72. shay2501 (1 Post)
  73. Remy (3 Posts)
  74. johnathanhebert (3 Posts)
  75. malord (1 Post)
  76. nescha (3 Posts)
  77. dxi (2 Posts)
  78. Efex (3 Posts)
  79. rails_user (1 Post)
  80. nebbian (6 Posts)
  81. evelynloo (2 Posts)
  82. nitznitz (1 Post)
  83. VictorSmirnov (1 Post)
  84. astagl (1 Post)
  85. supercharge2 (2 Posts)
  86. 7twenty (1 Post)
  87. mbajema (2 Posts)
  88. mthad (4 Posts)
  89. s4brown (1 Post)
  90. tripkos (2 Posts)
  91. cmaster (1 Post)
  92. hallow (1 Post)
  93. chiefclaudio (2 Posts)
  94. stive (2 Posts)
  95. Rothariger (7 Posts)
  96. ajatib (1 Post)
  97. freddd (2 Posts)
  98. kagupta@quark.com (2 Posts)
  99. Jack9 (6 Posts)
  100. jingyang (1 Post)
  101. lionheart33806 (3 Posts)
  102. proximus121 (3 Posts)
  103. Achim74 (2 Posts)
  104. foxmarco (1 Post)
  105. frank_ash (1 Post)
  106. wolverline (2 Posts)
  107. amnesia7 (1 Post)
  108. DoS (7 Posts)
  109. zeke (2 Posts)
  110. atian25 (1 Post)
  111. lakshmi (1 Post)
  112. anjuprema00 (1 Post)
  113. oliverseitz (2 Posts)
  114. olriche38 (3 Posts)
  115. Zack7 (2 Posts)
  116. dizor (1 Post)
  117. malstroem (1 Post)
  118. Stju (1 Post)
  119. kora.kanchan (4 Posts)
  120. whodat (7 Posts)
  121. minusForty (2 Posts)
  122. Seatle83 (1 Post)
  123. chelflores (1 Post)
  124. j_mmontero (1 Post)
  125. dbassett74 (1 Post)
  126. Gjslick (1 Post)
  127. eufire (4 Posts)
  128. salihgedik (1 Post)
  129. asnem (2 Posts)
  130. casbar (4 Posts)
  131. jack sparrow (1 Post)
  132. sajjan (3 Posts)
  133. bergstyle (1 Post)
  134. zyon (3 Posts)
  135. anaju (3 Posts)
  136. Smeraldo (2 Posts)
  137. gomby (1 Post)
  138. vivitron (5 Posts)
  139. Andreas B. (1 Post)
  140. wolfhowlmedia (2 Posts)
  141. Gadbury (1 Post)
  142. Thomas Triplet (5 Posts)
  143. Gonfi (1 Post)
  144. walta (3 Posts)
  145. Gustavo Silva (2 Posts)
  146. heavywave (1 Post)
  147. xjpmauricio (2 Posts)
  148. gtegos (1 Post)
  149. Rotterdam (2 Posts)
  150. chullan (1 Post)
  151. Ajithamani (1 Post)
  152. frederickd (1 Post)
  153. hazimdikenli (1 Post)
  154. completej (1 Post)
  155. harel (4 Posts)
  156. fitzkarraldo (1 Post)
  157. idmsch (3 Posts)
  158. headshredder (2 Posts)
  159. vikasj (2 Posts)
  160. cbhawk89 (1 Post)
  161. taronja (3 Posts)
  162. Keith Chadwick (1 Post)
  163. brainunit (2 Posts)
  164. milestonebass (1 Post)
  165. pankajsharma (3 Posts)
  166. devtig (2 Posts)
  167. fff398 (1 Post)
  168. Jensen (7 Posts)
  169. f0rmycurry (1 Post)
  170. hotdesc (1 Post)
  171. aghextjs (2 Posts)
  172. a.bongardt (1 Post)
  173. abdel.e (1 Post)
  174. alexxey (1 Post)
  175. ccyborg (4 Posts)
  176. ryanfebus (1 Post)
  177. dirkc (2 Posts)
  178. RCV (2 Posts)
  179. amanind (4 Posts)
  180. pipiet06 (1 Post)
  181. alukin (2 Posts)
  182. raghu.gitam (1 Post)
  183. dicos (1 Post)
  184. docsnyder (1 Post)
  185. dgeiselman (7 Posts)
  186. adavsko (2 Posts)
  187. andrei.stoleru (2 Posts)
  188. i.stojanovic (2 Posts)
  189. ldubois (1 Post)
  190. rodo008 (1 Post)
  191. kman (1 Post)
  192. googlebush (1 Post)
  193. ldashevskiy (8 Posts)
  194. yerman (1 Post)
  195. kwyc (1 Post)
  196. shipra007 (6 Posts)