Code:
My main tree is in a master page - it's quite long so I've chopped a lot of it out:
<ext:BorderLayout ID="BorderLayout1" runat="server">
<West>
<ext:TreePanel ID="TreePanel1" runat="server" AutoDataBind="true" Height="300" EnableDD="true" Region="Center" RootVisible="false"
AnchorVertical="100%" AnchorHorizontal="100%" Icon="BookOpen" Animate="true" AutoScroll="true" UseArrows="true" ContainerScroll="true" ContextMenuID="TreeContextMenu">
<TopBar>
<ext:Toolbar ID="Toolbar2" runat="server">
<Items>
<ext:ToolbarTextItem ID="ToolbarTextItem1" runat="server" Text="Filter:" />
<ext:ToolbarSpacer />
<ext:TriggerField ID="TriggerField1" runat="server" EnableKeyEvents="true">
<Triggers>
<ext:FieldTrigger Icon="Clear" />
</Triggers>
<Listeners>
<KeyUp Fn="Cablesense.filterTree" Buffer="250" />
<TriggerClick Handler="clearFilter();" />
</Listeners>
</ext:TriggerField>
</Items>
</ext:Toolbar>
</TopBar>
<Loader>
<ext:WebServiceTreeLoader DataUrl="/LocationData/GetPhysicalStructure/" Json="true">
<BaseParams>
<ext:Parameter Name="type" Value="#{TreePanel1}.menuNode ? #{TreePanel1}.menuNode.id : ''" Mode="Raw" />
</BaseParams>
<Listeners>
<BeforeLoad Fn="Cablesense.setTypeOfLoadingNode"/>
</Listeners>
</ext:WebServiceTreeLoader>
</Loader>
<Root>
<ext:AsyncTreeNode NodeId="0" Text='<%# ViewBag.CompanyName %>' Expanded="true" Icon="World">
<CustomAttributes>
<ext:ConfigItem Name="type" Value="company" Mode="Value"></ext:ConfigItem>
</CustomAttributes>
</ext:AsyncTreeNode>
</Root>
<BottomBar>
<ext:StatusBar ID="StatusBar1" runat="server" AutoClear="5500" />
</BottomBar>
<Listeners>
<ContextMenu Fn="Cablesense.setupContextMenu"/>
<Click Fn="Cablesense.handleTreeNodeClicked" />
<ExpandNode Handler="#{StatusBar1}.setStatus({text: 'Node Expanded: <b>' + node.text + '<br />', clear: true});"
Delay="30" />
<CollapseNode Handler="#{StatusBar1}.setStatus({text: 'Node Collapsed: <b>' + node.text + '<br />', clear: true});" />
<Load Fn="Cablesense.treeDataLoaded" />
<MoveNode Fn="Cablesense.handleTreeNodeMove" />
</Listeners>
</ext:TreePanel>
</West>
<Center>
<ext:TabPanel ID="tpMain" runat="server" Region="Center" EnableTabScroll="true">
<Items>
<ext:Panel ID="MapTab" runat="server" Title="Map" Icon="Map" Border="false">
<Content>
<asp:ContentPlaceHolder ID="MainContent" runat="server" />
</Content>
<Listeners>
<Resize Fn="Cablesense.resizeMap" />
<Activate Handler="if (cs_map) cs_map.refreshMap();" />
</Listeners>
</ext:Panel>
</Items>
<Plugins>
<ext:TabCloseMenu ID="TabCloseMenu1" runat="server" />
</Plugins>
</ext:TabPanel>
</Center>
So in my center area, I have a TabPanel called tpMain (ignore the MapTab)
On page load, I call
CableSense.addTab({ title: 'Manage', url: '/Manage', icon: 'icon-asteriskred' });
Which then calls the Index action of the ManageController. This is where the receiving tree is:
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<ext:ResourceManager ID="ResourceManager1" runat="server" IDMode="Explicit" />
<ext:Viewport ID="ViewPort1" runat="server">
<Items>
<ext:ColumnLayout ID="ColumnLayout1" runat="server" Split="true" FitHeight="true">
<Columns>
<ext:LayoutColumn ColumnWidth="0.6">
<ext:Panel ID="CommandPanel" runat="server" Title="Cable-Sense Operations" Padding="10"
Frame="true" Layout="Form" LabelWidth="200">
<Items>
<ext:TreePanel ID="TreePanel1" runat="server" AutoDataBind="true" Height="300" RootVisible="true"
AnchorVertical="100%" AnchorHorizontal="100%" Icon="BookOpen" Animate="true" EnableDD="true"
AutoScroll="true" UseArrows="true" ContainerScroll="true">
<Root>
<ext:TreeNode AllowDrop="true" NodeID="0" Text='TODO: Get from the install location'
Expanded="False" Icon="World" Expandable="true">
<CustomAttributes>
<ext:ConfigItem Name="type" Value="root" Mode="Value" />
</CustomAttributes>
</ext:TreeNode>
</Root>
<%-- <Listeners/>
<Loader>
<ext:WebServiceTreeLoader DataUrl="/LocationData/GetPhysicalStructure/" Json="true">
<BaseParams>
<ext:Parameter Name="type" Value="#{HorizTree}.menuNode ? #{HorizTree}.menuNode.id : ''" Mode="Raw" />
</BaseParams>
<Listeners>
<BeforeLoad Fn="SCUController.setTypeOfLoadingNode" />
</Listeners>
</ext:WebServiceTreeLoader>
</Loader>--%>
</ext:TreePanel>
... rest of page
The addTab function is taken from your MVC sample:
addTab: function (config) {
if (Ext.isEmpty(config.url, false)) {
return;
}
var tp = Ext.getCmp('tpMain');
var id = this.hashCode(config.url);
var tab = tp.getComponent(id);
if (!tab) {
tab = tp.addTab({
id: id.toString(),
title: config.title,
iconCls: config.icon || 'icon-applicationdouble',
closable: true,
autoLoad: {
showMask: true,
url: config.url,
mode: 'iframe',
noCache: true,
maskMsg: "Loading '" + config.title + "'...",
scripts: true,
passParentSize: config.passParentSize
}
});
} else {
tp.setActiveTab(tab);
Ext.get(tab.tabEl).frame();
}
},