[CLOSED] [#245] ComboBox CSS issue..

  1. #1

    [CLOSED] [#245] ComboBox CSS issue..

    ComboBox css seems to be off a bit on ComboBox in a ButtonGroup...
    See attached...

    Here is my setup:

      <ext:Panel ID="Panel2" runat="server"   Region="North" Padding="0"  >
                     <Items>
                        <ext:Toolbar ID="Toolbar5" runat="server"  Flat="true"  Dock="Top"  >
                            <Items>
                                <ext:Panel ID="Panel1" runat="server"   Border="false" Height="80" BodyStyle="background-color:#012e4a;text-align:center;padding-top:5px">
                                    <Items>
                                        <ext:Image ID="Image1" runat="server" ImageUrl="image/homeHdr_logo.gif" Width="200" Height="80" />
                                    </Items> 
                                </ext:Panel>
                                <ext:ButtonGroup ID="ButtonGroup1" runat="server" Title="Companies"    Padding="5"  Columns="1"  >
                                    <Items> 
                                                <ext:ComboBox runat="server" ID="cmboPortfolio" EmptyText="Select Portfolio" ValueField="PortfolioCompanyId" QueryMode="Local" TriggerIcon="Search"
                                                    DisplayField="CompanyName" Width="200" MinWidth="250" StyleHtmlContent="true" >
                                                    <Store>
                                                        <ext:Store runat="server" ID="storeCompany">
                                                            <Model>
                                                                <ext:Model runat="server">
                                                                    <Fields>
                                                                        <ext:ModelField Name="PortfolioCompanyId" />
                                                                        <ext:ModelField Name="CompanyName" />
                                                                        <ext:ModelField Name="DealCode" />
                                                                        <ext:ModelField Name="FiscalDate" />
                                                                        <ext:ModelField Name="IsPlatform" Type="Boolean" />
                                                                    </Fields>
                                                                </ext:Model>
                                                            </Model>
                                                        </ext:Store>
                                                    </Store> 
                                                    <Listeners>
                                                       <%-- <Select Handler="#{hidPortfolioId}.setValue(this.findRecord(this.valueField, this.getValue()).data.PortfolioCompanyId);
                                                                                    #{btnGroupSections}.enable(true);
                                                                                    #{btnGroupActive}.enable(true);
                                                                                    #{btnGroupAdmin}.enable(true);
                                                                                    #{Panel3}.enable(true);
                                                                                    #{btnRefresh}.enable(true);
                                                                                    #{pnlContent}.getLoader().load({url:'Sections/PercentComplete.aspx', params:{'portfolioId':#{hidPortfolioId}.getValue(),
                                                                                                                                    'documentId':#{hidDocumentId}.getValue(),
                                                                                                                                    'fundId':#{cmboFund}.getValue(),
                                                                                                                                    'fundName':#{cmboFund}.getRawValue(),
                                                                                                                                    'y':#{cmboYear}.getValue(),
                                                                                                                                    'q':#{cmboQuarter}.getValue() }});
                                                                                    #{pnlSettings}.expand();  " />--%>
                                                    </Listeners>
                                                    <DirectEvents>
                                                        <Select OnEvent="LoadCompany" Success=" #{hidPortfolioId}.setValue(this.findRecord(this.valueField, this.getValue()).data.PortfolioCompanyId);
                                                                                    #{btnGroupSections}.enable(true);
                                                                                    #{btnGroupActive}.enable(true);
    
    
                                                                                    #{Panel3}.enable(true);
                                                                                    #{btnRefresh}.enable(true);
                                                                                    #{pnlContent}.getLoader().load({url:'Sections/PercentComplete.aspx', params:{'portfolioId':#{hidPortfolioId}.getValue(),
                                                                                                                                    'documentId':#{hidDocumentId}.getValue(),
                                                                                                                                    'fundId':#{cmboFund}.getValue(),
                                                                                                                                    'fundName':#{cmboFund}.getRawValue(),
                                                                                                                                    'y':#{cmboYear}.getValue(),
                                                                                                                                    'q':#{cmboQuarter}.getValue() }});
                                                                                    #{pnlSettings}.expand();
                                                            if (lastLoadedButton!=undefined) RunLoader(lastLoadedButton,lastLoadedIcon,lastLoadedContent); " Failure="   #{hidPortfolioId}.setValue(this.findRecord(this.valueField, this.getValue()).data.PortfolioCompanyId); #{btnGroupSections}.disable(true);
    
    
                                                                                     #{Panel3}.enable(true);
                                                             #{cmboFund}.clear();
                                                            #{cmboFund}.disable(true);
                                                                        #{cmboYear}.clear();
                                                            #{cmboYear}.disable(true);
                                                                        #{cmboQuarter}.clear();
                                                            #{cmboQuarter}.disable(true);
                                                            #{imgLogo}.hide();
                                                                                    #{btnRefresh}.disable(true);  #{pnlContent}.getLoader().load({url:'Sections/PercentComplete.aspx', params:{'portfolioId':-1,
                                                                                                                                    'documentId':-1,
                                                                                                                                    'fundId':-1,
                                                                                                                                    'fundName':'',
                                                                                                                                    'y':-1,
                                                                                                                                    'q':-1 }});       " />
                                                    </DirectEvents>
                                                </ext:ComboBox>
                                                <ext:FieldContainer runat="server" Layout="HBoxLayout" HideLabel="true" AnchorHorizontal="100%" >
                                                    <Items>
                                                        <ext:LinkButton runat="server" Text="Active:">
                                                            <Listeners>
                                                                <Click Handler=" ActiveDocLoader('Active Document','Admin/ActiveDocument');" />
                                                            </Listeners>
                                                        </ext:LinkButton>
                                                        <ext:ComboBox runat="server" ID="cmboFund" DisplayField="ShortName" ValueField="FundId" Width="65" TriggerIcon="SimpleArrowDown">
                                                            <Store>
                                                                <ext:Store ID="storeFunds" runat="server">
                                                                    <Sorters>
                                                                        <ext:DataSorter Property="start" Direction="ASC" />
                                                                    </Sorters>
                                                                    <Model>
                                                                        <ext:Model ID="Model3" runat="server" Name="Fund">
                                                                            <Fields>
                                                                                <ext:ModelField Name="FundId" Type="Int" />
                                                                                <ext:ModelField Name="ShortName" Type="String" />
                                                                            </Fields>
                                                                        </ext:Model>
                                                                    </Model>
                                                                </ext:Store>
                                                            </Store>
                                                            <Listeners>
                                                                <Select Handler="if (lastLoadedButton!=undefined) RunLoader(lastLoadedButton,lastLoadedIcon,lastLoadedContent); else #{pnlContent}.getLoader().load({url:'Sections/PercentComplete.aspx', params:{'portfolioId':#{hidPortfolioId}.getValue(),
                                                                                                                                    'documentId':#{hidDocumentId}.getValue(),
                                                                                                                                    'fundId':#{cmboFund}.getValue(),
                                                                                                                                    'fundName':#{cmboFund}.getRawValue(),
                                                                                                                                    'y':#{cmboYear}.getValue(),
                                                                                                                                    'q':#{cmboQuarter}.getValue() }});" />
                                                            </Listeners>
                                                        </ext:ComboBox>
                                                        <ext:DisplayField ID="DisplayField1" runat="server" Text="Y" />
                                                        <ext:ComboBox runat="server" ID="cmboYear" Width="55" MinWidth="55" MaxWidth="55"  TriggerIcon="SimpleArrowDown">
                                                            <Items>
                                                            </Items>
                                                            <Listeners>
                                                                    <Select Handler="#{pnlContent}.getLoader().load({url:'Sections/PercentComplete.aspx', params:{'portfolioId':#{hidPortfolioId}.getValue(),
                                                                                                                                    'documentId':#{hidDocumentId}.getValue(),
                                                                                                                                    'fundId':#{cmboFund}.getValue(),
                                                                                                                                    'fundName':#{cmboFund}.getRawValue(),
                                                                                                                                    'y':#{cmboYear}.getValue(),
                                                                                                                                    'q':#{cmboQuarter}.getValue() }}); " />
                                                            </Listeners>
                                                        </ext:ComboBox>
                                                        <ext:DisplayField runat="server" Text="Q" />
                                                        <ext:ComboBox runat="server" ID="cmboQuarter" Width="40"  TriggerIcon="SimpleArrowDown"  TriggerCls="trigClass">
                                                            <Items>
                                                                <ext:ListItem Text="" Value="" />
                                                                <ext:ListItem Text="1" Value="1" />
                                                                <ext:ListItem Text="2" Value="2" />
                                                                <ext:ListItem Text="3" Value="3" />
                                                                <ext:ListItem Text="4" Value="4" />
                                                            </Items>
                                                            <Listeners>
                                                                    <Select Handler="#{pnlContent}.getLoader().load({url:'Sections/PercentComplete.aspx', params:{'portfolioId':#{hidPortfolioId}.getValue(),
                                                                                                                                    'documentId':#{hidDocumentId}.getValue(),
                                                                                                                                    'fundId':#{cmboFund}.getValue(),
                                                                                                                                    'fundName':#{cmboFund}.getRawValue(),
                                                                                                                                    'y':#{cmboYear}.getValue(),
                                                                                                                                    'q':#{cmboQuarter}.getValue() }}); " />
                                                            </Listeners>
                                                        </ext:ComboBox>
                                                        <ext:Button runat="server" ID="btnRefresh" Icon="Reload" Flat="true">
                                                            <Listeners>
                                                                <Click Handler="
                                                       #{btnGroupSections}.enable(true);
                                                        #{btnGroupActive}.enable(true);
                                                         #{btnGroupAdmin}.enable(true);
                                                           #{pnlContent}.getLoader().load({url:'Sections/PercentComplete.aspx', params:{'portfolioId':#{hidPortfolioId}.getValue(),
                                                            'documentId':#{hidDocumentId}.getValue(),
                                                            'fundId':#{cmboFund}.getValue(),
                                                            'fundName':#{cmboFund}.getRawValue(),
                                                            'y':#{cmboYear}.getValue(),
                                                            'q':#{cmboQuarter}.getValue() }});
                                                       #{pnlSettings}.expand();
                                                                    #{pnlParameters}.collapse();
                                                          " />
                                                            </Listeners>
                                                            <DirectEvents>
                                                                <Click OnEvent="LoadCompany" />
                                                            </DirectEvents>
                                                        </ext:Button>
                                                    </Items>
                                                </ext:FieldContainer>
                                            </Items> 
                                </ext:ButtonGroup>
                                <ext:ButtonGroup ID="btnGroupSections" runat="server" Title="Sections"   Padding="5" >
                                    <Items>
                                        <ext:SplitButton ID="SplitButton1"
                                            runat="server"
                                            Text="Fiscal"
                                            IconCls="barIcon"
                                            IconAlign="Top"
                                            ArrowAlign="Bottom"
                                            Scale="Small">
                                            <Menu>
                                                <ext:Menu ID="Menu1" runat="server" Cls="removeIconPad">
                                                    <Items>
                                                        <ext:MenuItem ID="MenuItem5" runat="server" Text="Banner Valuations"  Icon="ChartBar">
                                                            <Listeners>
                                                                <Click Handler="RunLoader(this.text,'barIcon','BannerValuation');" />
                                                            </Listeners>
                                                        </ext:MenuItem>
                                                        <ext:MenuItem ID="MenuItem1" runat="server" Text="Banner Summary"  Icon="ChartBar">
                                                            <Listeners>
                                                                <Click Handler="RunLoader(this.text,'barIcon','BannerSummary');" />
                                                            </Listeners>
                                                        </ext:MenuItem>
                                                        <ext:MenuItem ID="MenuItem6" runat="server" Text="Investment History"  Icon="ChartBar">
                                                            <Listeners>
                                                                <Click Handler="RunLoader(this.text,'barIcon','InvestHistory');" />
                                                            </Listeners>
                                                        </ext:MenuItem>
                                                        <ext:MenuItem ID="MenuItem8" runat="server" Text="Financial Results"  Icon="ChartBar">
                                                            <Listeners>
                                                                <Click Handler="RunLoader(this.text,'barIcon','FinancialResults');" />
                                                            </Listeners>
                                                        </ext:MenuItem>
                                                        <ext:MenuItem ID="MenuItem10" runat="server" Text="Cash Flow (Grills)" Icon="ChartBar">
                                                            <Listeners>
                                                                <Click Handler="RunLoader(this.text,'barIcon','CashFlow');" />
                                                            </Listeners>
                                                        </ext:MenuItem>
                                                          <ext:MenuItem ID="MenuItem17" runat="server" Text="Historical Grills" Icon="ChartBar">
                                                            <Listeners>
                                                                <Click Handler="RunLoader(this.text,'barIcon','HistoricalGrills');" />
                                                            </Listeners>
                                                        </ext:MenuItem>
                                                        <ext:MenuSeparator runat="server" />
                                                        <ext:MenuItem ID="MenuItem16" runat="server" Text="Download Add-In" Icon="TextAb">
                                                            <Listeners>
                                                                <Click Handler="window.location.href='/Publish/WarburgPincus.Valuations.AddIn.vsto'; " />
                                                            </Listeners>
                                                        </ext:MenuItem>
                                                    </Items>
                                                </ext:Menu>
                                            </Menu>
                                        </ext:SplitButton>
                                    </Items>
                                </ext:ButtonGroup>
                                <ext:ButtonGroup ID="btnGroupActive"  runat="server" Title="Active Document"  Padding="5" Columns="1"  >
                                            <Items> 
                                      
    
    
                                                    
                                                <ext:ComboBox runat="server" ID="cmboStatus" TriggerIcon="SimpleEdit"  ValueField="DocumentStatusId" DisplayField="StatusName" FieldLabel="Current Phase" LabelAlign="Right" >
                                                    <Store>
                                                        <ext:Store ID="storeStatus" runat="server">
                                                            <Model>
                                                                <ext:Model ID="Model4" runat="server" Name="Fund">
                                                                    <Fields>
                                                                        <ext:ModelField Name="DocumentStatusId" Type="Int" />
                                                                        <ext:ModelField Name="StatusName" Type="String" />
                                                                    </Fields>
                                                                </ext:Model>
                                                            </Model>
                                                        </ext:Store>
                                                    </Store>
                                                    <Items>
                                                    </Items>
                                                </ext:ComboBox> 
                                                <ext:TextField ID="lblCheckoutBy"  runat="server"  EmptyText="Not Checked out" FieldLabel="Check out to"  LabelAlign="Right" /> 
                                           
                                    </Items>
                                </ext:ButtonGroup>
                                <ext:ButtonGroup ID="btnGroupAdmin"  runat="server" Title="Administration"  Columns="4"  Padding="5">
                                    <Items>
                                        <ext:SplitButton ID="SplitButton3"
                                            runat="server"
                                            Text="Permission"
                                            IconCls="keyIcon"
                                            IconAlign="Top"
                                            ArrowAlign="Bottom"
                                            Scale="Small">
                                            <Menu>
                                                <ext:Menu ID="Menu3" runat="server" Cls="removeIconPad">
                                                    <Items>
                                                        <ext:MenuItem ID="MenuItem7" runat="server" Text="Content Permissions" Icon="ShapeMoveBack">
                                                            <Listeners>
                                                                <Click Handler="if (#{hidPortfolioId}.getValue()!='-1') {#{pnlContent}.setTitle('Permissions');#{pnlContent}.setIconCls('keyIcon'); #{pnlContent}.getLoader().load({url:'Admin/Permissions.aspx', params:{'id':#{hidPortfolioId}.getValue() }}); } else NotifyContextDown('Must Select Company','You need to first select a deal before editing the content control permissions',#{cmboPortfolio}); " />
                                                            </Listeners>
                                                        </ext:MenuItem>
                                                    </Items>
                                                </ext:Menu>
                                            </Menu>
                                        </ext:SplitButton>
                                        <ext:SplitButton ID="SplitButton2"
                                            runat="server"
                                            Text="Entities"
                                            IconCls="blockIcon"
                                            IconAlign="Top"
                                            ArrowAlign="Bottom"
                                            Scale="Small">
                                            <Menu>
                                                <ext:Menu ID="Menu2" runat="server" Cls="removeIconPad">
                                                    <Items>
                                                        <ext:MenuItem ID="MenuItem2" runat="server" Text="Funds" Icon="MoneyDollar">
                                                            <Listeners>
                                                                <Click Handler="#{pnlContent}.setTitle('Funds');#{pnlContent}.setIconCls('blockIcon'); #{pnlContent}.getLoader().load({url:'Admin/Funds.aspx', params:{'id':#{hidPortfolioId}.getValue() }}); " />
                                                            </Listeners>
                                                        </ext:MenuItem>
                                                            <ext:MenuItem ID="MenuItem13" runat="server" Text="Platforms" Icon="Images">
                                                            <Listeners>
                                                                <Click Handler="#{pnlContent}.setTitle('Platforms');#{pnlContent}.setIconCls('blockIcon'); #{pnlContent}.getLoader().load({url:'Admin/PlatformEditor.aspx', params:{'id':#{hidPortfolioId}.getValue() }}); " />
                                                            </Listeners>
                                                        </ext:MenuItem>
                                                           <ext:MenuItem ID="MenuItem14" runat="server" Text="Deals" Icon="Building">
                                                            <Listeners>
                                                                <Click Handler="#{pnlContent}.setTitle('Companies');#{pnlContent}.setIconCls('blockIcon'); #{pnlContent}.getLoader().load({url:'Admin/CompanyAdd.aspx', params:{'id':#{hidPortfolioId}.getValue() }}); " />
                                                            </Listeners>
                                                        </ext:MenuItem>
                                                    </Items>
                                                </ext:Menu>
                                            </Menu>
                                        </ext:SplitButton>
                                        <ext:SplitButton ID="SplitButton4"
                                            runat="server"
                                            Text="Templates"
                                            IconCls="wordIcon"
                                            IconAlign="Top"
                                            ArrowAlign="Bottom"
                                            Scale="Small">
                                            <Menu>
                                                <ext:Menu ID="Menu4" runat="server" Cls="removeIconPad">
                                                    <Items>
                                                        <ext:MenuItem ID="MenuItem3" runat="server" Text="Create New" Icon="PageWhiteWord">
                                                            <Listeners>
                                                                <Click Handler="#{pnlParameters}.collapse();#{pnlContent}.setTitle('Create Template');#{pnlContent}.setIconCls('wordIcon'); #{pnlContent}.getLoader().load({url:'Admin/CreateTemplates.aspx', params:{'id':#{hidPortfolioId}.getValue() }}); " />
                                                            </Listeners>
                                                        </ext:MenuItem>
                                                        <ext:MenuItem ID="MenuItem11" runat="server" Text="Manage Template" Icon="PageWhiteEdit">
                                                            <Listeners>
                                                                <Click Handler="#{pnlParameters}.collapse();#{pnlContent}.setTitle('Manage Template(s)');#{pnlContent}.setIconCls('wordIcon'); #{pnlContent}.getLoader().load({url:'Admin/TemplateManager.aspx', params:{'portfolioId':#{hidPortfolioId}.getValue(),'documentId':#{hidDocumentId}.getValue() }}); " />
                                                            </Listeners>
                                                        </ext:MenuItem>
                                                        <ext:MenuItem ID="MenuItem4" runat="server" Text="Cancel Checkout" Icon="PageRed">
                                                            <Listeners>
                                                                <Click Handler="#{pnlParameters}.collapse();#{pnlContent}.setTitle('Cancel Checkout');#{pnlContent}.setIconCls('pageRedIcon'); #{pnlContent}.getLoader().load({url:'Admin/CancelCheckout.aspx', params:{'id':#{hidPortfolioId}.getValue() }}); " />
                                                            </Listeners>
                                                        </ext:MenuItem>
                                                        <ext:MenuItem ID="MenuItem9" runat="server" Text="Roll Forward" Icon="ForwardBlue">
                                                            <Listeners>
                                                                <Click Handler=" #{pnlParameters}.collapse();#{pnlContent}.setTitle('Roll Forward');#{pnlContent}.setIconCls('forwardBlueIcon'); #{pnlContent}.getLoader().load({url:'Admin/RollForward.aspx', params:{'id':#{hidPortfolioId}.getValue() }}); " />
                                                            </Listeners>
                                                        </ext:MenuItem>
                                                        <ext:MenuItem ID="MenuItem12" runat="server" Text="Multi - Template" Icon="Share">
                                                            <Listeners>
                                                                <Click Handler=" #{pnlParameters}.collapse();#{pnlContent}.setTitle('Free Form Template');#{pnlContent}.setIconCls('forwardBlueIcon'); #{pnlContent}.getLoader().load({url:'Admin/FreeFormTemplate.aspx', params:{'id':#{hidPortfolioId}.getValue() }}); " />
                                                            </Listeners>
                                                            <ToolTips>
                                                                <ext:ToolTip runat="server" Title="Mulit - Template" Html="Here you can generate a template that has contact that spans multiple deals." />
                                                            </ToolTips>
                                                        </ext:MenuItem>
                                                    </Items>
                                                </ext:Menu>
                                            </Menu>
                                        </ext:SplitButton>
                                         <ext:SplitButton ID="SplitButton5"
                                            runat="server"
                                            Text="Quarter Status"
                                            IconCls="quarterIcon"
                                            IconAlign="Top"
                                            ArrowAlign="Bottom"
                                            Scale="Small">
                                            <Menu>
                                                <ext:Menu ID="Menu5" runat="server" Cls="removeIconPad">
                                                    <Items>
                                                        <ext:MenuItem ID="MenuItem15" runat="server" Text="Quarter Status" Icon="Clock">
                                                            <Listeners>
                                                                <Click fn="ShowQuarterStatus" />
                                                            </Listeners>
                                                        </ext:MenuItem>
                                                    </Items>
                                                </ext:Menu>
                                            </Menu>
                                        </ext:SplitButton>
                                    </Items>
                                </ext:ButtonGroup> 
                                <ext:ButtonGroup runat="server" ID="btnGroupUser" Title="Current User" Padding="5" Columns="1">
                                    <Items>
                                        <ext:Label runat="server" ID="lblUser" StyleSpec="font-size:12px;font-weight:bold;color:#012e4b" />
                                        <ext:Label runat="server" ID="lblTime" StyleSpec="font-size:12px;font-weight:bold;color:#012e4b" />
                                        <ext:SelectBox runat="server" ID="cmboTheme" HideBaseTrigger="true">
                                            <Items>
                                                <ext:ListItem Text="Blue" Value="Default" />
                                                <ext:ListItem Text="Gray" Value="Gray" />
                                                <ext:ListItem Text="Windows" Value="Neptune" />
                                            </Items>
                                            <DirectEvents>
                                                <Select OnEvent="ChangeTheme">
                                                    <ExtraParams>
                                                        <ext:Parameter Name="theme" Value="#{cmboTheme}.getValue()" Mode="Raw" />
                                                    </ExtraParams>
                                                </Select>
                                            </DirectEvents>
                                        </ext:SelectBox> 
                                    </Items>
                                </ext:ButtonGroup> 
                            </Items>
                        </ext:Toolbar>
                     </Items>
                </ext:Panel>
    Attached Thumbnails Click image for larger version. 

Name:	Capture.PNG 
Views:	20 
Size:	11.6 KB 
ID:	6244  
    Last edited by Baidaly; May 31, 2013 at 3:10 AM. Reason: [CLOSED]
  2. #2
    Hi rthiney,

    Any chance you could simplify your sample down to the minimum required to reproduce the problem? and, create as a self contained .aspx which we can copy/paste into our test project without having to modify to get runnable.
    Geoffrey McGill
    Founder
  3. #3
    Quote Originally Posted by geoffrey.mcgill View Post
    Hi rthiney,

    Any chance you could simplify your sample down to the minimum required to reproduce the problem? and, create as a self contained .aspx which we can copy/paste into our test project without having to modify to get runnable.
    
    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Error.aspx.cs" Inherits="WarburgPincus.Valuations.Site.Error" %>
    
    
    <!DOCTYPE html>
    
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
    </head>
    <body>
         <ext:ResourceManager runat="server" ID="Resource1">
        </ext:ResourceManager>
    
    
        <form id="form1" runat="server">
      
               <ext:Viewport ID="Viewport1" runat="server" Layout="BorderLayout">
            <Items>
        <ext:Panel ID="Panel2" runat="server"   Region="North" Padding="0"  >
                     <Items>
                        <ext:Toolbar ID="Toolbar5" runat="server"  Flat="true"  Dock="Top"  >
                            <Items>
                                <ext:Panel ID="Panel1" runat="server"   Border="false" Height="80" BodyStyle="background-color:#012e4a;text-align:center;padding-top:5px">
                                    <Items>
                                        <ext:Image ID="Image1" runat="server" ImageUrl="image/homeHdr_logo.gif" Width="200" Height="80" />
                                    </Items> 
                                </ext:Panel>
                                <ext:ButtonGroup ID="ButtonGroup1" runat="server" Title="Companies"    Padding="5"  Columns="1"  >
                                    <Items> 
                                                <ext:ComboBox runat="server" ID="cmboPortfolio" EmptyText="Select Portfolio" ValueField="PortfolioCompanyId" QueryMode="Local" TriggerIcon="Search"
                                                    DisplayField="CompanyName" Width="200" MinWidth="250" StyleHtmlContent="true" >
                                                   
                                                         
                                                </ext:ComboBox>
                                                <ext:FieldContainer ID="FieldContainer1" runat="server" Layout="HBoxLayout" HideLabel="true" AnchorHorizontal="100%" >
                                                    <Items>
                                                        <ext:LinkButton ID="LinkButton1" runat="server" Text="Active:">
                                                            <Listeners>
                                                                <Click Handler=" ActiveDocLoader('Active Document','Admin/ActiveDocument');" />
                                                            </Listeners>
                                                        </ext:LinkButton>
                                                        <ext:ComboBox runat="server" ID="cmboFund" DisplayField="ShortName" ValueField="FundId" Width="65" TriggerIcon="SimpleArrowDown">
                                                            <Store>
                                                                <ext:Store ID="storeFunds" runat="server">
                                                                    <Sorters>
                                                                        <ext:DataSorter Property="start" Direction="ASC" />
                                                                    </Sorters>
                                                                    <Model>
                                                                        <ext:Model ID="Model3" runat="server" Name="Fund">
                                                                            <Fields>
                                                                                <ext:ModelField Name="FundId" Type="Int" />
                                                                                <ext:ModelField Name="ShortName" Type="String" />
                                                                            </Fields>
                                                                        </ext:Model>
                                                                    </Model>
                                                                </ext:Store>
                                                            </Store>
                                                            <Listeners>
                                                                <Select Handler="if (lastLoadedButton!=undefined) RunLoader(lastLoadedButton,lastLoadedIcon,lastLoadedContent); else #{pnlContent}.getLoader().load({url:'Sections/PercentComplete.aspx', params:{'portfolioId':#{hidPortfolioId}.getValue(),
                                                                                                                                    'documentId':#{hidDocumentId}.getValue(),
                                                                                                                                    'fundId':#{cmboFund}.getValue(),
                                                                                                                                    'fundName':#{cmboFund}.getRawValue(),
                                                                                                                                    'y':#{cmboYear}.getValue(),
                                                                                                                                    'q':#{cmboQuarter}.getValue() }});" />
                                                            </Listeners>
                                                        </ext:ComboBox>
                                                        <ext:DisplayField ID="DisplayField1" runat="server" Text="Y" />
                                                        <ext:ComboBox runat="server" ID="cmboYear" Width="55" MinWidth="55" MaxWidth="55"  TriggerIcon="SimpleArrowDown">
                                                            <Items>
                                                            </Items>
                                                            <Listeners>
                                                                    <Select Handler="#{pnlContent}.getLoader().load({url:'Sections/PercentComplete.aspx', params:{'portfolioId':#{hidPortfolioId}.getValue(),
                                                                                                                                    'documentId':#{hidDocumentId}.getValue(),
                                                                                                                                    'fundId':#{cmboFund}.getValue(),
                                                                                                                                    'fundName':#{cmboFund}.getRawValue(),
                                                                                                                                    'y':#{cmboYear}.getValue(),
                                                                                                                                    'q':#{cmboQuarter}.getValue() }}); " />
                                                            </Listeners>
                                                        </ext:ComboBox>
                                                        <ext:DisplayField ID="DisplayField2" runat="server" Text="Q" />
                                                        <ext:ComboBox runat="server" ID="cmboQuarter" Width="40"  TriggerIcon="SimpleArrowDown"  TriggerCls="trigClass">
                                                            <Items>
                                                                <ext:ListItem Text="" Value="" />
                                                                <ext:ListItem Text="1" Value="1" />
                                                                <ext:ListItem Text="2" Value="2" />
                                                                <ext:ListItem Text="3" Value="3" />
                                                                <ext:ListItem Text="4" Value="4" />
                                                            </Items>
                                                            <Listeners>
                                                                    <Select Handler="#{pnlContent}.getLoader().load({url:'Sections/PercentComplete.aspx', params:{'portfolioId':#{hidPortfolioId}.getValue(),
                                                                                                                                    'documentId':#{hidDocumentId}.getValue(),
                                                                                                                                    'fundId':#{cmboFund}.getValue(),
                                                                                                                                    'fundName':#{cmboFund}.getRawValue(),
                                                                                                                                    'y':#{cmboYear}.getValue(),
                                                                                                                                    'q':#{cmboQuarter}.getValue() }}); " />
                                                            </Listeners>
                                                        </ext:ComboBox>
                                                        <ext:Button runat="server" ID="btnRefresh" Icon="Reload" Flat="true">
                                                             
                                                        </ext:Button>
                                                    </Items>
                                                </ext:FieldContainer>
                                            </Items> 
                                </ext:ButtonGroup>
                                <ext:ButtonGroup ID="btnGroupSections" runat="server" Title="Sections"   Padding="5" >
                                    <Items>
                                        <ext:SplitButton ID="SplitButton1"
                                            runat="server"
                                            Text="Fiscal"
                                            IconCls="barIcon"
                                            IconAlign="Top"
                                            ArrowAlign="Bottom"
                                            Scale="Small">
                                            <Menu>
                                                <ext:Menu ID="Menu1" runat="server" Cls="removeIconPad">
                                                    <Items>
                                                        <ext:MenuItem ID="MenuItem5" runat="server" Text="Banner Valuations"  Icon="ChartBar">
                                                            <Listeners>
                                                                <Click Handler="RunLoader(this.text,'barIcon','BannerValuation');" />
                                                            </Listeners>
                                                        </ext:MenuItem>
                                                        <ext:MenuItem ID="MenuItem1" runat="server" Text="Banner Summary"  Icon="ChartBar">
                                                            <Listeners>
                                                                <Click Handler="RunLoader(this.text,'barIcon','BannerSummary');" />
                                                            </Listeners>
                                                        </ext:MenuItem>
                                                        <ext:MenuItem ID="MenuItem6" runat="server" Text="Investment History"  Icon="ChartBar">
                                                            <Listeners>
                                                                <Click Handler="RunLoader(this.text,'barIcon','InvestHistory');" />
                                                            </Listeners>
                                                        </ext:MenuItem>
                                                        <ext:MenuItem ID="MenuItem8" runat="server" Text="Financial Results"  Icon="ChartBar">
                                                            <Listeners>
                                                                <Click Handler="RunLoader(this.text,'barIcon','FinancialResults');" />
                                                            </Listeners>
                                                        </ext:MenuItem>
                                                        <ext:MenuItem ID="MenuItem10" runat="server" Text="Cash Flow (Grills)" Icon="ChartBar">
                                                            <Listeners>
                                                                <Click Handler="RunLoader(this.text,'barIcon','CashFlow');" />
                                                            </Listeners>
                                                        </ext:MenuItem>
                                                          <ext:MenuItem ID="MenuItem17" runat="server" Text="Historical Grills" Icon="ChartBar">
                                                            <Listeners>
                                                                <Click Handler="RunLoader(this.text,'barIcon','HistoricalGrills');" />
                                                            </Listeners>
                                                        </ext:MenuItem>
                                                        <ext:MenuSeparator ID="MenuSeparator1" runat="server" />
                                                        <ext:MenuItem ID="MenuItem16" runat="server" Text="Download Add-In" Icon="TextAb">
                                                            <Listeners>
                                                                <Click Handler="window.location.href='/Publish/WarburgPincus.Valuations.AddIn.vsto'; " />
                                                            </Listeners>
                                                        </ext:MenuItem>
                                                    </Items>
                                                </ext:Menu>
                                            </Menu>
                                        </ext:SplitButton>
                                    </Items>
                                </ext:ButtonGroup>
                                <ext:ButtonGroup ID="btnGroupActive"  runat="server" Title="Active Document"  Padding="5" Columns="1"  >
                                            <Items> 
                                      
    
    
                                                    
                                                <ext:ComboBox runat="server" ID="cmboStatus" TriggerIcon="SimpleEdit"  ValueField="DocumentStatusId" DisplayField="StatusName" FieldLabel="Current Phase" LabelAlign="Right" >
                                                
                                                    <Items>
                                                    </Items>
                                                </ext:ComboBox> 
                                                <ext:TextField ID="lblCheckoutBy"  runat="server"  EmptyText="Not Checked out" FieldLabel="Check out to"  LabelAlign="Right" /> 
                                           
                                    </Items>
                                </ext:ButtonGroup>
                                <ext:ButtonGroup ID="btnGroupAdmin"  runat="server" Title="Administration"  Columns="4"  Padding="5">
                                    <Items>
                                        <ext:SplitButton ID="SplitButton3"
                                            runat="server"
                                            Text="Permission"
                                            IconCls="keyIcon"
                                            IconAlign="Top"
                                            ArrowAlign="Bottom"
                                            Scale="Small">
                                            <Menu>
                                                <ext:Menu ID="Menu3" runat="server" Cls="removeIconPad">
                                                    <Items>
                                                        <ext:MenuItem ID="MenuItem7" runat="server" Text="Content Permissions" Icon="ShapeMoveBack">
                                                            <Listeners>
                                                                <Click Handler="if (#{hidPortfolioId}.getValue()!='-1') {#{pnlContent}.setTitle('Permissions');#{pnlContent}.setIconCls('keyIcon'); #{pnlContent}.getLoader().load({url:'Admin/Permissions.aspx', params:{'id':#{hidPortfolioId}.getValue() }}); } else NotifyContextDown('Must Select Company','You need to first select a deal before editing the content control permissions',#{cmboPortfolio}); " />
                                                            </Listeners>
                                                        </ext:MenuItem>
                                                    </Items>
                                                </ext:Menu>
                                            </Menu>
                                        </ext:SplitButton>
                                        <ext:SplitButton ID="SplitButton2"
                                            runat="server"
                                            Text="Entities"
                                            IconCls="blockIcon"
                                            IconAlign="Top"
                                            ArrowAlign="Bottom"
                                            Scale="Small">
                                            <Menu>
                                                <ext:Menu ID="Menu2" runat="server" Cls="removeIconPad">
                                                    <Items>
                                                        <ext:MenuItem ID="MenuItem2" runat="server" Text="Funds" Icon="MoneyDollar">
                                                            <Listeners>
                                                                <Click Handler="#{pnlContent}.setTitle('Funds');#{pnlContent}.setIconCls('blockIcon'); #{pnlContent}.getLoader().load({url:'Admin/Funds.aspx', params:{'id':#{hidPortfolioId}.getValue() }}); " />
                                                            </Listeners>
                                                        </ext:MenuItem>
                                                            <ext:MenuItem ID="MenuItem13" runat="server" Text="Platforms" Icon="Images">
                                                            <Listeners>
                                                                <Click Handler="#{pnlContent}.setTitle('Platforms');#{pnlContent}.setIconCls('blockIcon'); #{pnlContent}.getLoader().load({url:'Admin/PlatformEditor.aspx', params:{'id':#{hidPortfolioId}.getValue() }}); " />
                                                            </Listeners>
                                                        </ext:MenuItem>
                                                           <ext:MenuItem ID="MenuItem14" runat="server" Text="Deals" Icon="Building">
                                                            <Listeners>
                                                                <Click Handler="#{pnlContent}.setTitle('Companies');#{pnlContent}.setIconCls('blockIcon'); #{pnlContent}.getLoader().load({url:'Admin/CompanyAdd.aspx', params:{'id':#{hidPortfolioId}.getValue() }}); " />
                                                            </Listeners>
                                                        </ext:MenuItem>
                                                    </Items>
                                                </ext:Menu>
                                            </Menu>
                                        </ext:SplitButton>
                                        <ext:SplitButton ID="SplitButton4"
                                            runat="server"
                                            Text="Templates"
                                            IconCls="wordIcon"
                                            IconAlign="Top"
                                            ArrowAlign="Bottom"
                                            Scale="Small">
                                            <Menu>
                                                <ext:Menu ID="Menu4" runat="server" Cls="removeIconPad">
                                                    <Items>
                                                        <ext:MenuItem ID="MenuItem3" runat="server" Text="Create New" Icon="PageWhiteWord">
                                                            <Listeners>
                                                                <Click Handler="#{pnlParameters}.collapse();#{pnlContent}.setTitle('Create Template');#{pnlContent}.setIconCls('wordIcon'); #{pnlContent}.getLoader().load({url:'Admin/CreateTemplates.aspx', params:{'id':#{hidPortfolioId}.getValue() }}); " />
                                                            </Listeners>
                                                        </ext:MenuItem>
                                                        <ext:MenuItem ID="MenuItem11" runat="server" Text="Manage Template" Icon="PageWhiteEdit">
                                                            <Listeners>
                                                                <Click Handler="#{pnlParameters}.collapse();#{pnlContent}.setTitle('Manage Template(s)');#{pnlContent}.setIconCls('wordIcon'); #{pnlContent}.getLoader().load({url:'Admin/TemplateManager.aspx', params:{'portfolioId':#{hidPortfolioId}.getValue(),'documentId':#{hidDocumentId}.getValue() }}); " />
                                                            </Listeners>
                                                        </ext:MenuItem>
                                                        <ext:MenuItem ID="MenuItem4" runat="server" Text="Cancel Checkout" Icon="PageRed">
                                                            <Listeners>
                                                                <Click Handler="#{pnlParameters}.collapse();#{pnlContent}.setTitle('Cancel Checkout');#{pnlContent}.setIconCls('pageRedIcon'); #{pnlContent}.getLoader().load({url:'Admin/CancelCheckout.aspx', params:{'id':#{hidPortfolioId}.getValue() }}); " />
                                                            </Listeners>
                                                        </ext:MenuItem>
                                                        <ext:MenuItem ID="MenuItem9" runat="server" Text="Roll Forward" Icon="ForwardBlue">
                                                            <Listeners>
                                                                <Click Handler=" #{pnlParameters}.collapse();#{pnlContent}.setTitle('Roll Forward');#{pnlContent}.setIconCls('forwardBlueIcon'); #{pnlContent}.getLoader().load({url:'Admin/RollForward.aspx', params:{'id':#{hidPortfolioId}.getValue() }}); " />
                                                            </Listeners>
                                                        </ext:MenuItem>
                                                        <ext:MenuItem ID="MenuItem12" runat="server" Text="Multi - Template" Icon="Share">
                                                            <Listeners>
                                                                <Click Handler=" #{pnlParameters}.collapse();#{pnlContent}.setTitle('Free Form Template');#{pnlContent}.setIconCls('forwardBlueIcon'); #{pnlContent}.getLoader().load({url:'Admin/FreeFormTemplate.aspx', params:{'id':#{hidPortfolioId}.getValue() }}); " />
                                                            </Listeners>
                                                            <ToolTips>
                                                                <ext:ToolTip ID="ToolTip1" runat="server" Title="Mulit - Template" Html="Here you can generate a template that has contact that spans multiple deals." />
                                                            </ToolTips>
                                                        </ext:MenuItem>
                                                    </Items>
                                                </ext:Menu>
                                            </Menu>
                                        </ext:SplitButton>
                                         <ext:SplitButton ID="SplitButton5"
                                            runat="server"
                                            Text="Quarter Status"
                                            IconCls="quarterIcon"
                                            IconAlign="Top"
                                            ArrowAlign="Bottom"
                                            Scale="Small">
                                            <Menu>
                                                <ext:Menu ID="Menu5" runat="server" Cls="removeIconPad">
                                                    <Items>
                                                        <ext:MenuItem ID="MenuItem15" runat="server" Text="Quarter Status" Icon="Clock">
                                                         
                                                        </ext:MenuItem>
                                                    </Items>
                                                </ext:Menu>
                                            </Menu>
                                        </ext:SplitButton>
                                    </Items>
                                </ext:ButtonGroup> 
                                <ext:ButtonGroup runat="server" ID="btnGroupUser" Title="Current User" Padding="5" Columns="1">
                                    <Items>
                                        <ext:Label runat="server" ID="lblUser" StyleSpec="font-size:12px;font-weight:bold;color:#012e4b" />
                                        <ext:Label runat="server" ID="lblTime" StyleSpec="font-size:12px;font-weight:bold;color:#012e4b" />
                                        <ext:SelectBox runat="server" ID="cmboTheme" HideBaseTrigger="true">
                                            <Items>
                                                <ext:ListItem Text="Blue" Value="Default" />
                                                <ext:ListItem Text="Gray" Value="Gray" />
                                                <ext:ListItem Text="Windows" Value="Neptune" />
                                            </Items>
                                             
                                        </ext:SelectBox> 
                                    </Items>
                                </ext:ButtonGroup> 
                            </Items>
                        </ext:Toolbar>
                     </Items>
                </ext:Panel>
         </Items>
                   </ext:Viewport>
        </form>
    </body>
    </html>
  4. #4
    Please always remove a code is unrelated with the issue (it was enough one toolbar, one button group and one combobox to demonstrate the issue)

    It is ExtJS bug, we will report it to Sencha
    At this moment, please use the following css rules in the page
    <style type="text/css">
            .x-toolbar-item.x-btn-group .x-form-trigger
            {
                height: 21px;
            }
    
    
            .x-border-box .x-toolbar-item.x-btn-group .x-form-trigger
            {
                height: 22px;
            }
        </style>
  5. #5
    Quote Originally Posted by Vladimir View Post
    Please always remove a code is unrelated with the issue (it was enough one toolbar, one button group and one combobox to demonstrate the issue)

    It is ExtJS bug, we will report it to Sencha
    At this moment, please use the following css rules in the page
    <style type="text/css">
            .x-toolbar-item.x-btn-group .x-form-trigger
            {
                height: 21px;
            }
    
    
            .x-border-box .x-toolbar-item.x-btn-group .x-form-trigger
            {
                height: 22px;
            }
        </style>
    Thanks Vlad, works great!
  6. #6
    Quote Originally Posted by rthiney View Post
    Thanks Vlad, works great!
    With future posts, please ensure you strip out all code that is not related to the problem. We rarely ever see a problem that cannot be demonstrated in <100 lines of code. Generally only 50 is required, and that includes proper formatting.
    Geoffrey McGill
    Founder
  7. #7
    The issue appears to be reproducible with ExtJS 4.2.0, but not with 4.2.1 beta. I used the test case below.

    So, probably, they already fixed it.

    Created an Issue to check it out after incorporating the ExtJS 4.2.1 GA release.
    https://github.com/extnet/Ext.NET/issues/245

    Test Case
    <!DOCTYPE html>
    <html>
    <head>
        <title>ButtonGroup with ComboBox CSS issue</title>
    
        <link rel="stylesheet" href="../resources/css/ext-all.css" />
        
        <script src="../ext-all-debug.js"></script>
    
        <script>
            Ext.onReady(function () {
                Ext.create("Ext.toolbar.Toolbar", {
                    renderTo: Ext.getBody(),
                    items: [{
                        xtype: "buttongroup",
                        title: "ButtonGroup",
                        items: [{
                            "xtype": "combobox"
                        }]
                    }]
                });
    
                Ext.create("Ext.toolbar.Toolbar", {
                    renderTo: Ext.getBody(),
                    items: [{
                        xtype: "panel",
                        title: "Panel with TableLayout",
                        layout: "table",
                        items: [{
                            "xtype": "combobox"
                        }]
                    }]
                });
            });
        </script>
    </head>
    <body>
    
    </body>
    </html>
  8. #8
    Hello!

    The issue appears to be fixed in the SVN trunk. Please update.

Similar Threads

  1. ComboBox Issue CSS
    By perrillos in forum 2.x Help
    Replies: 0
    Last Post: Oct 21, 2012, 12:41 AM
  2. Combobox issue
    By rstpo in forum 2.x Help
    Replies: 1
    Last Post: Aug 30, 2012, 4:09 PM
  3. [CLOSED] Combobox issue
    By ducnt in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Oct 06, 2010, 2:17 PM
  4. Combobox display issue
    By DasPhansom in forum 1.x Help
    Replies: 4
    Last Post: Aug 19, 2009, 11:00 AM
  5. CardLayout and combobox issue
    By fabiomarcos in forum 1.x Help
    Replies: 1
    Last Post: Mar 09, 2009, 8:17 AM

Posting Permissions