[CLOSED] Drop down list under a ComboBox is not the correct size...

  1. #1

    [CLOSED] Drop down list under a ComboBox is not the correct size...



    I have a ComboBox inside a form group in the west panel of my ViewPort. Users can type ahead and list matching items in the drop down list underneath the ComboBox. However if the form group isn't expanded by default when the page loads, the drop down list is smaller than the width of it's ComboBox (Customer Search 1 in the example code). If the form group is expanded by default everything looks fine (Customer Search 2).

    Can anyone help me with getting the drop down to always be 100% of the width of it's ComboBox?
    Also I would like the enter key to fire the select event for the drop down when you move through the drop down list using the arrow buttons. Right now when I hit the enter button when I am on a selection in the list, it acts as if I selected the blank value. I have a Select listener on the ComboBox, but I must have it set up incorrectly.

    Is there a way to have the enter key select the "selected" value in the drop down list?

    <%@ Page Language="vb"%>
    <%@ 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="Head2" runat="server">    
        <script runat="server">   
            
            Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
                If Not Page.IsPostBack Then
                    'set all of the states in a datastore
                    Store1.DataSource = New Object() { _
                    New Object() {"1", "Company 1", "Company Contact 1"} _
                    , New Object() {"2", "Company 2", "Company Contact 2"} _
                    , New Object() {"3", "Company 3", "Company Contact 3"} _
                    , New Object() {"4", "Company 4", "Company Contact 4"} _
                    , New Object() {"5", "Company 5", "Company Contact 5"} _
                    , New Object() {"6", "Company 6", "Company Contact 6"} _
                    }
                    Store1.DataBind()
    
    
    
                End If
            End Sub                
        </script>
        
        <script type="text/javascript">
           var selectCustomer = function() {
                alert(ComboBoxCustomerSearch.getValue());
                ComboBoxCustomerSearch.setValue('')            
            };
    
    
            var selectCustomerByLastName = function() {
                alert(ComboBoxCustomerSearchByLastName.getValue());
                ComboBoxCustomerSearchByLastName.setValue('')            
            };         
        </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;
        }
        
        .search-item h3 {
            display: block;
            font: inherit;
            font-weight: bold;
            color: #222;
        }
    
    
        .search-item h3 span {
            float: right;
            font-weight: normal;
            margin: 0 0 5px 5px;
            width: 100px;
            display: block;
            clear: none;
        } 
    
    
    </style>
    </head>
    <body>
        <form id="form1" runat="server">
        <ext:ScriptManager ID="ScriptManager1" runat="server" ScriptMode="Debug" InitScriptMode="Inline">
        </ext:ScriptManager>        
                
        <ext:ViewPort ID="ViewPort1" runat="server">
            <Body>
                <ext:BorderLayout ID="BorderLayout1" runat="server">
                    <West Collapsible="true" Split="false">
                        <ext:Panel ID="PanelWest" runat="server" Width="185" title=" ">
                            <Body>                                                       
                                <ext:Panel ID="PanelQuickSearch" runat="server" Border="false" Title="Customer Search 1" AutoHeight="true" FormGroup="true" BodyStyle="padding:3px;" Collapsed="true">
                                    <Body>
                                        <ext:Store ID="Store1" runat="server">
                                            <Reader>
                                                <ext:ArrayReader>
                                                    <Fields>
                                                        <ext:RecordField Name="ID" Type="Int"/> 
                                                        <ext:RecordField Name="CompanyName" Type="String"/> 
                                                        <ext:RecordField Name="FullName" Type="String"/> 
                                                    </Fields>
                                                </ext:ArrayReader>
                                            </Reader>
                                        </ext:Store> 
                                                                                  
                                        <ext:TableLayout ID="TableLayout1" runat="server" Columns="2">
                                            <ext:Cell>
                                                <ext:ComboBox
                                                    ID="ComboBoxCustomerSearch"
                                                    runat="server" 
                                                    StoreID="Store1"
                                                    DisplayField="DisplayName"
                                                    ValueField="ID"
                                                    TypeAhead="false"
                                                    LoadingText="Searching..."                                               
                                                    HideTrigger="true"
                                                    MinChars="3"  
                                                    EmptyText="Company Name"
                                                    ItemSelector="div.search-item" AutoWidth="true">
                                                    <Template ID="Template1" runat="server">
                                                       <tpl for=".">
                                                          <div class="search-item">
                                                             <h3>{CompanyName}</h3>
                                                             {FullName}
                                                          
    
                                                       </tpl>
                                                    </Template> 
                                                    <Listeners>
                                                        <Select Fn="selectCustomer" />
                                                    </Listeners>
                                                </ext:ComboBox>  
                                            </ext:Cell>
                                            <ext:Cell>
                                                <ext:Button runat="server" ID="ButtonCustomerSearch" Text="" Icon="PlayBlue" Width="10">
                                                    <Listeners>
                                                        <Click Fn="selectCustomer" />
                                                    </Listeners>
                                                </ext:Button>
                                            </ext:Cell>                                      
                                        </ext:TableLayout>                                                                        
                                    </Body>
                                </ext:Panel>   
                                <ext:Panel ID="Panel1" runat="server" Border="false" Title="Customer Search 2" AutoHeight="true" FormGroup="true" BodyStyle="padding:3px;" Collapsed="false">
                                    <Body>
                                        <ext:Store ID="Store2" runat="server">
                                            <Reader>
                                                <ext:ArrayReader>
                                                    <Fields>
                                                        <ext:RecordField Name="ID" Type="Int"/> 
                                                        <ext:RecordField Name="CompanyName" Type="String"/> 
                                                        <ext:RecordField Name="FullName" Type="String"/> 
                                                    </Fields>
                                                </ext:ArrayReader>
                                            </Reader>
                                        </ext:Store> 
                                                                                  
                                        <ext:TableLayout ID="TableLayout2" runat="server" Columns="2">
                                            <ext:Cell>
                                                <ext:ComboBox
                                                    ID="ComboBox1"
                                                    runat="server" 
                                                    StoreID="Store1"
                                                    DisplayField="DisplayName"
                                                    ValueField="ID"
                                                    TypeAhead="false"
                                                    LoadingText="Searching..."                                               
                                                    HideTrigger="true"
                                                    MinChars="3"  
                                                    EmptyText="Company Name"
                                                    ItemSelector="div.search-item" AutoWidth="true">
                                                    <Template ID="Template2" runat="server">
                                                       <tpl for=".">
                                                          <div class="search-item">
                                                             <h3>{CompanyName}</h3>
                                                             {FullName}
                                                          
    
                                                       </tpl>
                                                    </Template> 
                                                    <Listeners>
                                                        <Select Fn="selectCustomer" />
                                                    </Listeners>
                                                </ext:ComboBox>  
                                            </ext:Cell>
                                            <ext:Cell>
                                                <ext:Button runat="server" ID="Button1" Text="" Icon="PlayBlue" Width="10">
                                                    <Listeners>
                                                        <Click Fn="selectCustomer" />
                                                    </Listeners>
                                                </ext:Button>
                                            </ext:Cell>                                      
                                        </ext:TableLayout>                                                                        
                                    </Body>
                                </ext:Panel>                                                   
                            </Body>
                        </ext:Panel>
                    </West>
                    <Center>
                        <ext:Panel ID="Panel7" runat="server" AutoScroll="true">
                            <Body>
                                <ext:Label runat="server" ID="PanelTemp" Text="Content Panel"></ext:Label>
                            </Body>
                        </ext:Panel>
                    </Center>
                </ext:BorderLayout>
            </Body>
       </ext:ViewPort>              
    </form>
    </body>
    </html>


    Thanks in advance...
  2. #2

    RE: [CLOSED] Drop down list under a ComboBox is not the correct size...

    Hi,

    1. "Can anyone help me with getting the drop down to always be 100% of the width of it's ComboBox?"
    It is known ExtJS bug. We know two possible work-around only
    <ul>[*]Set fixed ListWidth of ComboBox[*]Call ComboBox1.syncSize() on panel expand[/list]For example, set the following listener PanelQuickSearch panel
    <Expand Handler="#{ComboBoxCustomerSearch}.syncSize();" Single="true" />
    2. "Is there a way to have the enter key select the "selected" value in the drop down list?"
    It is original behavior. Just your code contains two mistakes:
    <ul>[*] Your define incorrect display field for combo. You set "DisplayName" but need "CompanyName"[*]You set empty value immediately after select. Please remove it[/list]
     var selectCustomer = function() {
                alert(ComboBoxCustomerSearch.getValue());
                ComboBoxCustomerSearch.setValue(''); //this line should be removed
            };
  3. #3

    RE: [CLOSED] Drop down list under a ComboBox is not the correct size...



    Setting the ListWidth to a value worked perfectly, I didn't need to do anything else. Updating the incorrect display field also fixed my problem with the enter key.

    Thanks, please mark as [CLOSED]

Similar Threads

  1. How to use drop down list in ASP.Net Web Application
    By ali_raza159 in forum 2.x Help
    Replies: 1
    Last Post: Jun 18, 2012, 11:10 PM
  2. [CLOSED] Format Date in Custom Drop Down List
    By mbb in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Jul 29, 2011, 1:12 PM
  3. Not working: filter search, drop-down list
    By andersgunnare in forum 1.x Help
    Replies: 4
    Last Post: Jun 07, 2011, 6:45 PM
  4. Replies: 0
    Last Post: Dec 22, 2010, 7:33 AM
  5. [CLOSED] [1.0] Custom Drop Down List Example
    By Ben in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Jan 27, 2010, 11:20 AM

Posting Permissions