Update Panel Content from Click

  1. #1

    Update Panel Content from Click

    I am trying to change the url content of a panel on the page by the user clicking on a tree node in a TreePanel.

    A typical portal type page where the user will select an item from the tree on the left side and a panel on the right side will load it's content based on the url provided.

    In the case below, if the user click 'Dashboard', google will load in the panel.

    I have set the HrefTarget of the tree node to the name of the panel (contentPanel). Not working, so I am missing something.

    Any help is appreciated.

    Thanks, Rick..


    
    <%@ Page Language="C#" %>
    <%@ Import Namespace="Ext.Net.Utilities" %>
    <%@ 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">
      <body>
        <form id="Form1" runat="server">
          <ext:ResourceManager ID="ResourceManager1" runat="server" />
          <ext:Viewport ID="Viewport1" runat="server" StyleSpec="background-color: transparent;">
            <Items>
              <ext:BorderLayout ID="BorderLayout1" runat="server">
                <West Collapsible="true" Split="true" MinWidth="155" MaxWidth="400" MarginsSummary="31 0 5 5"
                      CMarginsSummary="31 5 5 5">
                  <ext:Panel runat="server" Title="Left Side" Layout="FitLayout" Width="180" ID="pnlSettings">
                    <Items>
                      <ext:TreePanel 
                        ID="tree" 
                        runat="server" >
                        <Root>
                          <ext:TreeNode Text="Dashboard" Icon="World" Href="http://www.google.com" HrefTarget="contentPanel" Expanded="true">
                          </ext:TreeNode>
                        </Root>
                      </ext:TreePanel>
                    </Items>
                  </ext:Panel>
                </West>
                <Center MarginsSummary="5 5 5 0">
                    <ext:Panel ID="contentPanel" runat="server" Title="Main" Icon="TransmitBlue" BodyStyle="background-color: transparent;"
                                Layout="Fit">
                    <AutoLoad Url="http://yahoo.com" Mode="IFrame" />
                    </ext:Panel>
                </Center>
              </ext:BorderLayout>
            </Items>
          </ext:Viewport>
        </form>
      </body>
    </html>
  2. #2
    Does anyone have any suggestions? I just want to, via a tree node click, change the URL Content of a panel within the ViewPort. Still hung up on that.

    Thanks,

    Rick..
  3. #3
    Hi,

    Welcome to Ext.Net!:)

    Regarding the question.

    A TreeNode's .HrefTarget expects "_blank", "_parent", etc.

    Hope this example helps you to start.

    Example

    <%@ Page Language="C#" %>
    
    <%@ 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>
        <title>Ext.Net Example</title>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
            <ext:Viewport runat="server" Layout="BorderLayout">
                <Items>
                    <ext:Panel 
                        runat="server" 
                        Region="West" 
                        Width="180"
                        Layout="FitLayout">
                        <Items>
                            <ext:TreePanel runat="server" RootVisible="false">
                                <Root>
                                    <ext:TreeNode>
                                        <Nodes>
                                            <ext:TreeNode Text="Rambler" >
                                                <CustomAttributes>
                                                    <ext:ConfigItem 
                                                        Name="url" 
                                                        Value="http://www.rambler.com" 
                                                        Mode="Value" />
                                                </CustomAttributes>    
                                            </ext:TreeNode>
                                            <ext:TreeNode Text="Ext.Net">
                                                <CustomAttributes>
                                                    <ext:ConfigItem 
                                                        Name="url" 
                                                        Value="http://www.ext.net" 
                                                        Mode="Value" />
                                                </CustomAttributes>    
                                            </ext:TreeNode>
                                        </Nodes>
                                    </ext:TreeNode>
                                </Root>
                                <Listeners>
                                    <Click Handler="Panel1.load({
                                                        mode : 'iframe',
                                                        url : node.attributes.url
                                                    });" />
                                </Listeners>
                            </ext:TreePanel>
                        </Items>
                    </ext:Panel>
                    <ext:Panel ID="Panel1" runat="server" Region="Center">
                        <AutoLoad Url="http://yahoo.com" Mode="IFrame" ShowMask="true" />
                    </ext:Panel>
                </Items>
            </ext:Viewport>
        </form>
    </body>
    </html>
  4. #4
    Awesome, that worked! Thank you so much for the help.

    Rick..
  5. #5
    Glad to help.
    Last edited by geoffrey.mcgill; Oct 23, 2011 at 2:41 AM.

Similar Threads

  1. Replies: 29
    Last Post: Feb 01, 2012, 4:58 PM
  2. Replies: 0
    Last Post: Oct 19, 2010, 7:39 AM
  3. [0.8] Update content with AjaxEvent.
    By mojo in forum 1.x Help
    Replies: 0
    Last Post: Oct 14, 2010, 3:01 PM
  4. [CLOSED] How to update panel content during directevent
    By jmcantrell in forum 1.x Legacy Premium Help
    Replies: 7
    Last Post: Oct 06, 2010, 1:32 PM
  5. [0.8.2] Update Content
    By thchuong in forum 1.x Help
    Replies: 2
    Last Post: Jun 18, 2010, 2:31 AM

Tags for this Thread

Posting Permissions