[CLOSED] dropdown field width

[rnachman]

Please provide an example of how to set a custom width for the dropdown field with grid panel / grouping. See attached

[geoffrey.mcgill]

Adding the following to the to the <ext:DropDownField> will resize the width of the drop down.

Example

<Listeners>
    <Expand Handler="this.picker.setWidth(500);" />
</Listeners>

Hope this helps.

[rnachman]

Hi Geoffrey.

I have added it as in following code, but not working

<ext:DropDownField ID="ddlLoanStatus" runat="server" Editable="false" EmptyText="Select loan status"
                                Width="220" TriggerIcon="SimpleArrowDown">
                                <Component>
                                    <ext:GridPanel ID="grdLoanStatus" runat="server" Height="250" AutoExpandColumn="STATUS_NAME"
                                        Title="Select User" Frame="true" StoreID="StatusStore" StripeRows="true">
                                        <TopBar>
                                            <ext:Toolbar ID="tbBranches" runat="server">
                                                <Items>
                                                    <ext:TextField ID="txtStatus" runat="server" EmptyText="Type Loan Status" EnableKeyEvents="true">
                                                        <Listeners>
                                                            <KeyUp Fn="SearchStatus" />
                                                        </Listeners>
                                                    </ext:TextField>
                                                    <ext:ToolbarFill />
                                                </Items>
                                            </ext:Toolbar>
                                        </TopBar>
                                        <ColumnModel ID="ColumnModel1" runat="server">
                                            <Columns>
                                                <ext:Column ColumnID="STATUS_NAME" Header="Loan Status" DataIndex="STATUS_NAME" />
                                                <ext:CommandColumn>
                                                    <Commands>
                                                        <ext:CommandFill />
                                                        <ext:GridCommand Icon="Add" CommandName="Pick">
                                                            <ToolTip Title="Loan" Text="Click to choose this Loan Status" />
                                                        </ext:GridCommand>
                                                        <ext:CommandSpacer Width="20" />
                                                    </Commands>
                                                </ext:CommandColumn>
                                            </Columns>
                                        </ColumnModel>
                                        <Listeners>
                                            <Command Handler="this.dropDownField.setValue(record.data.STATUS_NAME);PopulateSelectedLoanStatus(record.data.STATUS_ID);" />
                                        </Listeners>
                                        <LoadMask ShowMask="true" />
                                        <SelectionModel>
                                            <ext:RowSelectionModel ID="RowSelectionModel3" runat="server" />
                                        </SelectionModel>
                                        <View>
                                            <ext:GroupingView ID="GroupingView1" HideGroupedColumn="true" runat="server" ForceFit="true"
                                                ShowGroupName="false" EnableNoGroups="true" />
                                        </View>
                                        <BottomBar>
                                            <ext:PagingToolbar ID="pgtbLoanStatus" runat="server" PageSize="50">
                                                <Items>
                                                    <ext:ComboBox ID="ComboBox1" runat="server" Width="40">
                                                        <Items>
                                                            <ext:ListItem Text="5" />
                                                            <ext:ListItem Text="10" />
                                                            <ext:ListItem Text="25" />
                                                            <ext:ListItem Text="50" />
                                                            <ext:ListItem Text="100" />
                                                            <ext:ListItem Text="250" />
                                                        </Items>
                                                        <SelectedItem Value="50" />
                                                        <Listeners>
                                                            <Select Handler="#{pgtbLoanStatus}.pageSize = parseInt(this.getValue()); #{pgtbLoanStatus}.doLoad();" />
                                                        </Listeners>
                                                    </ext:ComboBox>
                                                </Items>
                                            </ext:PagingToolbar>
                                        </BottomBar>
                                    </ext:GridPanel>
                                </Component>
                                <Listeners>
                                    <Expand Handler="this.picker.setWidth(500);" />
                                </Listeners>
                            </ext:DropDownField>

Adding the following to the to the <ext:DropDownField> will resize the width of the drop down.

Example

<Listeners>
    <Expand Handler="this.picker.setWidth(500);" />
</Listeners>

Hope this helps.

[Daniil]

Hi @rnachman,

Maybe I am misunderstanding something, but what about to just set a required Width for the GridPanel?

[rnachman]

Thank you Daniil,

It is working by adding required width.

Hi @rnachman,

Maybe I am misunderstanding something, but what about to just set a required Width for the GridPanel?