[CLOSED] V2.1 Combobox ItemTpl

  1. #1

    [CLOSED] V2.1 Combobox ItemTpl

    Hi, when define a combobox with a template, the dropdown list when the result in 2-3 record, show the height of the dropdown list not correctly, here is the sample:

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="AnalisiProcedimenti.WebForm1" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" 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></title>
            <style type="text/css">
                .search-item
                {
                font: normal 11px tahoma, arial, helvetica, sans-serif;
                padding: 3px 10px 3px 10px;
                border: 1px solid #fff;
                border-bottom: 1px solid #eeeeee;
                white-space: normal;
                color: #555;
                height: 40px;
                }
                
                .search-item h3
                {
                float: none;
                font-weight: bolder;
                margin: 0;
                clear: none;
                }
            
                .search-item h3 abbr
                {
                float: none;
                font-weight: normal;
                margin: 0 0 5px 5px;
                width: 60px;
                display: inline-table;
                clear: none;
                }
            
                .search-item h3 state
                {
                float: none;
                font-weight: bolder;
                margin: 0 0 5px 5px;
                width: 150px;
                display: inline-table;
                clear: none;
                }
                                  
                p { width: 300px; }
            
                .ext-ie .x-form-text { position : static !important; }        
                
            </style>
        </head>
        <body>
            <form id="form1" runat="server">
                <ext:ResourceManager ID="ResourceManager1" runat="server" Namespace="">
                </ext:ResourceManager>
                <ext:ComboBox
                    ID="SelectBox1"
                    runat="server" TypeAhead="false" ForceSelection="false"  QueryMode="Local"
                    DisplayField="state"
                    ValueField="abbr"
                    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>
                    <ListConfig LoadingText="Find...">
                        <ItemTpl ID="ItemTpl1" runat="server">
                            <Html>
                                <div class="search-item">
                                    <h3>
                                        <abbr>{abbr}</abbr>
                                        <state>{state}</state>                                   
                                    </h3>
                                </div>
                            </Html>
                        </ItemTpl>
                    </ListConfig>
                </ext:ComboBox>
            </form>
        </body>
    </html>
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    
    namespace AnalisiProcedimenti
    {
        public partial class WebForm1 : System.Web.UI.Page
        {
            protected void Page_Load(object sender, EventArgs e)
            {
                var store = this.SelectBox1.GetStore();
    
                store.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"} 
            };
    
                store.DataBind();
            }
        }
    }
    1) If you type A in the combo field, the dropdown appear correctly (Image 1)
    2) If you type Ar in the combo field, the dropdown appear incorrecty , if move the mouse on a item, the height of the dropdown is increased (Image 2)

    Version 2.1 branch

    In V2.0 work ok.

    Thanks
    Aurelio

    Image 1Click image for larger version. 

Name:	Image1.png 
Views:	79 
Size:	5.1 KB 
ID:	4558 Image2Click image for larger version. 

Name:	Images2.png 
Views:	66 
Size:	7.7 KB 
ID:	4559
    Last edited by Daniil; Aug 01, 2012 at 11:41 AM. Reason: [CLOSED]
  2. #2
    Your css rules affects on MultiSelect
    Here is fixed sample (css rules and template are changed)
    <%@ Page Language="C#" %>
    
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" 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></title>
        <script runat="server">
            
            protected void Page_Load(object sender, EventArgs e)
            {
                var store = this.SelectBox1.GetStore();
    
    
                store.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"} 
            };
    
    
                store.DataBind();
            }        
        </script>
        <style type="text/css">
            .search-item
            {
                font: normal 11px tahoma, arial, helvetica, sans-serif;
                padding: 3px 10px 3px 10px;
                border: 1px solid #fff;
                border-bottom: 1px solid #eeeeee;
                white-space: normal;
                color: #555;
                height: 40px;
            }
            
            .search-item h3
            {
                font-weight: bolder;
                margin: 0;
            }
            
            .search-item h3 abbr
            {
                font-weight: normal;
                margin: 0 0 5px 5px;
                width: 60px;
            }
            
            .search-item h3 state
            {
                font-weight: bolder;
                margin: 0 0 5px 5px;
                width: 150px;
            }
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
        <ext:ResourceManager ID="ResourceManager1" runat="server" Namespace="">
        </ext:ResourceManager>
        <ext:ComboBox ID="SelectBox1" runat="server" TypeAhead="false" ForceSelection="false"
            QueryMode="Local" DisplayField="state" ValueField="abbr" 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>
            <ListConfig LoadingText="Find...">
                <ItemTpl ID="ItemTpl1" runat="server">
                    <Html>
                        <div class="search-item">
                                    <h3>
                                        <p><abbr>{abbr}</abbr></p>
                                        <p><state>{state}</state></p>                                   
                                    </h3>
                                </div>
                    </Html>
                </ItemTpl>
            </ListConfig>
        </ext:ComboBox>
        </form>
    </body>
    </html>
    Vladimir Shcheglov
    Sr. Developer
  3. #3
    Hi...Vladimir

    It's Ok...

    Thanks

    Aurelio

Similar Threads

  1. Replies: 4
    Last Post: Nov 30, 2011, 6:25 AM
  2. Replies: 4
    Last Post: Sep 28, 2011, 9:57 AM
  3. [CLOSED] Combobox: How to remove the duplicate items in the combobox?
    By csssi_coolite in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: May 09, 2011, 10:34 AM
  4. Replies: 1
    Last Post: Apr 17, 2011, 2:21 PM
  5. Replies: 6
    Last Post: Mar 20, 2009, 6:39 PM

Posting Permissions