1. #11
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    89
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


    You really need to use Ext.escapeRe on the query value:

    Code:
    this.store.filter(this.displayField,
      this.matchWordStart ? new RegExp('\\b' + Ext.escapeRe(q), this.queryIgnoreCase ? 'i' : '') : q,
      this.anyMatch, this.queryIgnoreCase);
    and

    Code:
    var re = new RegExp(
      '(.*?)(' + (this.matchWordStart ? '\\b' : '') + Ext.escapeRe(this.getRawValue()) + ')(.*)',
      this.queryIgnoreCase ? 'i' : '');

  2. #12
    Sencha User NightAvatar's Avatar
    Join Date
    Nov 2008
    Location
    Norway
    Posts
    206
    Vote Rating
    0
    NightAvatar is on a distinguished road

      0  

    Default


    Holy Macaroni, BitPoet you're a genius!!!

    Thank you so much!

    Edit: And Condor, I see that shortened the code a bit and it still works, so thanks to you too!
    Last edited by NightAvatar; 13 Nov 2008 at 5:24 AM. Reason: kudos to Condor

  3. #13
    Ext User
    Join Date
    Nov 2008
    Posts
    1
    Vote Rating
    0
    minti82 is on a distinguished road

      0  

    Thumbs up This works great ....

    This works great ....


    This works just wonderful and BitPoet you are just too good at it !!!
    I am a new member here and was looking for just exactly the same.
    I just have another thing to add.
    When I type the word I need to find a match , it works just fine
    but when I DELETE some already typed characters the dropdown is still shown right, but the highlight goes away.
    Can you help me fix this.

  4. #14
    Sencha User BitPoet's Avatar
    Join Date
    Sep 2008
    Location
    Bavaria
    Posts
    277
    Vote Rating
    1
    BitPoet is on a distinguished road

      0  

    Default


    Quote Originally Posted by minti82 View Post
    When I type the word I need to find a match , it works just fine
    but when I DELETE some already typed characters the dropdown is still shown right, but the highlight goes away..
    Right, that's something I didn't notice. It's because of the combo's onLoad handler, which only fires typeAhead if the last key wasn't del or backspace. So here's the complete code with an adapted onLoad (and with Condor's change incorporated):

    Code:
    Ext.override( Ext.form.ComboBox, {
        anyMatch: false,
        /* Set to true to match case-insenstively: */
        queryIgnoreCase: false,
        /* Set to true to only match on word start (beginning of string,
           after whitespace or quotation marks: */
        matchWordStart: true,
        doQuery : function(q, forceAll){
            if(q === undefined || q === null){
                q = '';
            }
            var qe = {
                query: q,
                forceAll: forceAll,
                combo: this,
                cancel:false
            };
            if(this.fireEvent('beforequery', qe)===false || qe.cancel){
                return false;
            }
            q = qe.query;
            forceAll = qe.forceAll;
            if(forceAll === true || (q.length >= this.minChars)){
                if(this.lastQuery !== q){
                    this.lastQuery = q;
                    if(this.mode == 'local'){
                        this.selectedIndex = -1;
                        if(forceAll){
                            this.store.clearFilter();
                        }else{
                this.store.filter(this.displayField,
                  this.matchWordStart ? new RegExp('\\b' + Ext.escapeRe(q), this.queryIgnoreCase ? 'i' : '') : q,
                  this.anyMatch, this.queryIgnoreCase);
                        }
                        this.onLoad();
                    }else{
                        this.store.baseParams[this.queryParam] = q;
                        this.store.load({
                            params: this.getParams(q)
                        });
                        this.expand();
                    }
                }else{
                    this.selectedIndex = -1;
                    this.onLoad();
                }
            }
        }
        ,onTypeAhead: function() {
            var nodes = this.view.getNodes();
            for( var i = 0; i < nodes.length; i++ )
            {
                var n = nodes[i];
                var d = this.view.getRecord( n ).data;
            var re = new RegExp(
              '(.*?)(' + (this.matchWordStart ? '\\b' : '') + Ext.escapeRe(this.getRawValue()) + ')(.*)',
              this.queryIgnoreCase ? 'i' : '');
            var h = d[this.displayField];
                h = h.replace( re, '$1<span class="mark-combo-match">$2</span>$3' );
                n.innerHTML = h;
            }
        }
        ,onLoad : function(){
            if(!this.hasFocus){
                return;
            }
            if(this.store.getCount() > 0){
                this.expand();
                this.restrictHeight();
                if(this.lastQuery == this.allQuery){
                    if(this.editable){
                        this.el.dom.select();
                    }
                    if(!this.selectByValue(this.value, true)){
                        this.select(0, true);
                    }
                }else{
                    this.selectNext();
                    if(this.typeAhead){
                        this.taTask.delay(this.typeAheadDelay);
                    }
                }
            }else{
                this.onEmptyResults();
            }
         }
    });

  5. #15
    Sencha User NightAvatar's Avatar
    Join Date
    Nov 2008
    Location
    Norway
    Posts
    206
    Vote Rating
    0
    NightAvatar is on a distinguished road

      0  

    Default


    BitPoet,

    I am using this filter (by Condor) that filters results regardless of space. Lame explanation, but basically it will match 1234 56 7890 even if one omits the space in the search, like: 1234567890

    As is, Condor's filter works but it no longer highlights matches, once we pass the space.

    Is there a way to implement that space filter into your highlight code?

    EDIT:
    Condor seems to have fixed the space-search issue. But could you look into this highlighting bug? It's not new to Condor's code. It was that way when I was only using your (AWESOME!) highlight code, too. So I'm stumped.
    Last edited by NightAvatar; 21 Nov 2008 at 7:30 AM. Reason: Updated fix and request links

  6. #16
    Sencha User NightAvatar's Avatar
    Join Date
    Nov 2008
    Location
    Norway
    Posts
    206
    Vote Rating
    0
    NightAvatar is on a distinguished road

      0  

    Default


    I hope this thread isn't too old for me to mention a new "bug" I found.

    When a user types something that matches results in the list, but then decides to click the "dropdown arrow" to trigger opening the full list, then selects an item and then clicks the "dropdown arrow" once again to open the list, the old item matching the typed text is still highlighted, instead of the currently selected item or nothing. (Probably most correct would be to highlight nothing if the dropdown arrow/trigger is pressed, right?)

    So how can I reset it to erase the highlight memory when trigger/dropdown button is pressed?

    Is it in part of this code?
    Code:
        onViewClick : function(doFocus){
            var index = this.view.getSelectedIndexes()[0];
            var r = this.store.getAt(index);
            if(r){
                this.onSelect(r, index);
            } else {
                this.collapse();
            }
            if(doFocus !== false){
                this.el.focus();
            }
        }
    Thanks!

  7. #17
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    89
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


    No, you'd have to call view.refresh() in the onTriggerClick handler.

  8. #18
    Sencha User NightAvatar's Avatar
    Join Date
    Nov 2008
    Location
    Norway
    Posts
    206
    Vote Rating
    0
    NightAvatar is on a distinguished road

      0  

    Default


    Thanks Condor. I can't find the onTriggerClick handler, outside the main EXT (ext-all.js) file, which I don't dare edit.

    Where can I override that or add the function? I added it to the initEvents function under the "down" onKeyPress, which fixed the bug for when users press "down" arrow when inside the combo. So now I just need to do the same for the trigger click.

    EDIT: I think I found the answer. I edited line 129 of my ext-all.js (towards the end of the loooong line), adding the bold blue text below:
    Code:
    ...onTriggerClick:function(){if(this.disabled){return }if(this.isExpanded()){this.collapse();this.el.focus()}else{this.view.refresh();this.onFocus({});if(this.triggerAction=="all"){this.doQuery(this.allQuery,true)}else{this.doQuery(this.getRawValue())}this.el.focus()}}});Ext.reg("combo",Ext.form.ComboBox);
    Last edited by NightAvatar; 26 Oct 2009 at 4:23 AM. Reason: I think I found the answer...

  9. #19
    Sencha User NightAvatar's Avatar
    Join Date
    Nov 2008
    Location
    Norway
    Posts
    206
    Vote Rating
    0
    NightAvatar is on a distinguished road

      0  

    Default


    I added the code above but now the trigger works ONLY if I enter some text first. If the field is blank, or contains a default value from page-load, then clicking the trigger does nothing!

    Any ideas?

    EDIT: Nevermind!

    I found out the problem. I had placed the function a bit to early in the code above.

    It works if I do it this way instead:
    Code:
    ...onTriggerClick:function(){if(this.disabled){return }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.view.refresh();this.el.focus()}}});Ext.reg("combo",Ext.form.ComboBox);

  10. #20
    Sencha User
    Join Date
    Aug 2008
    Posts
    17
    Vote Rating
    0
    adblockfreak is on a distinguished road

      0  

    Default Case sensitivity

    Case sensitivity


    I'm using ExtJS 2.2.1, and found that I had to make a couple of tweaks to get case sensitivity to behave correctly. The problem is that queryIgnoreCase is "true" to ignore case, but that variable is passed into data.store.filter as <Boolean caseSensitive>, which is "true" to NOT ignore case. Here are my changes, followed by an explanation.

    Code:
    Ext.override( Ext.form.ComboBox, {
    ...
          queryCaseSensitive: false,
    ...
                    this.store.filter(this.displayField,
                             this.matchWordStart ? new RegExp('\\b' + Ext.escapeRe(q), this.queryCaseSensitive ? '' : 'i') : q,
                             this.anyMatch, this.queryCaseSensitive);
    ...
              var re = new RegExp(
                      '(.*?)(' + (this.matchWordStart ? '\\b' : '') + Ext.escapeRe(this.getRawValue()) + ')(.*)',
                      this.queryCaseSensitive ? '' : 'i');
    I renamed queryIgnoreCase to queryCaseSensitive to be more consistent with <Boolean caseSensitive>. Then any place where it said this.queryIgnoreCase ? 'i' : '' I swapped to read this.queryCaseSensitive ? '' : 'i'

    Before this change, I was seeing weird inconsistency in the case sensitivity. When I had it turned off, "a" would match "<A>lbany" and "C<a>lifornia", but "b" would match "Al<b>erta" and find no match in "Baton Rouge". "al" would match "G<al>lini" but not "<Al>lison".

    I hope this helps someone else. Many thanks to everyone for the great code here, and especially to BitPoet for pulling all the tweaks and changes into one unified block of code for us amateurs!