[CLOSED] Editable Combobox Not Valid Value

  1. #1

    [CLOSED] Editable Combobox Not Valid Value

    Hi! I'm interesting in a editable combobox that shows, when you are typing any text, all the values that match it. However, when no value exists for the typed text, I need to show an alert message or to change the color for this combobox.

    For example, on your overview combobox example page: https://examples1.ext.net/#/Form/ComboBox/Overview/, the combo with the header "Editable with predefine value", if I type the text "Ala", the combobox must show the values "Alaska" and "Alabama". However, if I type the text "Alax", the system must show me an alert.

    I would like to avoid to access to my database (more than on the load) and a copy of the store on my page (on my page, the combobox has a huge amount of values).

    Could you help me with this issue, please?
    Last edited by Daniil; Apr 26, 2011 at 9:43 AM. Reason: [CLOSED]
  2. #2
    Hi,

    I can suggest you the following way. Please see the AfterRender listener.

    Example
    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            this.Store1.DataSource = new object[]
            {
                new object[] { "AL", "Alabama", "The Heart of Dixie" },
                new object[] { "AK", "Alaska", "The Land of the Midnight Sun" },
                new object[] { "AZ", "Arizona", "The Grand Canyon State" },
                new object[] { "AR", "Arkansas", "The Natural State" },
                new object[] { "CA", "California", "The Golden State" },
                new object[] { "CO", "Colorado", "The Mountain State" },
                new object[] { "CT", "Connecticut", "The Constitution State" },
                new object[] { "DE", "Delaware", "The First State" },
                new object[] { "DC", "District of Columbia", "The Nation's Capital" },
                new object[] { "FL", "Florida", "The Sunshine State" },
                new object[] { "GA", "Georgia", "The Peach State" },
                new object[] { "HI", "Hawaii", "The Aloha State" },
                new object[] { "ID", "Idaho", "Famous Potatoes" },
                new object[] { "IL", "Illinois", "The Prairie State" },
                new object[] { "IN", "Indiana", "The Hospitality State" },
                new object[] { "IA", "Iowa", "The Corn State" },
                new object[] { "KS", "Kansas", "The Sunflower State" },
                new object[] { "KY", "Kentucky", "The Bluegrass State" },
                new object[] { "LA", "Louisiana", "The Bayou State" },
                new object[] { "ME", "Maine", "The Pine Tree State" },
                new object[] { "MD", "Maryland", "Chesapeake State" },
                new object[] { "MA", "Massachusetts", "The Spirit of America" },
                new object[] { "MI", "Michigan", "Great Lakes State" },
                new object[] { "MN", "Minnesota", "North Star State" },
                new object[] { "MS", "Mississippi", "Magnolia State" },
                new object[] { "MO", "Missouri", "Show Me State" },
                new object[] { "MT", "Montana", "Big Sky Country" },
                new object[] { "NE", "Nebraska", "Beef State" },
                new object[] { "NV", "Nevada", "Silver State" },
                new object[] { "NH", "New Hampshire", "Granite State" },
                new object[] { "NJ", "New Jersey", "Garden State" },
                new object[] { "NM", "New Mexico", "Land of Enchantment" },
                new object[] { "NY", "New York", "Empire State" },
                new object[] { "NC", "North Carolina", "First in Freedom" },
                new object[] { "ND", "North Dakota", "Peace Garden State" },
                new object[] { "OH", "Ohio", "The Heart of it All" },
                new object[] { "OK", "Oklahoma", "Oklahoma is OK" },
                new object[] { "OR", "Oregon", "Pacific Wonderland" },
                new object[] { "PA", "Pennsylvania", "Keystone State" },
                new object[] { "RI", "Rhode Island", "Ocean State" },
                new object[] { "SC", "South Carolina", "Nothing Could be Finer" },
                new object[] { "SD", "South Dakota", "Great Faces, Great Places" },
                new object[] { "TN", "Tennessee", "Volunteer State" },
                new object[] { "TX", "Texas", "Lone Star State" },
                new object[] { "UT", "Utah", "Salt Lake State" },
                new object[] { "VT", "Vermont", "Green Mountain State" },
                new object[] { "VA", "Virginia", "Mother of States" },
                new object[] { "WA", "Washington", "Green Tree State" },
                new object[] { "WV", "West Virginia", "Mountain State" },
                new object[] { "WI", "Wisconsin", "America's Dairyland" },
                new object[] { "WY", "Wyoming", "Like No Place on Earth" } 
            };
            
            this.Store1.DataBind();
            
        }
    </script>
    
    <!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>Comboboxes - Ext.NET Examples</title>
        
        <script type="text/javascript">
            var onAfterRender = function () {
                this.onLoad = this.onLoad.createSequence(function () {
                    if (this.store.getCount() == 0) {
                        alert('Not found');
                    }
                });
            }
        </script>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
            
            <ext:Store ID="Store1" runat="server">
                <Reader>
                    <ext:ArrayReader>
                        <Fields>
                            <ext:RecordField Name="abbr" />
                            <ext:RecordField Name="state" />
                            <ext:RecordField Name="nick" />
                        </Fields>
                    </ext:ArrayReader>
                </Reader> 
            </ext:Store>
            
            <ext:ComboBox 
                runat="server" 
                StoreID="Store1" 
                Editable="true"
                DisplayField="state"
                ValueField="abbr"
                TypeAhead="true" 
                Mode="Local"
                ForceSelection="true"
                TriggerAction="All"
                EmptyText="Select a state..."
                SelectOnFocus="true">
                <Listeners>
                    <AfterRender Fn="onAfterRender" />
                </Listeners>
            </ext:ComboBox>
        </form>
    </body>
    </html>
  3. #3
    It works perfect, thank you Daniil.

    Just a little question more. On your code, you use the sentence "alert" to show the message. After clicking on the OK button, the incorrect value on the combo is selected, making easier to replace to a new valid value (just typing without using the mouse).

    However, I have tried this using X.Msg.alert (to unify the look&feel of my application), but the behaviour after the OK button click is different. Do you know how could I select the incorrect text or at least focus the cursor on the combobox? I'm interesting in creating a generic function for every combobox of my pages.

    Thank you again!
  4. #4
    Hi,

    Please see the sample.

    The differences:

    1. ForceSelection="false"
    2. New code of onAfterRender function.
    var onAfterRender = function () {
        this.onLoad = this.onLoad.createSequence(function () {
            if (this.store.getCount() == 0) {
                Ext.Msg.alert(
                    "Not found", 
                    "Not found", 
                    function () {
                        this.focus(); 
                    },
                    this
                );
            }
        });
    }
    Example
    <%@ Page Language="C#" %>
     
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
     
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            this.Store1.DataSource = new object[]
            {
                new object[] { "AL", "Alabama", "The Heart of Dixie" },
                new object[] { "AK", "Alaska", "The Land of the Midnight Sun" },
                new object[] { "AZ", "Arizona", "The Grand Canyon State" },
                new object[] { "AR", "Arkansas", "The Natural State" },
                new object[] { "CA", "California", "The Golden State" },
                new object[] { "CO", "Colorado", "The Mountain State" },
                new object[] { "CT", "Connecticut", "The Constitution State" },
                new object[] { "DE", "Delaware", "The First State" },
                new object[] { "DC", "District of Columbia", "The Nation's Capital" },
                new object[] { "FL", "Florida", "The Sunshine State" },
                new object[] { "GA", "Georgia", "The Peach State" },
                new object[] { "HI", "Hawaii", "The Aloha State" },
                new object[] { "ID", "Idaho", "Famous Potatoes" },
                new object[] { "IL", "Illinois", "The Prairie State" },
                new object[] { "IN", "Indiana", "The Hospitality State" },
                new object[] { "IA", "Iowa", "The Corn State" },
                new object[] { "KS", "Kansas", "The Sunflower State" },
                new object[] { "KY", "Kentucky", "The Bluegrass State" },
                new object[] { "LA", "Louisiana", "The Bayou State" },
                new object[] { "ME", "Maine", "The Pine Tree State" },
                new object[] { "MD", "Maryland", "Chesapeake State" },
                new object[] { "MA", "Massachusetts", "The Spirit of America" },
                new object[] { "MI", "Michigan", "Great Lakes State" },
                new object[] { "MN", "Minnesota", "North Star State" },
                new object[] { "MS", "Mississippi", "Magnolia State" },
                new object[] { "MO", "Missouri", "Show Me State" },
                new object[] { "MT", "Montana", "Big Sky Country" },
                new object[] { "NE", "Nebraska", "Beef State" },
                new object[] { "NV", "Nevada", "Silver State" },
                new object[] { "NH", "New Hampshire", "Granite State" },
                new object[] { "NJ", "New Jersey", "Garden State" },
                new object[] { "NM", "New Mexico", "Land of Enchantment" },
                new object[] { "NY", "New York", "Empire State" },
                new object[] { "NC", "North Carolina", "First in Freedom" },
                new object[] { "ND", "North Dakota", "Peace Garden State" },
                new object[] { "OH", "Ohio", "The Heart of it All" },
                new object[] { "OK", "Oklahoma", "Oklahoma is OK" },
                new object[] { "OR", "Oregon", "Pacific Wonderland" },
                new object[] { "PA", "Pennsylvania", "Keystone State" },
                new object[] { "RI", "Rhode Island", "Ocean State" },
                new object[] { "SC", "South Carolina", "Nothing Could be Finer" },
                new object[] { "SD", "South Dakota", "Great Faces, Great Places" },
                new object[] { "TN", "Tennessee", "Volunteer State" },
                new object[] { "TX", "Texas", "Lone Star State" },
                new object[] { "UT", "Utah", "Salt Lake State" },
                new object[] { "VT", "Vermont", "Green Mountain State" },
                new object[] { "VA", "Virginia", "Mother of States" },
                new object[] { "WA", "Washington", "Green Tree State" },
                new object[] { "WV", "West Virginia", "Mountain State" },
                new object[] { "WI", "Wisconsin", "America's Dairyland" },
                new object[] { "WY", "Wyoming", "Like No Place on Earth" } 
            };
             
            this.Store1.DataBind();
             
        }
    </script>
     
    <!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>Comboboxes - Ext.NET Examples</title>
         
        <script type="text/javascript">
            var onAfterRender = function () {
                this.onLoad = this.onLoad.createSequence(function () {
                    if (this.store.getCount() == 0) {
                        Ext.Msg.alert(
                            "Not found", 
                            "Not found", 
                            function () {
                                this.focus(); 
                            },
                            this
                        );
                    }
                });
            }
        </script>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
             
            <ext:Store ID="Store1" runat="server">
                <Reader>
                    <ext:ArrayReader>
                        <Fields>
                            <ext:RecordField Name="abbr" />
                            <ext:RecordField Name="state" />
                            <ext:RecordField Name="nick" />
                        </Fields>
                    </ext:ArrayReader>
                </Reader> 
            </ext:Store>
             
            <ext:ComboBox
                runat="server"
                StoreID="Store1"
                Editable="true"
                DisplayField="state"
                ValueField="abbr"
                TypeAhead="true"
                Mode="Local"
                ForceSelection="false"
                TriggerAction="All"
                EmptyText="Select a state..."
                SelectOnFocus="true">
                <Listeners>
                    <AfterRender Fn="onAfterRender" />
                </Listeners>
            </ext:ComboBox>
        </form>
    </body>
    </html>
  5. #5
    Perfect. Thank you!

Similar Threads

  1. Replies: 9
    Last Post: Aug 03, 2012, 8:36 AM
  2. [CLOSED] V2.0 ComboBox Editable
    By Aurelio in forum 2.x Legacy Premium Help
    Replies: 2
    Last Post: Feb 23, 2012, 10:37 AM
  3. [CLOSED] ComboBox in Editable GridPanel
    By ljcorreia in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Jun 29, 2011, 3:00 PM
  4. [CLOSED] Editable Combobox
    By 78fede78 in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Oct 13, 2010, 2:28 PM
  5. [CLOSED] Editable ComboBox issue
    By methode in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Jun 03, 2009, 4:04 PM

Tags for this Thread

Posting Permissions