[CLOSED] TreePanel focus

  1. #1

    [CLOSED] TreePanel focus

    Related to this thread http://forums.ext.net/showthread.php...d-ENTER-keymap

    I would do the same with treepanel in itemexpand listener:

    TREEPANEL
    <ext:TreePanel ID="sampleTreePanel" runat="server" Layout="FitLayout"
                Border="false" RootVisible="false" AutoScroll="true">
                <View>
                    <ext:TreeView runat="server" LoadingUseMsg="false" LoadMask="false" TrackOver="true">
                        <KeyMap runat="server">
                            <Binding>
                                <ext:KeyBinding DefaultEventAction="StopEvent" Handler="alert('works');">
                                    <Keys>
                                        <ext:Key Code="ENTER" />
                                    </Keys>
                                </ext:KeyBinding>
                            </Binding>
                        </KeyMap>
                    </ext:TreeView>
                </View>
                <Store>
                    <ext:TreeStore ID="sampleTreeStore" runat="server">
                        <Proxy>
                            <ext:AjaxProxy Url='<%# this.Page.GetRouteUrl(this.Area, new { controller="MyController", action="MyAction" }) %>' AutoDataBind="true">
                            </ext:AjaxProxy>
                        </Proxy>
                    </ext:TreeStore>
                </Store>
                <Root>
                    <ext:Node NodeID="0" />
                </Root>
                <Listeners>
                    <ItemExpand Fn="onExpand" />
                </Listeners>
            </ext:TreePanel>
    LISTENER HANDLER
    onLoaded: function (loadNode) {
            var nodeId = parseInt(loadNode.data.id, 10);
            var hasRecords = ((nodeId== 0 && loadNode.childNodes.length > 0) || nodeId!= 0);
    
            if (nodeId== 0 && hasRecords) {
                sampleTreePanel.getSelectionModel().select(loadNode.childNodes[0], false); //This works and select first item
    
                if (sampleTreePanel.getView().viewReady == true)
                    sampleTreePanel.getView().focusCell({ row: 0, column: 0 });
                else
                    sampleTreePanel.getView().on('viewready', function () { sampleTreePanel.getView().focusCell({ row: 0, column: 0 }); });
        },
    How I must use focusCell? In Ext.JS docs this function doesn't appear documented but it appears in source code.
    Last edited by Daniil; Aug 16, 2012 at 1:21 PM. Reason: [CLOSED]
  2. #2
    Hi,

    It is documented, but marked as "private". Not sure why.
    http://docs.sencha.com/ext-js/4-1/#!...thod-focusCell

    The focusCell method appears to be working same for a TreePanel.

    Example
    <%@ 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>
        <ext:ResourceManager runat="server" />
    
        <ext:TreePanel ID="TreePanel1" runat="server">
            <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>
    
        <ext:Button runat="server" Text="Select">
            <Listeners>
                <Click Handler="App.TreePanel1.getSelectionModel().select(0);
                                App.TreePanel1.getView().focusCell({
                                    row : 0,
                                    column : 0
                                });" />
            </Listeners>
        </ext:Button>
    </body>
    </html>
    Also I updated the related thread:
    http://forums.ext.net/showthread.php...ll=1#post88732

    I can't see the onExpand definition in your sample code.
  3. #3
    It's a mistake, onLoaded function is onExpand, but adapting it I renamed, sorry.
  4. #4
    Quote Originally Posted by Daniil View Post
    Hi,

    It is documented, but marked as "private". Not sure why.
    http://docs.sencha.com/ext-js/4-1/#!...thod-focusCell

    The focusCell method appears to be working same for a TreePanel.
    But you could move it in treepanel with arrows?
  5. #5
    Quote Originally Posted by softmachine2011 View Post
    But you could move it in treepanel with arrows?
    In my example - yes. Could you provide your full sample to test?
  6. #6
    This is the test case, it's an MVC app.

    HTML
    <%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Sample.master.cs" Inherits="Softmachine.Millenium.Presentation.Web.MVC.Client.Views.Shared.Sample" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <!DOCTYPE html>
    <html>
    <head runat="server">
        <title>Ext.NET v2 Example</title>
        <script type="text/javascript">
            function onExpand(loadNode) {
                var nodeId = parseInt(loadNode.data.id, 10);
                var hasRecords = ((nodeId == 0 && loadNode.childNodes.length > 0) || nodeId != 0);
    
                if (nodeId == 0 && hasRecords) {
                    TreePanel1.getSelectionModel().select(loadNode.childNodes[0], false); //This works and select first item     
    
                    if (TreePanel1.getView().viewReady == true)
                        TreePanel1.getView().focusCell({ row: 0, column: 0 });
                    else
                        TreePanel1.getView().on('viewready', function () { TreePanel1.getView().focusCell({ row: 0, column: 0 }); });
                }
            }
        </script>
    </head>
    <body>
        <ext:ResourceManager runat="server" />
        <ext:TreePanel ID="TreePanel1" runat="server" Layout="FitLayout" Border="false" RootVisible="false"
            AutoScroll="true">
            <View>
                <ext:TreeView runat="server" LoadingUseMsg="false" LoadMask="false" TrackOver="true">
                    <KeyMap runat="server">
                        <Binding>
                            <ext:KeyBinding DefaultEventAction="StopEvent" Handler="alert('works');">
                                <Keys>
                                    <ext:Key Code="ENTER" />
                                </Keys>
                            </ext:KeyBinding>
                        </Binding>
                    </KeyMap>
                </ext:TreeView>
            </View>
            <Store>
                <ext:TreeStore ID="sampleTreeStore" runat="server">
                    <Proxy>
                        <ext:AjaxProxy Url='/Presencia/Sample/TreeList' AutoDataBind="true">
                        </ext:AjaxProxy>
                    </Proxy>
                </ext:TreeStore>
            </Store>
            <Root>
                <ext:Node NodeID="0" />
            </Root>
            <Listeners>
                <ItemExpand Fn="onExpand" />
            </Listeners>
        </ext:TreePanel>
        <ext:Button runat="server" Text="Select">
            <Listeners>
                <Click Handler="TreePanel1.getSelectionModel().select(0);            
                                TreePanel1.getView().focusCell({row : 0, column : 0});" />
            </Listeners>
        </ext:Button>
    </body>
    </html>
    Controller
    public ActionResult TreeList()
            {
                Ext.Net.NodeCollection nodeCollection = new Ext.Net.NodeCollection();
    
                Ext.Net.Node node1 = new Ext.Net.Node
                {
                    NodeID = "1",
                    Text = HttpUtility.HtmlEncode("Text Node 1"),
                    Leaf = true,
                    Expandable = false,
                    Qtip = HttpUtility.HtmlEncode("Tooltip node 1")
                };
    
                Ext.Net.Node node2 = new Ext.Net.Node
                {
                    NodeID = "2",
                    Text = HttpUtility.HtmlEncode("Text Node 2"),
                    Leaf = true,
                    Expandable = false,
                    Qtip = HttpUtility.HtmlEncode("Tooltip node 2")
                };
    
                nodeCollection.Add(node1);
                nodeCollection.Add(node2);
    
                return Content(nodeCollection.ToJson());
            }
    Like you can see with button works, but with itemexpand event, only selects the first item but don't focuses treepanel
  7. #7
    I think a small Delay should help.
    <ItemExpand Fn="onExpand" Delay="1" />
  8. #8
    Yes, with a delay works fine

Similar Threads

  1. Replies: 4
    Last Post: Jan 26, 2012, 2:35 PM
  2. [CLOSED] Set focus
    By sisa in forum 1.x Premium Help
    Replies: 3
    Last Post: Sep 05, 2011, 8:32 AM
  3. Replies: 2
    Last Post: Jul 14, 2011, 6:45 PM
  4. Replies: 5
    Last Post: Mar 23, 2011, 9:57 AM
  5. Dynamically changing Treepanel other Treepanel
    By airforcz in forum 1.x Help
    Replies: 0
    Last Post: Jun 16, 2010, 8:33 AM

Tags for this Thread

Posting Permissions