Results 1 to 2 of 2

Thread: ComboBox filter on mutiple columns

  1. #1
    Sencha User
    Join Date
    Dec 2010
    Location
    Chicago, IL
    Posts
    1
    Vote Rating
    0
      0  

    Default

    I'm creating a ComboBox with Groupings (ie Country/City) values. I was able to create the grouping by defining a template that works well. The filtering works well of the City values, but I want to filter on Country OR City. (Country is the grouping). Now, I'm trying to customize the filtering of the store on records where query value matches the City OR the Country.

    My first attempt was to add a handler for the beforeQuery event on the ComboBox, but I had to copy some of the logic from the doQuery function into my handler.

    My current solution is to wrap the filter function from my store in a function that alters the parameters passed in from my ComboBox.

    I'm just curious is there is a better solution?

    Code:
    var ds = new Ext.data.Store({
        url: TOTAL_LOAD_URL,
        reader: createReader()
    });
    
    //    define a startWith method for strings
    String.prototype.startsWith = function (str) { return (this.match("^"   str) == str) }
    
    //    wrap the original filter function around a function which catches the query
    //    and alters it to look in country or city columns
    ds.baseFilter = ds.filter;
    ds.filter = function (property, value, anyMatch, caseSensitive, exactMatch) {
    
        if (typeof property == 'string') {    //    check if the property is a string
            //    assume that this is combo box and search on City OR Country
    
            //    lower case the search value
            var queryString = value.toLowerCase();
            
            //    define function to match the query string against City OR Country
            function fn(record) {
                var city = record.get('City').toLowerCase();
                var country = record.get('Country').toLowerCase();
                return city.startsWith(queryString) || country.startsWith(queryString);
            }
    
            //    redefine the property to instead use the function to filter the record set
            property = [{ fn: fn}];
    
        }
        
        //    call the original function
        this.baseFilter(property, value, anyMatch, caseSensitive, exactMatch);
    }
    
    //    load the data set
    ds.load();
    
    
    var combo = new Ext.form.ComboBox({
        store: ds,
        displayField: 'City',
        valueField: 'CityID',
        typeAhead: false,
        triggerAction: 'all',
        lazyInit: true,
        mode: 'local',
        applyTo: input,
        anyMatch: true,
        tpl: CITY_GROUPING_TEMPLATE
    });


    I'm new to Ext JS (1.7 days) and excited about learning the framework

  2. #2
    Sencha User Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Answers
    1
    Vote Rating
    132
      0  

    Default

    There is an open feature request to move the filtering logic from ComboBox.doQuery into a separate method, so you can simply override it and perform a filterBy yourself.

Similar Threads

  1. Copy Mutiple Rows/Columns into Grid from Excel.
    By tmokha in forum Ext 3.x: Help & Discussion
    Replies: 4
    Last Post: 30 Nov 2010, 12:55 PM
  2. Replies: 4
    Last Post: 16 Aug 2009, 12:20 PM
  3. GridFilter, but single window to filter all columns
    By Troy Wolf in forum Ext 2.x: Help & Discussion
    Replies: 9
    Last Post: 6 Dec 2007, 1:27 PM
  4. How to put Group mutiple columns and add title to them in DataGrid
    By fshehzad in forum Ext 1.x: Help & Discussion
    Replies: 3
    Last Post: 21 May 2007, 6:25 AM

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •