Jan 31, 2011, 3:51 PM
[CLOSED] combobox not displayed correctly
Hello,
I created a custom user control that wraps a combobox like this:
Now I am using this control in 2 different places: one is a simple form on the page and the second one is a popup window in the same page. The problem is that when used in the popup window, the item list that opens underneath the combobox does not have the correct width. I checked using firebug and the width for the one on the page is 198 (200-2 for the border) and the width of the one in the popup is 96 which does not make sense.
This is the code inside the popup:
any help is appreciated
I created a custom user control that wraps a combobox like this:
<ext:FormLayout runat="server" ID="formHeading" StyleSpec="padding:0; margin:0;">
<ext:Anchor>
<ext:ComboBox ID="cbHeading" runat="server" StoreID="HeadingStore" DisplayField="Name" ValueField="Code"
TypeAhead="false" LoadingText="Searching..." Width="200" PageSize="15" HideTrigger="true"
ItemSelector="div.search-item" MinChars="1" ForceSelection="false" FieldLabel="#Heading#">
<Template runat="server">
<tpl for=".">
<div class="search-item">
<span class="name">{NameString}</span> <span class="locale">{LocaleString}</span>
</div>
</tpl>
</Template>
</ext:ComboBox>
</ext:Anchor>
</ext:FormLayout>
This control will emulate some sort of autocomplete feature.Now I am using this control in 2 different places: one is a simple form on the page and the second one is a popup window in the same page. The problem is that when used in the popup window, the item list that opens underneath the combobox does not have the correct width. I checked using firebug and the width for the one on the page is 198 (200-2 for the border) and the width of the one in the popup is 96 which does not make sense.
This is the code inside the popup:
<ext:Window ID="winPopup" runat="server" Title="#Popup Title#" Width="400" Height="400" CloseAction="Hide" Collapsible="True"
ShowOnLoad="false" Modal="true" Icon="TableRowInsert" Cls="templateForm">
<Body>
<ext:Panel ID="WizardPanel" runat="server" Height="400" Border="false" Header="false" BodyStyle="padding: 0;">
<Body>
<ext:CardLayout ID="WizardLayout" runat="server">
<ext:Panel ID="pnlStepOne" runat="server" Border="false" Header="false">
<Body>
<ext:Label runat="server" ID="lblHint" Icon="Help" />
<ext:TextArea runat="server" ID="txtPhrases" Width="350" Height="250" StyleSpec="margin-top: 10px;"></ext:TextArea>
</Body>
<Listeners>
<Show Handler="this.doLayout();" Single="true" />
</Listeners>
</ext:Panel>
<ext:Panel ID="pnlStepTwo" runat="server" Border="false" Header="false">
<Body>
<ext:FormLayout runat="server" LabelWidth="130">
<ext:Anchor>
<ext:Panel ID="pnlHeading" runat="server" Border="false" StyleSpec="margin:0; padding:0;" Height="50"
BodyStyle="background: transparent; padding: 1px 0 0 0;" HideLabel="false" FieldLabel="#Heading#">
<Body>
<user:ComboBoxHeading ID="cbHeading" runat="server" FieldLabel="#Heading#" LabelWidth="130" />
</Body>
</ext:Panel>
</ext:Anchor>
<ext:Anchor>
<ext:ComboBox ID="cbStatus" runat="server" FieldLabel="#Status#" Width="150" Editable="false"
SelectOnFocus="true" ForceSelection="true" />
</ext:Anchor>
<ext:Anchor>
<ext:ComboBox ID="cbType" runat="server" FieldLabel="#Type#" Width="150" Editable="false"
SelectOnFocus="true" ForceSelection="true" />
</ext:Anchor>
<ext:Anchor>
<ext:ComboBox ID="cbLocale" runat="server" FieldLabel="#Locale#" Width="150" Editable="false"
SelectOnFocus="true" ForceSelection="true" />
</ext:Anchor>
<ext:Anchor>
<ext:Panel runat="server" Border="false" StyleSpec="margin:0; padding:0;" Height="50"
BodyStyle="background: transparent; padding: 1px 0 0 0;" HideLabel="false" FieldLabel="#Heading#">
<Body>
<user:ComboBoxParent ID="cbParent" runat="server" FieldLabel="#Parent#" LabelWidth="130" />
</Body>
</ext:Panel>
</ext:Anchor>
<ext:Anchor>
<ext:Checkbox ID="chkExportable" runat="server" FieldLabel="#Exportable#" Width="100" />
</ext:Anchor>
</ext:FormLayout>
</Body>
<Listeners>
<Show Handler="this.doLayout();" Single="true" />
</Listeners>
</ext:Panel>
</ext:CardLayout>
</Body>
</ext:Panel>
</Body>
<Buttons>
<ext:Button ID="btnPrev" runat="server" Text="Prev" Disabled="true" Icon="PreviousGreen">
<AjaxEvents>
<Click OnEvent="btnPrev_Click">
<ExtraParams>
<ext:Parameter Name="index" Value="#{WizardPanel}.items.indexOf(#{WizardPanel}.layout.activeItem)" Mode="Raw" />
</ExtraParams>
</Click>
</AjaxEvents>
</ext:Button>
<ext:Button ID="btnNext" runat="server" Text="Next" Icon="NextGreen">
<AjaxEvents>
<Click OnEvent="btnNext_Click">
<ExtraParams>
<ext:Parameter Name="index" Value="#{WizardPanel}.items.indexOf(#{WizardPanel}.layout.activeItem)" Mode="Raw" />
</ExtraParams>
</Click>
</AjaxEvents>
</ext:Button>
<ext:Button runat="server" ID="btnSubmit" Text="#Submit#" Icon="Accept">
<AjaxEvents>
<Click OnEvent="btnSubmit_Click" />
</AjaxEvents>
</ext:Button>
<ext:Button ID="btnCancel" runat="server" Text="#Cancel#" Icon="Decline">
<Listeners>
<Click Handler="#{winPopup}.hide(null);" />
</Listeners>
</ext:Button>
</Buttons>
</ext:Window>
And this is the plain form setup: <ext:Panel ID="Panel1" runat="server">
<Body>
<ext:FormLayout runat="server" LabelWidth="200">
<ext:Anchor>
<ext:TextField ID="tfKeyword" runat="server" FieldLabel="#Search Phrase#" Width="300" />
</ext:Anchor>
<ext:Anchor>
<ext:ComboBox ID="cbExportable" runat="server" FieldLabel="#Exportable#" Width="100" Editable="false"
SelectOnFocus="true" ForceSelection="true" />
</ext:Anchor>
<ext:Anchor>
<ext:Panel ID="Panel3" runat="server" Border="false" StyleSpec="margin:0; padding:0;"
BodyStyle="background: transparent; padding: 1px 0 0 0;" HideLabel="false" FieldLabel="#Heading#">
<Body>
<user:ComboBoxHeading ID="cbHeading" runat="server" FieldLabel="#Heading#" LabelWidth="200" />
</Body>
</ext:Panel>
</ext:Anchor>
</ext:FormLayout>
</Body>
</ext:Panel>
ComboBoxHeading is the aforementioned controlany help is appreciated
Last edited by Daniil; Feb 07, 2011 at 2:47 PM.
Reason: [CLOSED]