[CLOSED] ComboBox style help

  1. #1

    [CLOSED] ComboBox style help



    Hi
    I want to format a ComboBox like this.

    Header 1 <-Selectable BGcolor = red
    Value 1-1 <-Selectable <-a tab at the beginning
    Value 1-2 <-Selectable <-a tab at the beginning
    Value 1-3 <-Selectable <-a tab at the beginning
    Header 2 <-Selectable BGcolor = red
    Value 1-1 <-Selectable <-a tab at the beginning
    Value 1-2 <-Selectable <-a tab at the beginning
    Value 1-3 <-Selectable <-a tab at the beginning

    How do I do that?

    The combo is loaded like this
    
     object data = new object[]
    {
        new object[]{"1","Header 1"},
        new object[]{"1-1","Value 1-1"},
        new object[]{"1-2","Value 1-2"},
        new object[]{"1-3","Value 1-3"},
        new object[]{"2","Header 2"},
        new object[]{"2-1","Value 2-1"},
        new object[]{"2-2","Value 2-2"},
        new object[]{"2-3","Value 2-3"},
    
    };
    
    
    StoreCombo1.DataSource = data;
    StoreCombo1.DataBind();
    
    
    
    
    
    <ext:ComboBox ID="cbCombo1" runat="server" 
    Width="200" 
    FireSelect&#111;nload="true"
    StoreID="StoreCombo1" 
    TypeAhead="true"
    Mode="Local" 
    ForceSelection="true" 
    TriggerAction="All" 
    DisplayField="Combo1Name"
    ValueField="Combo1Id" 
    EmptyText="No items" />

    /mikael
  2. #2

    RE: [CLOSED] ComboBox style help

    Hi Mikael,

    You can use Template. Please see the following sample:
    <%@ Page Language="C#" %>
    <%@ Import Namespace="System.Collections.Generic" %>
    
    <%@ 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 id="Head1" runat="server">
        <title></title>
        
        <script runat="server">
            protected void Page_Load(object sender, EventArgs e)
            {
                object data = new object[]
                {
                    new object[]{"1","Header 1"},
                    new object[]{"1-1","Value 1-1"},
                    new object[]{"1-2","Value 1-2"},
                    new object[]{"1-3","Value 1-3"},
                    new object[]{"2","Header 2"},
                    new object[]{"2-1","Value 2-1"},
                    new object[]{"2-2","Value 2-2"},
                    new object[]{"2-3","Value 2-3"},
    
                };
    
                StoreCombo1.DataSource = data;
                StoreCombo1.DataBind();
            }
        </script>
        
        <script type="text/javascript">
            function isHeader(value) {
                var splitValue = value.split("-");
                return !(Ext.isArray(splitValue) &amp;&amp; splitValue.length == 2);
            }
        </script>
        
        <style type="text/css">
            .header-item{
                color:white;
                background-color:red;
            }
            
            .sub-item{
                padding-left: 1.5em;
                font-size:smaller;
            }
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
            <ext:ScriptManager ID="ScriptManager1" runat="server" ScriptMode="Debug" />
           
            <ext:Store ID="StoreCombo1" runat="server">
                <Reader>
                    <ext:ArrayReader ReaderID="value">
                        <Fields>
                            <ext:RecordField Name="value"/>
                            <ext:RecordField Name="text"/>                        
                        </Fields>
                    </ext:ArrayReader>
                </Reader>
            </ext:Store>
           
            
            <ext:ComboBox ID="cbCombo1" runat="server" 
                Width="200" 
                FireSelect&#111;nload="true"
                StoreID="StoreCombo1" 
                TypeAhead="true"
                Mode="Local" 
                ForceSelection="true" 
                TriggerAction="All" 
                DisplayField="text"
                ValueField="value" 
                EmptyText="No items" 
                ItemSelector="div.list-item"
            >
                <Template>
                     <tpl for=".">
                        <div class="list-item {[isHeader(values.value) ? "header-item" : "sub-item"]}">{text}
    
                    </tpl>                
                </Template>        
            </ext:ComboBox>
        </form>
    </body>
    </html>

    Vladimir Shcheglov
    Sr. Developer
  3. #3

    RE: [CLOSED] ComboBox style help

    Excellent!! Works great!!
    Thank you!

    /Mikael

Similar Threads

  1. [CLOSED] FontFamily style in ComboBox
    By softmachine2011 in forum 2.x Legacy Premium Help
    Replies: 4
    Last Post: Jun 01, 2012, 10:19 AM
  2. Replies: 4
    Last Post: Nov 30, 2011, 5:25 AM
  3. Custom style for selected ComboBox item
    By nextSTEP in forum 1.x Help
    Replies: 1
    Last Post: Sep 20, 2010, 12:18 PM
  4. [CLOSED] Div does not take the style.
    By flormariafr in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Jan 31, 2010, 11:29 AM
  5. TriggerComboBox / ComboBox expanded style
    By shaun in forum Feature Requests
    Replies: 1
    Last Post: Jul 25, 2009, 4:27 PM

Posting Permissions