ext 1.0 alpha3 combobox history - Ext JS

hi all,

i'm working on a quicksearch field for the grid with a (limit) history
while it's far from perfect, i wanted to share the code with u
using the editor-grid and paging example:

[edit]
i made a follow up grid demo @ http://ido.nl.eu.org/pir/
which has history completion and does both filtering and quicksearch
over a very large dataset.
[/edit]

Demo: http://ido.nl.eu.org/static/ext-1.0-...arch-grid.html

            // header panel
            var gridHead = grid.getView().getHeaderPanel();
            gridHead.show();
            var tb = new Ext.Toolbar(gridHead);

            tb.add({
                text: 'Quicksearch:',
                tooltip: 'Quickly search through the overview.',
            });

            var sftb = tb.addDom({
                tag: 'input',
                id: 'quicksearch',
                type: 'text',
                size: 30,
                value: '',
                style: 'background: #F0F0F9;'
                });
            var searchStore = new Ext.data.SimpleStore({
                fields: ['query'],
                data: []
            });
            var searchBox = new fm.ComboBox({
                store: searchStore,
                displayField: 'query',
                typeAhead: false,
                mode: 'local',
                triggerAction: 'all',
                hideTrigger: true,
            });
            searchBox.applyTo('quicksearch');
            tb.add({
                text: 'X',
                tooltip: 'Clear quicksearch',
                handler: function() {
                    if (searchBox.getValue().length!=0) {
                        searchBox.setValue('');
                        ds.clearFilter();
                    }
                }
            });
            var searchRec = Ext.data.Record.create([
                {name: 'query', type: 'string'}
            ]);
            var onFilteringBeforeQuery = function(e) {
                if (this.getValue().length==0) {
                    ds.clearFilter();
                } else {
                    var value = this.getValue().replace(/^\s+|\s+$/g, "");
                    if (value=="")
                        return;
                    ds.filterBy(function(r) {
                        valueArr = value.split(/\ +/);
                        for (var i=0; i<valueArr.length; i++) {
                            re = new RegExp(Ext.escapeRe(valueArr[i]), "i");
                            if (re.test(r.data['Title'])==false
                                && re.test(r.data['Place'])==false
                                && re.test(r.data['Remarks'])==false) {
                                return false;
                            };
                        }
                        return true;
                    });
                }
            };
            var onQuickSearchBeforeQuery = function(e) {
                if (this.getValue().length==0) {
                } else {
                    var value = this.getValue().replace(/^\s+|\s+$/g, "");
                    if (value=="")
                        return;
                    searchStore.clearFilter();
                    var vr_insert = true;
                    searchStore.each(function(r) {
                        if (r.data['query'].indexOf(value)==0) {
                            // backspace
                            vr_insert = false;
                            return false;
                        } else if (value.indexOf(r.data['query'])==0) {
                            // forward typing
                            searchStore.remove(r);
                        }
                    });
                    if (vr_insert==true) {
                        searchStore.each(function(r) {
                            if (r.data['query']==value) {
                                vr_insert = false;
                            }
                        });
                    }
                    if (vr_insert==true) {
                        var vr = new searchRec({query: value});
                        searchStore.insert(0, vr);
                    }
                    var ss_max = 4; // max 5 query history, starts counting from 0; 0==1,1==2,2==3,etc
                    if (searchStore.getCount()>ss_max) {
                        var ssc = searchStore.getCount();
                        var overflow = searchStore.getRange(ssc-(ssc-ss_max), ssc);
                        for (var i=0; i<overflow.length; i++) {
                            searchStore.remove(overflow[i]);
                        }
                    }
                }
            };
            searchBox.on("beforequery", onQuickSearchBeforeQuery);
            searchBox.on("beforequery", onFilteringBeforeQuery);
            searchBox.on("select", onFilteringBeforeQuery);

it only remembers to longest unique line and forgets all the typing in between.
hoping to get it to work with explicitly typing enter to get a query into history,
this way just type away to quickfind and explicitly remember a query for later.

(this would also make much sense to user who just put <enter> after everything)

thanks to Jack for this new combobox to play with

#2   03-08-2007, 11:52 PM

It sounds cool. Let me know when you have a link to look at.

#3   03-09-2007, 06:59 AM

Modified editor grid example here: http://ido.nl.eu.org/static/ext-1.0-...arch-grid.html

#4   03-09-2007, 07:29 AM

trbs -- looks great... small issue... if you type "sun" and wait a while... then using backspace to just "s" and write "shadow" then the history will contain both "sun" and "shadow". Maybe it could be a configuration parameter.... if you delete something while you are editing then I would not have it in the history. :wink:

#5   03-09-2007, 07:39 AM

Quote: Originally Posted by KimH trbs -- looks great... small issue... if you type "sun" and wait a while... then using backspace to just "s" and write "shadow" then the history will contain both "sun" and "shadow". Maybe it could be a configuration parameter.... if you delete something while you are editing then I would not have it in the history. :wink: yeah that's a known problem quicksearch should filter the datastore as u type (otherwise it's not very quick :-) but the history should be meaningfull and not contain every variation one types. that's why i made it so it only remembers the longest unique line. this brings forward your issue, and is also terrible for typo's, eg; type 'shadows' while u mean 'shadow' and the longer/bad search query is remembered in history instead of the correct one. that is why i want to try and hook into keyup instead of beforequery for the history. making it so that the history would only remember query's after u press <enter> in the searchbox.

#6   03-09-2007, 07:54 AM

I get s has no properties http://ido.nl.eu.org/static/ext-1.0-alpha3/ext-all.js Line 214 and sm is not defined http://ido.nl.eu.org/static/ext-1.0-...search-grid.js Line 174

#7   03-09-2007, 07:58 AM

Quote: Originally Posted by Animal I get s has no properties http://ido.nl.eu.org/static/ext-1.0-alpha3/ext-all.js Line 214 Working on this one.... Quote: Originally Posted by Animal and sm is not defined http://ido.nl.eu.org/static/ext-1.0-...search-grid.js Line 174 Sorry about that, should not work in javascript i posted while trying to track down the 's has no properties' problem

#8   03-09-2007, 08:08 AM

Fixed the 's has no properties' error... Works fine with the RowSelectionModel, still havn't got my finger on the underlying problem with CellSelectionModel... but it works now, without errors, in Firefox/Firebug which is good enough for the demo i guess :wink:

#9   03-09-2007, 02:52 PM

It worked great for me. I was wondering, can this work against a paged, remote data source. Well, I know it can ...but does what you have done work that way? In other words, if I want this to work on a table that would have 100k records I would not necessarily want to load all of those records into the page. Ideas?

#10   03-09-2007, 03:38 PM

Quote: Originally Posted by lstroud It worked great for me. I was wondering, can this work against a paged, remote data source. Well, I know it can ...but does what you have done work that way? In other words, if I want this to work on a table that would have 100k records I would not necessarily want to load all of those records into the page. Ideas? i build it for a paged grid, but it only filters thru the page not all the records in the store. if you would like to show 20 records on a page but search thru 100k then i think you should take a look at Jack's autocompletion box. (forum-search.html) i guess my example could go as far as filtering the grid store server side and displaying (in pages) all the results of the search in the grid. however, i would not recommend this for a 'quicksearch' because sending a query to the server for every letter a client types could easily bring down the server with a few users. Once i'm able to handle the onKeyUp events nicely in the searchbox it would make a nice feature for a grid application to do what you want on pressing enter in the searchbox (not at every stroke). If the searchbox was intergrated more tightly with the grid and pagingtoolbar (read; if i build a separate component extending combobox instead of just using it in the example) this could be something like an option on the searchbox. I hope to get around to extending combobox to make something like a searchbox as soon as possible. Jack, maybe it's an idea to add another parameter to Store.js ? so that we have something like: this.paramNames = { "start" : "start", "limit" : "limit", "sort" : "sort", "dir" : "dir", "filter" : "filter" }; Where 'filter' could be a dictionary of column and filter values or something like that. To be able to do server side filtering of the store when datasets get really really large. This could also be usefull if you want to have a selectbox somewhere else on the page or gridheader too only view records with a specific condition in the grid. (for example; having a selectbox with "Sunny" / "Shady" / etc somewhere and only show plants which are Sunny in the grid)