[CLOSED] TreePanel selectPath throw exception when executed in AfterRender listener

  1. #1

    [CLOSED] TreePanel selectPath throw exception when executed in AfterRender listener

    Hi,

    I have reproduced the problem in following example:

    <%@ Page Language="C#" %>
    
    <!DOCTYPE html>
    
    <html>
    <head runat="server">
        <title>Error: Unable to get property 'el' of undefined or null reference</title>
    </head>
    <body>
        <ext:ResourceManager runat="server" />
    
        <ext:TreeStore ID="TreeStore1" runat="server">
            <Root>
                <ext:Node Expanded="true">
                    <Children>
                        <ext:Node Text="app" NodeID="2">
                            <Children>
                                <ext:Node Text="Application.js" Leaf="true" NodeID="3"/>
                            </Children>
                        </ext:Node>
                        </Children>
                </ext:Node>
            </Root>
        </ext:TreeStore>
    
        <ext:Viewport 
            runat="server" 
            Layout="BorderLayout">
            <Items>
                <ext:TreePanel
                    runat="server"
                    ID="treePanel" 
                    Width="300"
                    Layout="FitLayout"
                    RootVisible="true"
                    Lines="false"
                    UseArrows="false"
                    StoreID="TreeStore1" />
            </Items>
            <Listeners>
                <AfterRender Handler="
                    var tree = #{treePanel}; 
                        
                        tree.selectPath('/Root/app/Application.js','text','/')" />
            </Listeners>
        </ext:Viewport>
    </body>
    </html>


    My question here is... Are we allowed to use "selectPath" in AfterRender listener ?
    When I change AfterRender to AfterLayout ... then all is fine.


    The reason I am asking is I have got the same problem in slightly different situation...

    Thank you
    Last edited by Daniil; Jan 30, 2015 at 2:39 PM. Reason: [CLOSED]
  2. #2
    I have reproduced exactly my problem: in this case using AfterLayout also fails:

    When panel is collapsed the node cannot be selected. (selectPath calls ensureVisible that fails)

    If you set
    Collapsed=false
    everything is fine.

    <%@ Page Language="C#" %>
    
    <!DOCTYPE html>
    
    <html>
    <head runat="server">
    	<title>Basic TreePanel - Ext.NET Examples</title>
    </head>
    <body>
    	<ext:ResourceManager runat="server" />
    
    	<ext:TreeStore ID="TreeStore1" runat="server">
    		<Root>
    			<ext:Node Expanded="true">
    				<Children>
    					<ext:Node Text="app" NodeID="2">
    						<Children>
    							<ext:Node Text="Application.js" Leaf="true" NodeID="3" />
    						</Children>
    					</ext:Node>
    				</Children>
    			</ext:Node>
    		</Root>
    	</ext:TreeStore>
    
    	<ext:Viewport
    		runat="server"
    		Layout="BorderLayout">
    		<Items>
    			<ext:Panel runat="server"
    				Region="West"
    				Collapsed="true"
    				Collapsible="true">
    
    				<Items>
    					<ext:TreePanel
    						runat="server"
    						ID="treePanel"
    						Width="300"
    						Layout="FitLayout"
    						RootVisible="true"
    						Lines="false"
    						UseArrows="false"
    						StoreID="TreeStore1" />
    				</Items>
    			</ext:Panel>
    		</Items>
    		<Listeners>
    			<AfterLayout Handler="
    				var tree = #{treePanel}; 
    				tree.selectPath('/Root/app/Application.js','text','/')" />
    		</Listeners>
    	</ext:Viewport>
    </body>
    </html>
    PS. the case AfterRender with Collapsed=false also fails.
  3. #3
    Hi Matt,

    A .selectPath() method selects a node. I think it might too early to select a node within an AfterRender or AfterLayout event.

    Please try a ViewReady event. It is a recommended event for selecting a row.
    http://docs.sencha.com/extjs/5.1/5.1...vent-viewready
  4. #4

    No luck

    I have moved the handler to ViewReady listener and it is even worse. Fails even panel is not collapsed. I will try look under the bonnet of extJs later.

    <%@ Page Language="C#" %>
    
    <!DOCTYPE html>
    
    <html>
    <head runat="server">
    	<title>Basic TreePanel - Ext.NET Examples</title>
    </head>
    <body>
    	<ext:ResourceManager runat="server" />
    
    	<ext:TreeStore ID="TreeStore1" runat="server">
    		<Root>
    			<ext:Node Expanded="true">
    				<Children>
    					<ext:Node Text="app" NodeID="2">
    						<Children>
    							<ext:Node Text="Application.js" Leaf="true"/>
    						</Children>
    					</ext:Node>
    				</Children>
    			</ext:Node>
    		</Root>
    	</ext:TreeStore>
    
    	<ext:Viewport
    		runat="server"
    		Layout="BorderLayout">
    		<Items>
    			<ext:Panel runat="server"
    				Region="West"
    				Collapsed="false"
    				Collapsible="false">
    
    				<Items>
    					<ext:TreePanel
    						runat="server"
    						ID="treePanel"
    						Width="300"
    						Layout="FitLayout"
    						RootVisible="true"
    						Lines="false"
    						UseArrows="false"
    						StoreID="TreeStore1">
    						<Listeners>
    							<ViewReady Handler=" 
    								var tree = #{treePanel}; 
    								tree.selectPath('/Root/app/Application.js','text','/')">
    							</ViewReady>
    						</Listeners>
    					</ext:TreePanel>
    				</Items>
    			</ext:Panel>
    		</Items>
    	</ext:Viewport>
    </body>
    </html>
  5. #5

    Different approach and different error

    I decided to try different approach and wait a bit until selection is executed. I also removed wrapping panel (I my app it is panel with accordion layout) to make sure it is not related to the problem.

    I have found that there is another issue... when you try to expand tree node then another error is thrown.
    Error: Unable to set property 'hidden' of undefined or null reference

    The selection also fails if the panel is still collapsed. When you expand the panel before selectPath is executed (ignoring above error) then node will be selected correctly.

    <%@ Page Language="C#" %>
    
    <!DOCTYPE html>
    
    <html>
    <head runat="server">
    	<title>Basic TreePanel - Ext.NET Examples</title>
    </head>
    <body>
    	<ext:ResourceManager runat="server" />
    
    	<ext:TreeStore ID="TreeStore1" runat="server">
    		<Root>
    			<ext:Node Expanded="true">
    				<Children>
    					<ext:Node Text="app" NodeID="2">
    						<Children>
    							<ext:Node Text="Application.js" Leaf="true" />
    						</Children>
    					</ext:Node>
    				</Children>
    			</ext:Node>
    		</Root>
    	</ext:TreeStore>
    
    	<ext:Viewport
    		runat="server"
    		Layout="BorderLayout">
    		<Items>
    
    			<ext:TreePanel
    				runat="server"
    				ID="treePanel"
    				Region="West"
    				Collapsed="true"
    				Width="300"
    				Title="Try expand before selectPath is executed"
    				Collapsible="true"
    				Layout="FitLayout"
    				RootVisible="true"
    				Lines="false"
    				UseArrows="false"
    				StoreID="TreeStore1">
    			</ext:TreePanel>
    
    		</Items>
    		<Listeners>
    			<AfterRender Handler=" 
    				var tree = #{treePanel},
    					task = new Ext.util.DelayedTask(function(){
    						alert('I am about to select node...');
    						tree.selectPath('/Root/app/Application.js','text','/')
    					});
    					task.delay(5000);
    				">
    			</AfterRender>
    		</Listeners>
    	</ext:Viewport>
    </body>
    </html>
  6. #6
    It appears that Delay="1" for a ViewReady listener helps.
    <Listeners>
        <ViewReady 
            Handler="var tree = #{treePanel}; 
                     tree.selectPath('/Root/app/Application.js','text','/')"
            Delay="1" />
    </Listeners>
    Error: Unable to set property 'hidden' of undefined or null reference
    I think it is because of no Center region for a BorderLayout that requires a Center region.

Similar Threads

  1. [CLOSED] can not get model in AfterRender listener?
    By tobros in forum 2.x Legacy Premium Help
    Replies: 1
    Last Post: Dec 02, 2013, 5:03 AM
  2. [CLOSED] TreePanel SelectPath
    By Timothy in forum 2.x Legacy Premium Help
    Replies: 6
    Last Post: Aug 27, 2012, 6:42 AM
  3. Replies: 2
    Last Post: Jun 24, 2011, 5:33 PM
  4. Replies: 6
    Last Post: Dec 22, 2010, 1:41 PM
  5. [CLOSED] ScriptManager throw exception in my masterpage
    By pumpkin in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Jun 04, 2009, 3:09 AM

Tags for this Thread

Posting Permissions