[CLOSED] Misuse of DropDownField

  1. #1

    [CLOSED] Misuse of DropDownField

    Not sure how to ask the question, but lets give it a try. I currently have a modal window that is shown to accept user input.

    I originally had a user select items from three combo boxes (Fiscal Year, Domain, Category) that were related to each other. This seemed a little clumsy, so I decided to show a TreePanel organized by Fiscal Year, Domain and Category. When they selected one of the child categories I populated the three fields (Better).

    Rather then just have the TreePanel showing within the window I decided to use the DropDownField to expose the TreePanel when the user wants to file out the three fields. The only issue with the DropDownField is that I do not need the text field just the trigger icon to show the TreePanel.

    So I thought it would it be better to just use a button that shows the TreePanel when pressed, but a button does not have a component section like the DropDownField.

    Any suggestions?
    Last edited by Daniil; Mar 17, 2016 at 10:42 AM. Reason: [CLOSED]
  2. #2
    Hello Chris,

    We would recommend a Button's Menu.

    Example
    <%@ Page Language="C#" %>
    
    <!DOCTYPE html>
    <html>
    <head runat="server">
        <title>Ext.NET v2 Example</title>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
    
            <ext:Button runat="server" Text="Button">
                <Menu>
                    <ext:Menu runat="server" Plain="true">
                        <Items>
                            <ext:TreePanel ID="TreePanel1" runat="server" Width="200">
                                <Root>
                                    <ext:Node Text="Root (level 0)" Expanded="true">
                                        <Children>
                                            <ext:Node Text="Node1 (level 1)" Expanded="true">
                                                <Children>
                                                    <ext:Node Text="Node1 (level 2)" Expanded="true">
                                                        <Children>
                                                            <ext:Node Text="Node1 (level 3)" Leaf="true" />
                                                            <ext:Node Text="Node2 (level 3)" Leaf="true" />
                                                        </Children>
                                                    </ext:Node>
                                                </Children>
                                            </ext:Node>
                                            <ext:Node Text="Node2 (level 1)" Expanded="true">
                                                <Children>
                                                    <ext:Node Text="Node1 (level 2)" Expanded="true">
                                                        <Children>
                                                            <ext:Node Text="Node1 (level 3)" Leaf="true" />
                                                            <ext:Node Text="Node2 (level 3)" Leaf="true" />
                                                        </Children>
                                                    </ext:Node>
                                                </Children>
                                            </ext:Node>
                                        </Children>
                                    </ext:Node>
                                </Root>
                            </ext:TreePanel>
                        </Items>
                    </ext:Menu>
                </Menu>
            </ext:Button>
        </form>
    </body>
    </html>
  3. #3
    Perfect Danill, please close the thread.

    Nice talking to you again, we hope to migrate several of our applications from 2.5.x to 4.x late this spring.
  4. #4
    Nice talking to you again
    Same to you!

    we hope to migrate several of our applications from 2.5.x to 4.x late this spring.
    Excellent! We will be here to help if needed.
  5. #5
    Not a bigger deal, but I watched a user move to the Button's menu and try to use Keyboard navigation to select an item, but it doesn't work.

    • Tab to the text field and enter a value.
    • Tab to the button and press down arrow.
    • The Tree Panel is shown but the arrow keys do not get you into the tree.
    • I have to use the mouse to click into the tree panel before I can use the arrow keys.


    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <!DOCTYPE html>
    <html>
    <head runat="server">
        <title>Ext.NET v2 Example</title>
    </head>
    <body>
        <form runat="server">                   
        <ext:ResourceManager runat="server" />
        <ext:TextField runat="server" />
        <ext:Button runat="server" Text="Button">
            <Menu>
                <ext:Menu runat="server" Plain="true">
                    <Items>
                        <ext:TreePanel runat="server" Width="200">
                            <Root>
                                <ext:Node Text="Root (level 0)" Expanded="true">
                                    <Children>
                                        <ext:Node Text="Node1 (level 1)" Expanded="true">
                                            <Children>
                                                <ext:Node Text="Node1 (level 2)" Expanded="true">
                                                    <Children>
                                                        <ext:Node Text="Node1 (level 3)" Leaf="true" />
                                                        <ext:Node Text="Node2 (level 3)" Leaf="true" />
                                                    </Children>
                                                </ext:Node>
                                            </Children>
                                        </ext:Node>
                                        <ext:Node Text="Node2 (level 1)" Expanded="true">
                                            <Children>
                                                <ext:Node Text="Node1 (level 2)" Expanded="true">
                                                    <Children>
                                                        <ext:Node Text="Node1 (level 3)" Leaf="true" />
                                                        <ext:Node Text="Node2 (level 3)" Leaf="true" />
                                                    </Children>
                                                </ext:Node>
                                            </Children>
                                        </ext:Node>
                                    </Children>
                                </ext:Node>
                            </Root>
                        </ext:TreePanel>
                    </Items>
                </ext:Menu>
            </Menu>
        </ext:Button>
        </form>
    </body>
    </html>
  6. #6
    Selecting the first node when the TreePanel appears might be a solution.

    Example
    <%@ Page Language="C#" %>
    
    <!DOCTYPE html>
    <html>
    <head runat="server">
        <title>Ext.NET v2 Example</title>
    </head>
    <body>
        <form runat="server">                   
        <ext:ResourceManager runat="server" />
    
        <ext:TextField runat="server" />
    
        <ext:Button runat="server" Text="Button">
            <Menu>
                <ext:Menu runat="server" Plain="true">
                    <Items>
                        <ext:TreePanel runat="server" Width="200">
                            <Root>
                                <ext:Node Text="Root (level 0)" Expanded="true">
                                    <Children>
                                        <ext:Node Text="Node1 (level 1)" Expanded="true">
                                            <Children>
                                                <ext:Node Text="Node1 (level 2)" Expanded="true">
                                                    <Children>
                                                        <ext:Node Text="Node1 (level 3)" Leaf="true" />
                                                        <ext:Node Text="Node2 (level 3)" Leaf="true" />
                                                    </Children>
                                                </ext:Node>
                                            </Children>
                                        </ext:Node>
                                        <ext:Node Text="Node2 (level 1)" Expanded="true">
                                            <Children>
                                                <ext:Node Text="Node1 (level 2)" Expanded="true">
                                                    <Children>
                                                        <ext:Node Text="Node1 (level 3)" Leaf="true" />
                                                        <ext:Node Text="Node2 (level 3)" Leaf="true" />
                                                    </Children>
                                                </ext:Node>
                                            </Children>
                                        </ext:Node>
                                    </Children>
                                </ext:Node>
                            </Root>
                        </ext:TreePanel>
                    </Items>
                    <Listeners>
                        <Show Handler="this.items.getAt(0).getView().select(0);" Delay="1" />
                    </Listeners>
                </ext:Menu>
            </Menu>
        </ext:Button>
        </form>
    </body>
    </html>
  7. #7
    Thanks, that works nicely. My last related question on this closed thread:

    Is the correct way to get the Enter Key to act like the ItemClick event to add TreeView --> KeyMap like

    http://forums.ext.net/showthread.php...l=1#post119006
  8. #8
    If this approach works as you need, then yes, it is definitely a way to go. If it doesn't work as you need, please let us know.

Similar Threads

  1. DropDownField value always NULL
    By mturnhout in forum 2.x Help
    Replies: 2
    Last Post: Jan 14, 2014, 2:54 PM
  2. dropdownfield
    By oet7i in forum 2.x Help
    Replies: 3
    Last Post: Jan 24, 2013, 9:54 PM
  3. Replies: 0
    Last Post: Jan 22, 2013, 2:50 PM
  4. [CLOSED] DropDownField on FF
    By thchuong in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Apr 21, 2011, 8:18 AM
  5. Grideditor and dropdownfield
    By haiduong87 in forum 1.x Help
    Replies: 2
    Last Post: Oct 12, 2010, 10:04 AM

Posting Permissions