PDA

View Full Version : [CLOSED] TreePanel focus



softmachine2011
Aug 16, 2012, 9:05 AM
Related to this thread http://forums.ext.net/showthread.php?20528-GridPanel-focus-and-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(loadNod e.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.

Daniil
Aug 16, 2012, 11:38 AM
Hi,

It is documented, but marked as "private". Not sure why.
http://docs.sencha.com/ext-js/4-1/#!/api/Ext.view.Table-method-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?20528&p=88732&viewfull=1#post88732

I can't see the onExpand definition in your sample code.

softmachine2011
Aug 16, 2012, 12:20 PM
It's a mistake, onLoaded function is onExpand, but adapting it I renamed, sorry.

softmachine2011
Aug 16, 2012, 12:21 PM
Hi,

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

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



But you could move it in treepanel with arrows?

Daniil
Aug 16, 2012, 12:27 PM
But you could move it in treepanel with arrows?

In my example - yes. Could you provide your full sample to test?

softmachine2011
Aug 16, 2012, 12:48 PM
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.chi ldNodes[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

Daniil
Aug 16, 2012, 1:18 PM
I think a small Delay should help.

<ItemExpand Fn="onExpand" Delay="1" />

softmachine2011
Aug 16, 2012, 2:10 PM
Yes, with a delay works fine