Updating autoloaded tab pages

**pyro** · Dec 19, 2011, 7:59 AM

Hi,
I am a complete newbie to Ext.Net and I am having difficulty with something that I am sure is fairly easy to do. I have a page that has a TreePanel for navigation on the left and a TabPanel (with autoloaded pages for each tab) on the right. I want the content of each tab to reflect the currently selected node in the TreePanel.

I?ve created a simplified example that just has a textbox on each tab. On both tabs the text is updated when a node is selected, Tab_2 also has an ?Activate? listener that fires a DirectMethod on that tab?s autoloaded page. When I switch to Tab_2, I get: ?Microsoft JScript runtime error: 'TextField1' is undefined?. The code in the DirectMethod runs fine, the problem seems to occur afterward when the page is rendered.

I have tried a number of different approaches but I just cannot figure out a way to make it work. Whatever I try results in an error, all of my attempts are frustrated by the fact that the page and its controls don?t exist at the point that I am trying to set their properties.

I have searched through the Help forum but could not find anything that helped me (there probably is something there but I couldn?t find it). Any help you can give would be very much appreciated.
My setup: Windows XP/SP3, MS Visual Studio 2010

**Daniil** · Dec 19, 2011, 8:14 AM

Hi,

Be default, a tab is rendered when it's activated. I guess it causes the problem.

To override it, please set up DeferredRender="false" for a TabPanel.

**pyro** · Dec 19, 2011, 8:21 AM

Thanks Daniil for your very speedy response. I added the DeferredRender="false" property setting to my TabPanel but this didn't change anything. I still get "Microsoft JScript runtime error: 'TextField1' is undefined".

**Daniil** · Dec 19, 2011, 8:31 AM

Ok, please post the pages to reproduce the problem directly here wrapping in [CODE ] tags.

Please put code behind into

<script runat="server">
   code behind
</script>

**pyro** · Dec 19, 2011, 10:12 AM

Here you go Daniil, I've put the codebehind into code tags on each page. I had to make a few minor changes because it didn't work at first. Now the behaviour is as I first described.

The only snag is that I can't upload the new DetailsPage.aspx. The attachment management tool says it has uploaded it but it does not appear in the new list of files uploaded. I made repeated attempts but got the same result. Would be nice if I could clear the files previously uploaded but I can't see a way to do this. Anyway, the missing page is identical to DetailsPage2.aspx except in name.

The AppGlobals class is used to store the details of the selected node and sits in my App_Code folder. I don't know how to package this in a more convenient way for you, so I hope it's OK.

**Daniil** · Dec 19, 2011, 2:31 PM

Don't attach an aspx, just post code here and wrap in [CODE ] tags.

**pyro** · Dec 19, 2011, 3:07 PM

OK, Here's the main border layout page

<%@ Page Language="VB" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
<html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
        <title>MainBorderLayout</title>
        <link href="styles/stylesheet.css" rel="stylesheet" type="text/css" />
    </head>

    <body>
        <form id="Form1" runat="server">
            <%--
            Make sure that the Ext.Net resource manager is loaded, otherwise noting's gonna work.
            --%>
            <ext:ResourceManager ID="ResourceManager1" runat="server" />

            <ext:Button 
                ID="Button1" 
                runat="server" 
                Text="Show Window" 
                Icon="Application">
                <Listeners>
                    <Click Handler="#{Window1}.show();" />
                </Listeners>    
            </ext:Button>
        
            <ext:Window 
                ID="Window1" 
                runat="server" 
                Title="RAMtr@ck-WV" 
                Icon="Application"
                Width="1000" 
                Height="600"
                Border="false" 
                Collapsible="true"
                Maximizable="true"
                Layout="Fit">

                <Items>
                    <ext:BorderLayout ID="BorderLayout1" runat="server">

                        <West Collapsible="true" MinWidth="300" Split="true">
                            <ext:Panel ID="pnl_TreeView" runat="server" Title="Vehicles" Padding="2" Width="300" >
                                <AutoLoad Url="TreePanel.aspx" Mode="IFrame" ShowMask="true"  />                                
                            </ext:Panel>
                        </West>

                        <Center>

                                <ext:TabPanel 
                                    ID="TabPanel1" 
                                    runat="server" 
                                    ActiveTabIndex="0" 
                                    Width="650"
                                    Height="500" 
                                    Plain="true"
                                    EnableTabScroll="true"
                                    MinWidth="300"
                                    MinHeight="100"
                                    ResizeTabs="true"
                                    DeferredRender="false">

                                    <Items>
                                        <ext:Panel 
                                            ID="tab_1" 
                                            runat="server" 
                                            Title="Details"
                                            Padding="2" 
                                            AutoScroll="true">

                                            <AutoLoad Url="DetailsPage.aspx" Mode="IFrame" ShowMask="true"  />
                                        </ext:Panel>

                                        <ext:Panel 
                                            ID="tab_2" 
                                            runat="server" 
                                            Title="Picture" 
                                            Padding="2" 
                                            AutoScroll="true">

                                            <AutoLoad Url="DetailsPage2.aspx" Mode="IFrame" ShowMask="true"  /> 

                                            <Listeners>
                                                <Activate handler="Ext.net.DirectMethod.request('PopulateTab', { url: 'DetailsPage2.aspx'});" />
                                            </Listeners>
                                        </ext:Panel>
                                    </Items>
                                </ext:TabPanel>

                        </Center>

                    </ext:BorderLayout>
                </Items>

            </ext:Window>
        </form>
    </body>
</html>

Here's the TreePanel code.

<%@ Page Language="VB" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">
    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        Dim PopulateTreeSuccess_b As Boolean

        PopulateTreeSuccess_b = b_AddLocationsToTree()
    End Sub


    <DirectMethod()>
    Public Sub TreeSvrSideMethodCode(ByVal NodeName_s As String, ByVal NodeID_s As String, ByVal NodeQtip_s As String)
        'Save the selected node details into global variables
        AppGlobals.s_SelectedNodeName = NodeName_s
        AppGlobals.l_SelectedNodeID = Val(NodeID_s)
        AppGlobals.s_SelectedNodeQTip = NodeQtip_s
    End Sub


    Protected Function b_AddLocationsToTree() As Boolean
        Dim RetVal_b As Boolean
        Dim tree As Ext.Net.TreePanel
        Dim btnExpand As Ext.Net.Button
        Dim btnCollapse As Ext.Net.Button
        Dim toolBar As Toolbar
        Dim statusBar As StatusBar
        Dim root As Ext.Net.TreeNode
        Dim nd_Locations As Ext.Net.TreeNode

        RetVal_b = True

        Try
            tree = New Ext.Net.TreePanel()

            Me.ph_TreeviewPlaceHolder.Controls.Add(tree)

            tree.ID = "TreePanel1"
            tree.Width = Unit.Pixel(270)
            tree.Height = Unit.Pixel(400)
            tree.Icon = Icon.BookOpen
            tree.AutoScroll = True

            btnExpand = New Ext.Net.Button()
            btnExpand.Text = "Expand All"
            btnExpand.Listeners.Click.Handler = tree.ClientID + ".expandAll();"

            btnCollapse = New Ext.Net.Button()
            btnCollapse.Text = "Collapse All"
            btnCollapse.Listeners.Click.Handler = tree.ClientID + ".collapseAll();"

            toolBar = New Toolbar()
            toolBar.ID = "Toolbar1"
            toolBar.Items.Add(btnExpand)
            toolBar.Items.Add(btnCollapse)
            tree.TopBar.Add(toolBar)

            statusBar = New StatusBar()
            statusBar.AutoClear = 1000
            tree.BottomBar.Add(statusBar)

            tree.Listeners.Click.Handler = "parent.TabPanel1.activeTab.getBody().Ext.net.DirectMethods.HandleTreePanelSelection(node.text, node.id, node.attributes.qtip);"
            tree.Listeners.ExpandNode.Handler = statusBar.ClientID + ".setStatus({text: 'Node Expanded: <b>' + node.text + '</b>', clear: true});"
            tree.Listeners.ExpandNode.Delay = 30
            tree.Listeners.CollapseNode.Handler = statusBar.ClientID + ".setStatus({text: 'Node Collapsed: <b>' + node.text + '</b>', clear: true});"

            root = New Ext.Net.TreeNode("Root")
            root.NodeID = 0
            root.Qtip = "Root Qtip"
            root.Expanded = True
            tree.Root.Add(root)

            ' Normally the tree node structure will be built from a database table
            nd_Locations = New Ext.Net.TreeNode("Node 1")
            nd_Locations.NodeID = "1"
            nd_Locations.Qtip = "Qtip 1"
            root.Nodes.Add(nd_Locations)

            nd_Locations = New Ext.Net.TreeNode("Node 2")
            nd_Locations.NodeID = "2"
            nd_Locations.Qtip = "Qtip 2"
            root.Nodes.Add(nd_Locations)

        Catch ex As Exception
            RetVal_b = False
        End Try

        b_AddLocationsToTree = RetVal_b
    End Function
</script>

<html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>Treeview</title>
    </head>

    <body>
        <%--
        Make sure that the Ext.Net resource manager is loaded, otherwise noting's gonna work.
        --%>
        <ext:ResourceManager ID="ResourceManager1" runat="server" />

        <form id="form1" runat="server">
            <div>
                <asp:PlaceHolder ID="ph_TreeviewPlaceHolder" runat="server" />
            </div>
        </form>
    </body>
</html>

Here's the page that's loaded into the first tab.

<%@ Page Language="VB" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">
    ' I want this routine to load the correct picture when the picture tab is activated.
    ' Currently, it causes an error (if the comment apostrophe is removed) during rendering
    ' because the image control does not exist at the point when image URL is assigned.
    <DirectMethod()>
    Public Sub PopulateTab()
        Dim TextBox_tf As Ext.Net.TextField

        TextBox_tf = Ext.Net.X.GetCmp("TextField1")
        TextBox_tf.Text = "Item Details for " & AppGlobals.s_SelectedNodeName & ", Node ID: " & AppGlobals.l_SelectedNodeID & ", Node QTip: " & AppGlobals.s_SelectedNodeQTip
    End Sub


    <DirectMethod()>
    Sub HandleTreePanelSelection(ByVal NodeText_s As String, ByVal NodeID_s As String, ByVal NodeType_s As String)
        Dim TextBox_tf As Ext.Net.TextField

        TextBox_tf = Ext.Net.X.GetCmp("TextField1")
        TextBox_tf.Text = "Item Details for " & NodeText_s & ", Node ID: " & NodeID_s & ", Node Type: " & NodeType_s
    End Sub
</script>

<html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>Item Details</title>
        <link href="styles/stylesheet.css" rel="stylesheet" type="text/css" />
    </head>

    <body>
        <ext:ResourceManager ID="ResourceManager1" runat="server" />


        <form id="form1" runat="server">
            <ext:TextField ID="TextField1" Width="500px" runat="server" ></ext:TextField>
        </form>
    </body>
</html>

Here's the page that's loaded into the second tab.

<%@ Page Language="VB" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">
    ' I want this routine to load the correct picture when the picture tab is activated.
    ' Currently, it causes an error (if the comment apostrophe is removed) during rendering
    ' because the image control does not exist at the point when image URL is assigned.
    <DirectMethod()>
    Public Sub PopulateTab()
        Dim TextBox_tf As Ext.Net.TextField

        TextBox_tf = Ext.Net.X.GetCmp("TextField1")
        TextBox_tf.Text = "Item Details for " & AppGlobals.s_SelectedNodeName & ", Node ID: " & AppGlobals.l_SelectedNodeID & ", Node QTip: " & AppGlobals.s_SelectedNodeQTip
    End Sub


    <DirectMethod()>
    Sub HandleTreePanelSelection(ByVal NodeText_s As String, ByVal NodeID_s As String, ByVal NodeType_s As String)
        Dim TextBox_tf As Ext.Net.TextField

        TextBox_tf = Ext.Net.X.GetCmp("TextField1")
        TextBox_tf.Text = "Item Details for " & NodeText_s & ", Node ID: " & NodeID_s & ", Node Type: " & NodeType_s
    End Sub
</script>

<html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>Item Details</title>
        <link href="styles/stylesheet.css" rel="stylesheet" type="text/css" />
    </head>

    <body>
        <ext:ResourceManager ID="ResourceManager1" runat="server" />


        <form id="form1" runat="server">
            <ext:TextField ID="TextField1" Width="500px" runat="server" ></ext:TextField>
        </form>
    </body>
</html>

Here's the AppGlobals class (sits in the App_Code folder) that looks after global variables

Imports Microsoft.VisualBasic

' Contains my site's global variables.
Public NotInheritable Class AppGlobals
    Private Sub New()
    End Sub

    ' Global variables for storing important stuff.
    Shared SelectedNodeName_s As String
    Shared SelectedNodeID_l As Long
    Shared SelectedNodeQTip_s As String

    ' Get or set the static TreeView Selected Node Name.
    Public Shared Property s_SelectedNodeName() As String
        Get
            Return SelectedNodeName_s
        End Get

        Set(ByVal value As String)
            SelectedNodeName_s = value
        End Set
    End Property

    ' Get or set the static TreeView Selected Node ID.
    Public Shared Property l_SelectedNodeID() As Long
        Get
            Return SelectedNodeID_l
        End Get

        Set(ByVal value As Long)
            SelectedNodeID_l = value
        End Set
    End Property

    ' Get or set the static TreeView Selected Node ToolTip.
    Public Shared Property s_SelectedNodeQTip() As String
        Get
            Return SelectedNodeQTip_s
        End Get

        Set(ByVal value As String)
            SelectedNodeQTip_s = value
        End Set
    End Property
End Class

**Daniil** · Dec 20, 2011, 1:01 PM

Originally Posted by pyro

Here's the AppGlobals class (sits in the App_Code folder) that looks after global variables

I use VS 2010 and I'm not the best in VB.NET.

I can't see such predefined ASP.NET folder "App_Code". Or is it not a predefined folder and should I add it manually as a common folder?

Please clarify how it should look in VS 2010.

**pyro** · Dec 20, 2011, 1:24 PM

Hi Daniil,
Yes, you can just create the folder manually and put the VB class code in it (the filename is AppGlobals.vb). When I created Websites in VS2005 I'm pretty sure the App_Code and App_Data folders were created automatically but I had to make my own App_Code folder in VS2010.

I am only using that class to store the selected tree node in a static variable.

Sorry about the VB.

**Daniil** · Dec 21, 2011, 12:06 PM

Thanks, I was able to run the application.

Please clarify - the problem is the fact that "TextField1 is undefined" JS error occurs when a second tab is activated, right?

Thread: Updating autoloaded tab pages

Thread Tools

Search Thread

Display

Updating autoloaded tab pages

DeferredRender="false"

Example in code tags

App_Code Folder

Similar Threads

Access to the controls of an autoloaded page in a window?

updating of pages

Problem with Store and GridPanel when data is not autoloaded

How to merge AutoLoaded URL with parent window?

Access AutoLoaded window methods?

Tags for this Thread

Posting Permissions

Sitemap

Downloads

Resources

Thread: Updating autoloaded tab pages

Updating autoloaded tab pages

DeferredRender="false"

Example in code tags

App_Code Folder

Similar Threads

Tags for this Thread

Posting Permissions

Sitemap

Downloads

Resources

Stay connected with us