[CLOSED] TreeList nav/micro

  1. #1

    [CLOSED] TreeList nav/micro

    Support,

    In any navigation menu, you can click the same link more than one. So in our app, the links open a tab. So it is common practice to close the tab and then maybe reopen it.

    Set the example as NAV and MICRO. then click users->tagged and notice the popup. Now click it again. nothing

    reason is that in a tree, it is only activating the handler once. I need to click some other link before i can click tagged again. i would consider this a defect and the blocking of the second click (of same node) should be DISABLED in NAV mode.

    thanks
    /Z

    <%@ Page Language="C#" %>
    
    
    <!DOCTYPE html>
    
    
    <html>
    <head runat="server">
        <title>Multi Node Tree List built using markup - Ext.NET Examples</title>
        <link href="/resources/css/examples.css" rel="stylesheet" />
    
    
        <script type="text/javascript">
            var syncSettings = function () {
                App.ExpanderOnlyToggle.setChecked(App.TreeList1.getExpanderOnly());
                App.SingleExpandToggle.setChecked(App.TreeList1.getSingleExpand());
                App.MicroToggleBtn.setPressed(App.TreeList1.getMicro());
            }
    
    
            var handleSEToggle = function (me) {
                if (me.checked) {
                    // If setting Single Expand, collapse everyone to ensure only one
                    // node ever gets expanded. Do not recurse into nodes, as manually
                    // collapsing a node does not collapse its children.
                    App.TreeList1.getStore().getRoot().collapseChildren(false);
                }
    
    
                App.TreeList1.setSingleExpand(me.checked);
            }
    
    
            var handleNavToggle = function (button, pressed) {
                var treelist = App.TreeList1,
                    ct = treelist.ownerCt;
    
    
                treelist.setExpanderFirst(!pressed);
                treelist.setUi(pressed ? 'nav' : null);
                treelist.setHighlightPath(pressed);
                ct[pressed ? 'addCls' : 'removeCls']('treelist-with-nav');
    
    
                // If switching to Nav while already on Micro, adjust the width
                if (treelist.getMicro()) {
                    ct.setWidth(treelist.toolsElement.getWidth())
                }
    
    
                if (Ext.isIE8) {
                    this.repaintList(treelist);
                }
            }
    
    
            var handleMicroToggle = function (me) {
                var tl = App.TreeList1,
                    ct = tl.ownerCt;
                App.TreeList1.setMicro(me.pressed);
    
    
                if (me.pressed) {
                    tl.macroWidth = ct.getWidth();
                    ct.setWidth(tl.toolsElement.getWidth());
                } else {
                    if (tl.macroWidth === undefined) {
                        tl.macroWidth = 200;
                    }
                    ct.setWidth(tl.macroWidth);
                }
            }
    
    
            var handleTLSel = function (me, node) {
                var pane = App.SelectionPanel,
                    cn = node,
                    selPath = [];
    
    
                while (!cn.isRoot()) {
                    selPath.push(cn.data.text);
                    cn = cn.parentNode;
                }
                alert("Selected: <br /><b>" + selPath.reverse().join(" > ") + "</b>");
            }
        </script>
    
    
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" Theme="Triton">
                <Listeners>
                    <DocumentReady Fn="syncSettings" />
                </Listeners>
            </ext:ResourceManager>
    
    
            <h1>Tree List Component Overview</h1>
    
    
            <p>
                The <b>TreeList</b> component is a simplified and lightweight version of the <b>TreePanel</b>, useful for simple and responsive navigation trees.
            </p>
    
    
            <ext:Window
                ID="Window1"
                runat="server"
                Title="TreeList"
                IconCls="x-fa fa-gears"
                Width="500"
                Height="450"
                Closable="False"
                Resizable="false"
                Layout="BorderLayout">
                <HeaderConfig runat="server">
                    <Items>
                        <ext:Button runat="server" Text="Options">
                            <Menu>
                                <ext:Menu runat="server" ID="OptionsMenu">
                                    <Items>
                                        <ext:CheckMenuItem
                                            ID="ExpanderOnlyToggle"
                                            runat="server"
                                            Text="Expander Only"
                                            Handler="App.TreeList1.setExpanderOnly(this.checked)" />
                                        <ext:CheckMenuItem ID="SingleExpandToggle" runat="server" Text="Single Expand">
                                            <Listeners>
                                                <CheckChange Fn="handleSEToggle" />
                                            </Listeners>
                                        </ext:CheckMenuItem>
                                    </Items>
                                </ext:Menu>
                            </Menu>
                        </ext:Button>
                        <ext:Button
                            ID="NavToggleBtn"
                            runat="server"
                            Text="Nav"
                            EnableToggle="true">
                            <Listeners>
                                <Toggle Fn="handleNavToggle" />
                            </Listeners>
                        </ext:Button>
                        <ext:Button
                            ID="MicroToggleBtn"
                            runat="server"
                            Text="Micro"
                            EnableToggle="true">
                            <Listeners>
                                <Toggle Fn="handleMicroToggle" />
                            </Listeners>
                        </ext:Button>
                    </Items>
                </HeaderConfig>
                <Items>
                    <ext:Panel
                        ID="TreeListPanel"
                        runat="server"
                        Width="250"
                        Border="false"
                        Region="West"
                        Split="true"
                        Scrollable="Both">
                        <LayoutConfig>
                            <ext:VBoxLayoutConfig Align="Stretch" />
                        </LayoutConfig>
                        <Items>
                            <ext:TreeList runat="server" ID="TreeList1">
                                <Listeners>
                                    <SelectionChange Fn="handleTLSel" />
                                </Listeners>
                                <Store>
                                    <ext:TreeStore ID="TreeStore1" runat="server">
                                        <Root>
                                            <ext:Node Expanded="true">
                                                <Children>
                                                    <ext:Node Text="Home" IconCls="x-fa fa-home">
                                                        <Children>
                                                            <ext:Node Text="Messages" IconCls="x-fa fa-inbox" Leaf="true" />
                                                            <ext:Node Text="Archive" IconCls="x-fa fa-database">
                                                                <Children>
                                                                    <ext:Node Text="First" IconCls="x-fa fa-sliders" Leaf="true" />
                                                                    <ext:Node Text="No Icon" IconCls="" Leaf="true" />
                                                                </Children>
                                                            </ext:Node>
                                                            <ext:Node Text="Music" IconCls="x-fa fa-music" Leaf="true" />
                                                            <ext:Node Text="Video" IconCls="x-fa fa-film" Leaf="true" />
                                                        </Children>
                                                    </ext:Node>
                                                    <ext:Node Text="Users" IconCls="x-fa fa-user">
                                                        <Children>
                                                            <ext:Node Text="Tagged" IconCls="x-fa fa-tag" Leaf="true" />
                                                            <ext:Node Text="Inactive" IconCls="x-fa fa-trash" Leaf="true" />
                                                        </Children>
                                                    </ext:Node>
                                                    <ext:Node Text="Groups" IconCls="x-fa fa-group" Leaf="true" />
                                                    <ext:Node Text="Settings" IconCls="x-fa fa-wrench">
                                                        <Children>
                                                            <ext:Node Text="Sharing" IconCls="x-fa fa-share-alt" Leaf="true" />
                                                            <ext:Node Text="Notifications" IconCls="x-fa fa-flag" Leaf="true" />
                                                            <ext:Node Text="Network" IconCls="x-fa fa-signal" Leaf="true" />
                                                        </Children>
                                                    </ext:Node>
                                                </Children>
                                            </ext:Node>
                                        </Root>
                                    </ext:TreeStore>
                                </Store>
                            </ext:TreeList>
                        </Items>
                    </ext:Panel>
                    <ext:Panel
                        ID="SelectionPanel"
                        runat="server"
                        Region="Center"
                        BodyPadding="10" />
                </Items>
            </ext:Window>
        </form>
    </body>
    </html>
    Last edited by fabricio.murta; Feb 08, 2019 at 2:24 PM.
  2. #2
    Hello @Z!

    Just use the click event instead of select. The selection will fire only once, no matter what, and it makes sense because the selection only changes well, when it changes. Clicking a same item is not going to re-select it.

    It is important to bear in mind though, the TreeList component has fewer features by design, as it is meant to be a lightweight component.

    For more "advanced" features, you should rely on the TreePanel. For instance, the behavior you describe as desired is reproduced in this example: TreePanel > Basic > Site Map.

    In the example linked above, you'll notice the same behavior of the examples explorer tree itself, and similar to what you described here:

    Quote Originally Posted by Z
    So in our app, the links open a tab. So it is common practice to close the tab and then maybe reopen it.
    This is exactly what our examples explorer and the sample above's Tree Panels do. So that when you close an opened tab, and click the same option again, the tab gets reopened -- provided it had been closed -- or selected back if it is just left as an inactive, open tab. But well, in this case, it does not really matter whether you're using a simple menu, a treelist or a treepanel; just use the click event and you should get the behavior you want.

    Hope this helps!
    Fabrício Murta
    Developer & Support Expert
  3. #3
    ok. thanks for that
    /Z
  4. #4
    Hello @Z!

    Glad it helped, thanks for the feedback!
    Fabrício Murta
    Developer & Support Expert

Similar Threads

  1. Replies: 3
    Last Post: Feb 01, 2019, 1:00 PM
  2. [CLOSED] TreeList selection
    By Z in forum 4.x Premium Help
    Replies: 3
    Last Post: Jan 02, 2019, 3:06 AM
  3. [CLOSED] Treelist header alignment
    By Z in forum 4.x Premium Help
    Replies: 3
    Last Post: Jan 02, 2019, 3:05 AM
  4. [CLOSED] TreeList in Ext.NET
    By sveins12 in forum 4.x Premium Help
    Replies: 10
    Last Post: Aug 23, 2018, 3:33 PM
  5. Replies: 1
    Last Post: Sep 26, 2014, 9:46 AM

Posting Permissions