PDA

View Full Version : [CLOSED] TreePanel is scrolled to the top or the selected item when it is focused



RCN
Sep 17, 2013, 7:55 PM
On the following example, when Focus Tree button is pressed, the TreePanel is scrolled to the top if there is no item selected, otherwise, its scrolled to the selected item position.

I would like to know whether it's possible to keep the scroll position when focusing the TreePanel.

Thanks in advance.



<!DOCTYPE html>
<html>
<head id="Head1" runat="server">
<script type="text/javascript">
var click = function () {
App._trp.getView().focus();
}
</script>
</head>
<body>
<ext:ResourceManager runat="server" />
<ext:Button Text="Focus Tree" runat="server">
<Listeners>
<Click Handler="click();" />
</Listeners>
</ext:Button>
<ext:TreePanel ID="_trp" RootVisible="false" Title="Ext.Net" Width="200" Height="400" runat="server">
<Root>
<ext:Node Expanded="true">
<Children>
<ext:Node Text="Ext" Expanded="true">
<Children>
<ext:Node Text="Net" Leaf="true" />
<ext:Node Text="Net" Leaf="true" />
<ext:Node Text="Net" Leaf="true" />
<ext:Node Text="Net" Leaf="true" />
<ext:Node Text="Net" Leaf="true" />
<ext:Node Text="Net" Leaf="true" />
<ext:Node Text="Net" Leaf="true" />
<ext:Node Text="Net" Leaf="true" />
<ext:Node Text="Net" Leaf="true" />
<ext:Node Text="Net" Leaf="true" />
<ext:Node Text="Net" Leaf="true" />
<ext:Node Text="Net" Leaf="true" />
<ext:Node Text="Net" Leaf="true" />
<ext:Node Text="Net" Leaf="true" />
<ext:Node Text="Net" Leaf="true" />
<ext:Node Text="Net" Leaf="true" />
<ext:Node Text="Net" Leaf="true" />
<ext:Node Text="Net" Leaf="true" />
<ext:Node Text="Net" Leaf="true" />
<ext:Node Text="Net" Leaf="true" />
<ext:Node Text="Net" Leaf="true" />
<ext:Node Text="Net" Leaf="true" />
<ext:Node Text="Net" Leaf="true" />
<ext:Node Text="Net" Leaf="true" />
<ext:Node Text="Net" Leaf="true" />
<ext:Node Text="Net" Leaf="true" />
<ext:Node Text="Net" Leaf="true" />
<ext:Node Text="Net" Leaf="true" />
<ext:Node Text="Net" Leaf="true" />
</Children>
</ext:Node>
<ext:Node Text="Net" Expanded="true">
<Children>
<ext:Node Text="Ext" Leaf="true" />
<ext:Node Text="Ext" Leaf="true" />
<ext:Node Text="Ext" Leaf="true" />
<ext:Node Text="Ext" Leaf="true" />
<ext:Node Text="Ext" Leaf="true" />
<ext:Node Text="Ext" Leaf="true" />
<ext:Node Text="Ext" Leaf="true" />
<ext:Node Text="Ext" Leaf="true" />
<ext:Node Text="Ext" Leaf="true" />
<ext:Node Text="Ext" Leaf="true" />
<ext:Node Text="Ext" Leaf="true" />
<ext:Node Text="Ext" Leaf="true" />
<ext:Node Text="Ext" Leaf="true" />
<ext:Node Text="Ext" Leaf="true" />
<ext:Node Text="Ext" Leaf="true" />
<ext:Node Text="Ext" Leaf="true" />
<ext:Node Text="Ext" Leaf="true" />
<ext:Node Text="Ext" Leaf="true" />
<ext:Node Text="Ext" Leaf="true" />
<ext:Node Text="Ext" Leaf="true" />
<ext:Node Text="Ext" Leaf="true" />
<ext:Node Text="Ext" Leaf="true" />
<ext:Node Text="Ext" Leaf="true" />
<ext:Node Text="Ext" Leaf="true" />
<ext:Node Text="Ext" Leaf="true" />
<ext:Node Text="Ext" Leaf="true" />
<ext:Node Text="Ext" Leaf="true" />
<ext:Node Text="Ext" Leaf="true" />
<ext:Node Text="Ext" Leaf="true" />
</Children>
</ext:Node>
</Children>
</ext:Node>
</Root>
<Listeners>
<AfterRender Handler="App._trp.getView().scrollBy(0, 200, true);" Delay="500" />
</Listeners>
</ext:TreePanel>
</body>
</html>

Daniil
Sep 18, 2013, 6:22 AM
Hi Raphael,

The last selected row is being consider as an element for re-focusing. If no selected, the first node becomes an element to focus.

I can suggest to restore scrolling this way.

var click = function () {
var view = App._trp.getView(),
scrollTop = view.el.dom.scrollTop;

view.focus(null, null, function () {
this.el.dom.scrollTop = scrollTop;
}, view);
};

RCN
Sep 18, 2013, 8:40 PM
Thank you Daniil. Please mark this thread as closed.