What's New?

[CLOSED] How to open a URL from treeNode in center panel of a viewport?

  1. #1
    Sep 24, 2009, 6:23 PM

    [CLOSED] How to open a URL from treeNode in center panel of a viewport?

    I'm currently using a treePanel in the left layout pane with a blank center pane, all contained within a viewport.

    I am doing this pretty much 100% in the codebehind. I have almost no extjs experience.


    When i click on a treeNode, i'd like for a URL to open in the center pane of my viewport.




  2. #2
    Sep 24, 2009, 6:43 PM

    RE: [CLOSED] How to open a URL from treeNode in center panel of a viewport?

    Hi Dave Ko,

    The Examples Explorer works kinda this way. Can you use that as a base to start from?


    Geoffrey McGill
    Founder
    Ext.NETASP.NET UI Component framework
    RetypeDocumentation website generator
    MojeeLightning fast Emoji library for .NET
    Ext.NET Examples|Ext.NET API Docs|ExtJS API Docs|Twitter
  3. #3
    Sep 24, 2009, 6:45 PM

    RE: [CLOSED] How to open a URL from treeNode in center panel of a viewport?

    Yes, except the explorer itself doesn't seem to have a handy "view source" button :)
  4. #4
    Sep 24, 2009, 6:47 PM

    RE: [CLOSED] How to open a URL from treeNode in center panel of a viewport?

    Dave Ko (9/24/2009) Yes, except the explorer itself doesn't seem to have a handy "view source" button :)
    The full source code for Examples Explorer is provided in the download (http://www.ext.net/download/) and the latest build is available via svn.


    Hope this helps.


    Geoffrey McGill
    Founder
    Ext.NETASP.NET UI Component framework
    RetypeDocumentation website generator
    MojeeLightning fast Emoji library for .NET
    Ext.NET Examples|Ext.NET API Docs|ExtJS API Docs|Twitter
  5. #5
    Sep 24, 2009, 8:20 PM

    RE: [CLOSED] How to open a URL from treeNode in center panel of a viewport?

    Hmmm. I tried going through this and there seems to be a lot of code i'd rather not wade through.

    Perhaps i can be a little more specific. Lets say I have

    Dim tree as new TreePanel
Dim rootNode as new TreeNode
tree.Root.Add(rootNode)
Dim node as new TreeNode("Test Node")
rootNode.Nodes.Add(node)

Dim center as New Panel
Dim layout as new BorderLayout
layout.west.items.add(tree)
layout.center.items.add(center)
Me.Viewport1.Items.Add(layout)
    Now all I want to do is to click on a node and have it open some URL (lets say... "test.aspx") in the Center panel.

    I'm assuming i have to define a click handler in the treePanel listeners property. I have absolutely no clue how that works syntax wise. (sorry!). Is this server side code? Or do i have to inject some javascript that will handle this?

    thanks!

  6. #6
    Sep 24, 2009, 11:03 PM

    RE: [CLOSED] How to open a URL from treeNode in center panel of a viewport?

    Here's a fairly basic example of clicking on a TreeNode and having a webpage load in the Center Panel.

    Example

    <%@ Page Language="C#" %>

<%@ Import Namespace="Panel=Coolite.Ext.Web.Panel" %>

<%@ Register Assembly="Coolite.Ext.Web" Namespace="Coolite.Ext.Web" 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>Example</title>
    
    <script type="text/javascript">
        var loadPanel = function (node, e) {
            if (node.isLeaf()) { 
                e.stopEvent(); 
                Panel1.loadContent({
                    url  : node.attributes.href,
                    mode : "iframe"
                });
                
                Panel1.setTitle(node.text);
            }
        };
    </script>
</head>
<body>
    <ext:ScriptManager runat="server" />
    
    <ext:ViewPort ID="ViewPort1" runat="server">
        <Body>
            <ext:BorderLayout runat="server">
                <West Split="True">
                    <ext:TreePanel runat="server" Title="Options" Icon="World" Width="185">
                        <Root>
                            <ext:TreeNode Text="Websites" Expanded="true">
                                <Nodes>
                                    <ext:TreeNode Text="Coolite" Href="http://www.ext.net/" Leaf="true" />
                                    <ext:TreeNode Text="ExtJS" Href="http://www.extjs.com/" Leaf="true" />
                                    <ext:TreeNode Text="Datejs" Href="http://www.datejs.com/" Leaf="true" />
                                </Nodes>
                            </ext:TreeNode>
                        </Root>
                        <Listeners>
                            <Click Fn="loadPanel" />
                        </Listeners>
                    </ext:TreePanel>
                </West>
                <Center>
                    <ext:Panel ID="Panel1" runat="server" Title="Select a Website" />
                </Center>
            </ext:BorderLayout>
        </Body>
    </ext:ViewPort>
</body>
</html>
    Hope this helps.

    Geoffrey McGill
    Founder
    Ext.NETASP.NET UI Component framework
    RetypeDocumentation website generator
    MojeeLightning fast Emoji library for .NET
    Ext.NET Examples|Ext.NET API Docs|ExtJS API Docs|Twitter
  7. #7
    Sep 25, 2009, 3:51 AM

    RE: [CLOSED] How to open a URL from treeNode in center panel of a viewport?

    excellent.. this is EXACTLY what i needed! Thanks!

Similar Threads

  1. [CLOSED] How to take up the whole area of the center region panel of a viewport
    By RCM in forum 2.x Legacy Premium Help
    Replies: 2
    Last Post: Jun 18, 2012, 6:43 PM
  2. Add ExtJS Dinamic Grid to Ext.Net Viewport in Center Region
    By inaltec in forum 1.x Help
    Replies: 5
    Last Post: Mar 22, 2012, 2:12 PM
  3. [CLOSED] Center tablelayout in viewport
    By CarWise in forum 1.x Legacy Premium Help
    Replies: 5
    Last Post: Apr 01, 2011, 12:04 PM
  4. Visual Studio crashes when control placed in Center of BorderLayout in ViewPort
    By CooliteFan in forum 1.x Help
    Replies: 0
    Last Post: Mar 17, 2009, 5:30 PM
  5. Dynamic viewport's center area
    By testix in forum 1.x Help
    Replies: 1
    Last Post: Jan 19, 2009, 12:34 PM

Posting Permissions