convert asp list box to ext.net combo box

  1. #1

    convert asp list box to ext.net combo box

    I am new to ext.net community. I am trying to convert asp list box to ext.net combo box.
    <asp:ListBox ID="valueType" runat="server" Rows="1"  AutoPostBack="True"
    	OnSelectedIndexChanged="valueType_SelectedIndexChanged">
    	<asp:ListItem Value="">--- SELECT ---</asp:ListItem>
    	<asp:ListItem Value="F">Flat</asp:ListItem>
    	<asp:ListItem Value="P">Percentage</asp:ListItem>
    </asp:ListBox>
    1. How can I conver this to ext.net combo box ?
  2. #2
    Hello @hadoop! Welcome to Ext.NET forums! Hope you are enjoying the framework!

    Here's one way how you can draw a combo box much like the asp list you provided:
    <%@ Page Language="C#" %>
    
    <!DOCTYPE html>
    
    <script runat="server">
        public void valueType_SelectedIndexChanged(object sender, EventArgs e)
        {
            
        }
    
        protected List<object> TestData = new List<object>
        {
            new object[] { "Flat", "F" },
            new object[] { "Percentage", "P" }
        };
            
    </script>
    <html>
    <head runat="server">
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
            <ext:ResourceManager runat="server" />
            <asp:ListBox ID="valueType" runat="server" Rows="1" AutoPostBack="True"
                OnSelectedIndexChanged="valueType_SelectedIndexChanged">
                <asp:ListItem Value="">--- SELECT ---</asp:ListItem>
                <asp:ListItem Value="F">Flat</asp:ListItem>
                <asp:ListItem Value="P">Percentage</asp:ListItem>
            </asp:ListBox>
            <ext:ComboBox runat="server" EmptyText="--- SELECT ---" DisplayField="name">
                <Store>
                    <ext:Store ID="store1" runat="server" Data="<%# TestData %>">
                        <Model>
                            <ext:Model runat="server" IDProperty="value">
                                <Fields>
                                    <ext:ModelField Name="name" />
                                    <ext:ModelField Name="value" />
                                </Fields>
                            </ext:Model>
                        </Model>
                    </ext:Store>
                </Store>
                <DirectEvents>
                    <Change OnEvent="valueType_SelectedIndexChanged" />
                </DirectEvents>
            </ext:ComboBox>
        </div>
        </form>
    </body>
    </html>
    Fabrício Murta
    Developer & Support Expert
  3. #3

    convert asp list box to ext.net combo box

    Thanks for the reply. Yes I am enjoying and learning and hope I will get the support from the community.

    I have a question, you put the selection values inside the <script runat=server>. Can't we put the selection values within ext combo box similar to asp list box. Please clarify.
  4. #4
    Hello, this is one way to determine the data from inside, thru a JavaScript array.

    <%@ Page Language="C#" %>
    
    <!DOCTYPE html>
    
    <script runat="server">
        public void valueType_SelectedIndexChanged(object sender, EventArgs e)
        {
            X.Msg.Alert("change", "change handled by server").Show();
        }
    </script>
    <html>
    <head runat="server">
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
            <ext:ResourceManager runat="server" />
            <asp:ListBox ID="valueType" runat="server" Rows="1" AutoPostBack="True"
                OnSelectedIndexChanged="valueType_SelectedIndexChanged">
                <asp:ListItem Value="">--- SELECT ---</asp:ListItem>
                <asp:ListItem Value="F">Flat</asp:ListItem>
                <asp:ListItem Value="P">Percentage</asp:ListItem>
            </asp:ListBox>
            <ext:ComboBox runat="server" EmptyText="--- SELECT ---" DisplayField="name">
                <Store>
                    <ext:Store ID="store1" runat="server">
                        <CustomConfig>
                            <ext:ConfigItem Name="data" Value="[ ['Flat', 'F'], ['Percentage', 'P'] ]" Mode="Raw" />
                        </CustomConfig>
                        <Model>
                            <ext:Model runat="server" IDProperty="value">
                                <Fields>
                                    <ext:ModelField Name="name" />
                                    <ext:ModelField Name="value" />
                                </Fields>
                            </ext:Model>
                        </Model>
                    </ext:Store>
                </Store>
                <DirectEvents>
                    <Change OnEvent="valueType_SelectedIndexChanged" />
                </DirectEvents>
            </ext:ComboBox>
        </div>
        </form>
    </body>
    </html>
    It is feasible while a short amount of entries, and fixed, but it removes the help from intellisense.

    As for a HTML tag-oriented approach, you can transform a HTML select box into a combo box using the last example here: Combobox overview.

    I hope this helps!
    Fabrício Murta
    Developer & Support Expert

Similar Threads

  1. [CLOSED] custom list on combo box
    By odyssey in forum 2.x Legacy Premium Help
    Replies: 7
    Last Post: Feb 17, 2014, 4:35 AM
  2. [CLOSED] Convert Data from Store to object data list
    By Zenalyse in forum 2.x Legacy Premium Help
    Replies: 3
    Last Post: Apr 30, 2013, 6:13 AM
  3. [CLOSED] Convert List<object> to Json
    By pawangyanwali in forum 2.x Legacy Premium Help
    Replies: 1
    Last Post: Dec 16, 2012, 4:08 AM
  4. [CLOSED] Combo box list alignment
    By yobnet in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: May 10, 2010, 6:14 AM
  5. Inconsistent height on div.x-combo-list-inner
    By dlouwers in forum 1.x Legacy Premium Help
    Replies: 5
    Last Post: Jan 14, 2009, 3:17 PM

Tags for this Thread

Posting Permissions