[CLOSED] dropdown field width

  1. #1

    [CLOSED] dropdown field width

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

Name:	10-1-2012 5-56-52 PM.jpg 
Views:	61 
Size:	81.2 KB 
ID:	4857
    Last edited by Daniil; Oct 02, 2012 at 7:31 PM. Reason: [CLOSED]
  2. #2
    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.
    Geoffrey McGill
    Founder & CEO
  3. #3
    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>
    Quote Originally Posted by geoffrey.mcgill View Post
    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.
  4. #4
    Hi @rnachman,

    Maybe I am misunderstanding something, but what about to just set a required Width for the GridPanel?
  5. #5
    Thank you Daniil,

    It is working by adding required width.

    Quote Originally Posted by Daniil View Post
    Hi @rnachman,

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

Similar Threads

  1. Replies: 6
    Last Post: Jan 28, 2012, 1:14 AM
  2. [CLOSED] Dropdown Field List Position
    By amitpareek in forum 1.x Legacy Premium Help
    Replies: 10
    Last Post: Apr 14, 2011, 7:04 PM
  3. Replies: 6
    Last Post: Feb 08, 2011, 6:17 PM
  4. [CLOSED] Dropdown Field Icon Error
    By amitpareek in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Mar 13, 2010, 2:19 PM
  5. [CLOSED] Lazy Mode | Dropdown Field | Treepanel Instance
    By amitpareek in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Feb 18, 2010, 3:52 PM

Posting Permissions