PDA

View Full Version : [CLOSED] Misuse of DropDownField



cwolcott
Mar 16, 2016, 5:27 PM
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?

Daniil
Mar 16, 2016, 8:49 PM
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>

cwolcott
Mar 17, 2016, 10:31 AM
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.

Daniil
Mar 17, 2016, 10:41 AM
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.

cwolcott
Mar 20, 2016, 1:41 AM
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>

Daniil
Mar 20, 2016, 7:24 PM
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>

cwolcott
Mar 21, 2016, 12:00 PM
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?26755&p=119006&viewfull=1#post119006

Daniil
Mar 21, 2016, 12:20 PM
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.