Question

I have seen Ext.net’s examples site in which each new page is added as a tab/page in a TabPanel control.

Instead of that, I would like to have a TabPanel with only one tab/panel which would show contents of a page. I have copied my existing code of

• TreePanel Definition
• CodeBehind to Populate TreePanel Data From SiteMap
• TabPanel Definition

In this scenario, how do I load a URL inside the control “MainPanel”?

TreePanel Definition

<ext:TreePanel ID="MenuTree" runat="server" Height="300" Width="250" UseArrows="true"
    AutoScroll="true" Animate="true" EnableDD="true" ContainerScroll="true" RootVisible="false">
    <TopBar>
        <ext:Toolbar runat="server">
            <Items>
                <ext:ToolbarTextItem runat="server" Text="<%$Resources:OneResource, Search %>" />
                <ext:ToolbarSpacer />
                <ext:TriggerField ID="TriggerField1" runat="server" EnableKeyEvents="true">
                    <Triggers>
                        <ext:FieldTrigger Icon="Clear" />
                    </Triggers>
                    <Listeners>
                        <KeyUp Fn="filterTree" Buffer="250" />
                        <TriggerClick Handler="clearFilter();" />
                    </Listeners>
                </ext:TriggerField>
                <ext:ToolbarSpacer />
                <ext:LinkButton ID="PreviewLinkButton" runat="server" Text="<%$Resources:OneResource, Preview %>" />
            </Items>
        </ext:Toolbar>
    </TopBar>
</ext:TreePanel>

CodeBehind to Populate TreePanel Data From SiteMap

protected void Page_Load(object sender, EventArgs e)
{
    Ext.Net.TreeNode root = this.CreateNode(SiteMap.RootNode);
    root.Draggable = false;
    root.Expanded = true;
    MenuTree.Root.Add(root);
    MenuTree.ExpandAll();
}

/// <summary>
/// Creates nodes from sitemap data
/// </summary>
/// <param name="siteMapNode">Pass the root node of Web.sitemap</param>
/// <returns></returns>
private Ext.Net.TreeNode CreateNode(SiteMapNode siteMapNode)
{
    Ext.Net.TreeNode treeNode = new Ext.Net.TreeNode();
    treeNode.NodeID = siteMapNode.Key;
    treeNode.Text = siteMapNode.Title;
    treeNode.Qtip = siteMapNode.Description;
    treeNode.Href = siteMapNode.Url;
    treeNode.Icon = this.GetIcon(siteMapNode["menuId"].ToString());
    SiteMapNodeCollection children = siteMapNode.ChildNodes;
    if (children != null && children.Count > 0)
    {
        foreach (SiteMapNode mapNode in siteMapNode.ChildNodes)
        {
            treeNode.Nodes.Add(this.CreateNode(mapNode));
        }
    }
    return treeNode;
}

TabPanel Definition

<ext:TabPanel ID="ContentTabPanel" runat="server" Region="Center" Margins="0 4 4 0" EnableTabScroll="true"
    MinTabWidth="85">
    <Items>
        <ext:Panel ID="MainPanel" runat="server" Title="<%$Resources:OneResource, Dashboard %>"
            Icon="Application">
            <AutoLoad Mode="IFrame" Url="~/Admin/Index.aspx" ShowMask="false" />
        </ext:Panel>
    </Items>
    <Plugins>
        <ext:TabCloseMenu runat="server" />
    </Plugins>
</ext:TabPanel>

Answer 1

You can do this in two ways:

1) Client side:

MainPanel.autoLoad.url = 'http://www.someurl.com';
MainPanel.reload();

2) Via DirectEvent or DirectMethod on server side:

MainPanel.AutoLoad.Url = "http://www.someurl.com";
MainPanel.Reload();