Combobox Partial String Search for List Item

Page 2 of 2 FirstFirst 12
  1. #11

    RE: Combobox Partial String Search for List Item

    Thanks for the tip. I was unfortunately unsuccessful. I am continually getting Ext is undefined errors on line 1 of the
    CustomFilterCombo.js file. My sample code is below


    
    <%@ Page Language="VB" AutoEventWireup="false" CodeFile="Test.aspx.vb" Inherits="Test" %>
    
    <%@ Register Assembly="Coolite.Ext.Web" Namespace="Coolite.Ext.Web" TagPrefix="ext" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>Untitled Page</title>
    
        <script type="text/javascript" src="CustomFilterCombo.js"></script>
    
    </head>
    <body>
        <form id="form1" runat="server">
        <ext:ScriptManager ID="ScriptManager1" runat="server" CleanResourceUrl="False">
        </ext:ScriptManager>
        
            <ext:ComboBox ID="ComboBox1" runat="server">
                <Items>
                    <ext:ListItem Text="Book" />
                    <ext:ListItem Text="Bookcase" />
                    <ext:ListItem Text="Briefcase" />
                    <ext:ListItem Text="Chair" />
                    <ext:ListItem Text="Canada" />
                </Items>
            </ext:ComboBox>
    
            <script type="text/javascript">
            Ext.onReady(function(){
        var plugins = [];
        plugins.push(new Ext.ux.plugins.CustomFilterCombo({
            anyMatch: true,
            caseSensitive: true
        }));
    
        ComboBox1.addPlugins(plugins); )
             }
            </script>
    
        
    
        </form>
    </body>
    </html>

    Javascript file below.

    Ext.ns('Ext.ux.plugins');
    
    /**
     * allow custom value in combobox
     * if the entered value is not found in the store the value is used as the combos value
     * 
     * @author Gustav Rek
     * @date 21.01.2010
     * @version 1
     * 
     */
    
    Ext.ux.plugins.CustomFilterCombo = function(config) {
        Ext.apply(this, config);
        
        Ext.ux.plugins.CustomFilterCombo.superclass.constructor.call(this);
    };
    
    Ext.extend(Ext.ux.plugins.CustomFilterCombo, Object, {
        
        /**
         * @cfg {Boolean} anyMatch <tt>true</tt> to match any part not just the beginning (default=false)
         */
        anyMatch : false,
        
        /**
         * @cfg {Boolean} caseSensitive <tt>true</tt> for case sensitive comparison (default=false)
         */
        caseSensitive : false,
        
        /**
         * @cfg {Function} filterFn Filter by a function. This function will be called for each
         * Record in this Store. If the function returns <tt>true</tt> the Record is included,
         * otherwise it is filtered out (default=undefined).
         * When using this parameter anyMathch and caseSensitive are ignored!
         * @param {Ext.data.Record} record  The {@link Ext.data.Record record}
         * to test for filtering. Access field values using {@link Ext.data.Record#get}.
         * @param {Object} id The ID of the Record passed.
         * @param {String} field The field filtered in (normally the displayField of the combo).
         * Use this with {@link Ext.data.Record#get} to fetch the String to match against.
         * @param {String} value The value typed in by the user.
         */
        filterFn : undefined,
        
        init : function(combo) {
            this.combo = combo;
            
            if(Ext.isFunction(this.filterFn)) {
                combo.store.filter = this.filterBy.createDelegate(this);
            } else {
                // save this funtcion for later use, before we overwrite it
                combo.store.originalFilter = combo.store.filter;
                combo.store.filter = this.filter.createDelegate(this);
            }
        },
        
        // scope: this
        filterBy : function(field, value) {
            this.combo.store.filterBy(this.filterFn.createDelegate(this.combo, [field, value], true));        
        },
        
        // scope: this
        filter : function(field, value) {
            this.combo.store.originalFilter(field, value, this.anyMatch, this.caseSensitive);
        }
    });
    
    Ext.reg('customfiltercombo', Ext.ux.plugins.CustomFilterCombo);
    Thanks!
  2. #12

    RE: Combobox Partial String Search for List Item

    Ahh, I forgot another change I made:

    init : function(combo) {
            this.combo = combo;
    
                combo.store.originalFilter = combo.store.filter;
                combo.store.filter = this.filter.createDelegate(this);
            }
    I changed the init function to the above, to remove the call to Ext.isFunction as it doesn't appear to be present in Coolite 0.8.2
  3. #13

    RE: Combobox Partial String Search for List Item

    Does this now work correctly in V1.0? If so, can you sample?
  4. #14

    RE: Combobox Partial String Search for List Item

    Hi to everyone,
    For anyone might facing that issue till now, i got it working by removing the last line of js file.

    Ext.ns('Ext.ux.plugins');
    
    /**
    * allow custom value in combobox
    * if the entered value is not found in the store the value is used as the combos value
    * 
    * @author Gustav Rek
    * @date 21.01.2010
    * @version 1
    * 
    */
    
    Ext.ux.plugins.CustomFilterCombo = function (config) {
        Ext.apply(this, config);
    
        Ext.ux.plugins.CustomFilterCombo.superclass.constructor.call(this);
    };
    
    Ext.extend(Ext.ux.plugins.CustomFilterCombo, Object, {
    
        /**
        * @cfg {Boolean} anyMatch <tt>true</tt> to match any part not just the beginning (default=false)
        */
        anyMatch: false,
    
        /**
        * @cfg {Boolean} caseSensitive <tt>true</tt> for case sensitive comparison (default=false)
        */
        caseSensitive: false,
    
        /**
        * @cfg {Function} filterFn Filter by a function. This function will be called for each
        * Record in this Store. If the function returns <tt>true</tt> the Record is included,
        * otherwise it is filtered out (default=undefined).
        * When using this parameter anyMathch and caseSensitive are ignored!
        * @param {Ext.data.Record} record  The {@link Ext.data.Record record}
        * to test for filtering. Access field values using {@link Ext.data.Record#get}.
        * @param {Object} id The ID of the Record passed.
        * @param {String} field The field filtered in (normally the displayField of the combo).
        * Use this with {@link Ext.data.Record#get} to fetch the String to match against.
        * @param {String} value The value typed in by the user.
        */
        filterFn: undefined,
    
        init: function (combo) {
            this.combo = combo;
    
            if (Ext.isFunction(this.filterFn)) {
                combo.store.filter = this.filterBy.createDelegate(this);
            } else {
                // save this funtcion for later use, before we overwrite it
                combo.store.originalFilter = combo.store.filter;
                combo.store.filter = this.filter.createDelegate(this);
            }
        },
    
        // scope: this
        filterBy: function (field, value) {
            this.combo.store.filterBy(this.filterFn.createDelegate(this.combo, [field, value], true));
        },
    
        // scope: this
        filter: function (field, value) {
            this.combo.store.originalFilter(field, value, this.anyMatch, this.caseSensitive);
        }
    });
    and the aspx
    <Plugins>
                                        <ext:GenericPlugin ID="comboFilterPlugin" runat="server" Path="CustomFilterCombo.js" InstanceName="Ext.ux.plugins.CustomFilterCombo">
                                            <CustomConfig>
                                                <ext:ConfigItem Name="anyMatch" Value="true" />
                                            </CustomConfig>
                                        </ext:GenericPlugin>
                                    </Plugins>
    Thank you.
  5. #15
    Just to confirm that the plugin works fine with version 1.3.
  6. #16
    Sorry to reopen this topic, the solution is not working and I can not find another.
    On the line:
    Combo.store.filter = this.filter.createDelegate (this);
    Generates the following error:
    This.filter.createDelegate is not a function
Page 2 of 2 FirstFirst 12

Similar Threads

  1. Replies: 18
    Last Post: Jul 20, 2011, 8:59 PM
  2. Custom Search ComboBox with String.Contains
    By BLOZZY in forum 1.x Help
    Replies: 0
    Last Post: Jan 28, 2011, 12:22 PM
  3. Replies: 1
    Last Post: Dec 15, 2010, 3:07 PM
  4. [CLOSED] [1.0] Selecting Combobox expanded list item through Tab key
    By r_honey in forum 1.x Legacy Premium Help
    Replies: 5
    Last Post: Jun 02, 2010, 4:54 PM
  5. [CLOSED] ComboBox Item List not displaying full Width
    By bfolger in forum 1.x Legacy Premium Help
    Replies: 6
    Last Post: Aug 24, 2009, 10:12 PM

Posting Permissions