The official release of Ext.NET Mobile is now available. Ext.NET Mobile is an ASP.NET component framework for building Phone and Tablet specific mobile web applications. Read More

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. 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 Premium Help
    Replies: 6
    Last Post: Aug 24, 2009, 10:12 PM

Posting Permissions