[CLOSED] [#111] How to filter combo box data using the text that exists in the middle

  1. #1

    [CLOSED] [#111] How to filter combo box data using the text that exists in the middle

    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    
        <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            var store = this.SelectBox1.GetStore();
            
            store.DataSource = new object[]
            {
                new object[] { "AL", "The Heart of Dixie ", "The Heart of Dixie" },
                new object[] { "AK", "The Land of the Midnight Sun", "The Land of the Midnight Sun" },
                new object[] { "AZ", "The Grand Canyon State", "The Grand Canyon State" },        
               
            };
            
            store.DataBind();
        }
    </script>
    
    <!DOCTYPE html>
    
    <html>
    <head id="Head1" runat="server">
        <title>SelectBox - Ext.NET Examples</title>
        <link href="/resources/css/examples.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
        <form id="Form1" runat="server">
            <ext:ResourceManager ID="ResourceManager1" runat="server" />
            
            <ext:ComboBox
                ID="SelectBox1"
                runat="server" 
                DisplayField="state"
                ValueField="abbr" QueryMode="Local"
                EmptyText="Select a state...">
                <Store>
                    <ext:Store ID="Store1" runat="server">
                        
                        <Model>
                            <ext:Model ID="Model1" runat="server">
                                <Fields>
                                    <ext:ModelField Name="abbr" />
                                    <ext:ModelField Name="state" />
                                    <ext:ModelField Name="nick" />
                                </Fields>
                            </ext:Model>
                        </Model>            
                    </ext:Store>    
                </Store>    
            </ext:ComboBox>
        </form>
    </body>
    </html>
    When i type "Dixie" then item "The Heart of Dixie" should filter in the combo box, how to achieve that?
    Last edited by Daniil; Mar 14, 2013 at 11:56 AM. Reason: [CLOSED]
  2. #2
    Hi,

    Here is the example for Ext.NET v1.
    http://forums.ext.net/showthread.php...ll=1#post53824

    I think the idea should work in Ext.NET v2 as well.
  3. #3
    Typed value is being automatically clear using above approach.
  4. #4
    Confirm.

    I can suggest the following solution.

    Example
    <%@ Page Language="C#" %>
     
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
     
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                Store store = this.ComboBox1.GetStore();
                store.DataSource = new object[] 
                { 
                    new object[] { "1", "aa" },
                    new object[] { "2", "ab" },
                    new object[] { "3", "ac" },
                    new object[] { "4", "ba" },
                    new object[] { "5", "bb" },
                    new object[] { "6", "bc" },
                    new object[] { "7", "ca" },
                    new object[] { "8", "cb" },
                    new object[] { "9", "cc" }
                };
                store.DataBind();
            }
        }
    </script>
     
    <!DOCTYPE html>
    
    <html>
    <head runat="server">
        <title>Ext.NET v2 Example</title>
    </head>
    <body>
        <ext:ResourceManager runat="server" />
        <ext:ComboBox 
            ID="ComboBox1" 
            runat="server" 
            QueryMode="Local" 
            EnableKeyEvents="true">
            <Store>
                <ext:Store runat="server">
                    <Model>
                        <ext:Model runat="server">
                            <Fields>
                                <ext:ModelField Name="value" />
                                <ext:ModelField Name="text" />
                            </Fields>
                        </ext:Model>
                    </Model>
                </ext:Store>
            </Store>
                <Listeners>
                    <BeforeQuery Handler="var q = queryEvent.query;
                                      
                                          queryEvent.query = new RegExp(q);
                                          queryEvent.query.length = q.length;" />
                </Listeners>
        </ext:ComboBox>
    </body>
    </html>
    Here is a related Sencha thread I have just started.
    http://www.sencha.com/forum/showthread.php?235564
  5. #5
    Thanks very much, it works.
  6. #6
    Quote Originally Posted by Daniil View Post
    Here is a related Sencha thread I have just started.
    http://www.sencha.com/forum/showthread.php?235564
    Sencha opened a ticket to improve. Here are some details what they are going to do.
    http://www.sencha.com/forum/showthre...l=1#post883454

    Created an Issue to track it.
    https://github.com/extnet/Ext.NET/issues/111
  7. #7
    Sencha added the enableRegEx option.
    http://docs.sencha.com/ext-js/4-2/#!...fg-enableRegEx

    Now this
    <Listeners>
        <BeforeQuery Handler="var q = queryEvent.query;
                                       
                                queryEvent.query = new RegExp(q);
                                queryEvent.query.length = q.length;" />
    </Listeners>
    can be replaced with just EnableRegEx="true" option for a ComboBox.

    Example
    <%@ Page Language="C#" %>
      
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
      
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                Store store = this.ComboBox1.GetStore();
                store.DataSource = new object[] 
                { 
                    new object[] { "1", "aa" },
                    new object[] { "2", "ab" },
                    new object[] { "3", "ac" },
                    new object[] { "4", "ba" },
                    new object[] { "5", "bb" },
                    new object[] { "6", "bc" },
                    new object[] { "7", "ca" },
                    new object[] { "8", "cb" },
                    new object[] { "9", "cc" }
                };
                store.DataBind();
            }
        }
    </script>
      
    <!DOCTYPE html>
     
    <html>
    <head runat="server">
        <title>Ext.NET v2 Example</title>
    </head>
    <body>
        <ext:ResourceManager runat="server" />
        <ext:ComboBox
            ID="ComboBox1"
            runat="server"
            QueryMode="Local"
            EnableRegEx="true">
            <Store>
                <ext:Store runat="server">
                    <Model>
                        <ext:Model runat="server">
                            <Fields>
                                <ext:ModelField Name="value" />
                                <ext:ModelField Name="text" />
                            </Fields>
                        </ext:Model>
                    </Model>
                </ext:Store>
            </Store>
        </ext:ComboBox>
    </body>
    </html>
    Last edited by Daniil; Jun 12, 2013 at 5:19 AM.

Similar Threads

  1. [CLOSED] TypeAhead/Filter Combo Box
    By rthiney in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Jun 24, 2014, 1:43 PM
  2. text search in combo box
    By Mr.Techno in forum 1.x Help
    Replies: 8
    Last Post: Dec 30, 2011, 5:14 AM
  3. Combo Box TEXT Problem
    By EMS in forum 1.x Help
    Replies: 1
    Last Post: Dec 07, 2010, 2:36 PM
  4. [CLOSED] get more than one text from combo box
    By sharif in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Apr 07, 2010, 10:13 AM
  5. combo box empty text
    By [WP]joju in forum 1.x Help
    Replies: 2
    Last Post: Oct 16, 2009, 4:19 AM

Tags for this Thread

Posting Permissions