Nov 24, 2011, 10:41 AM
[CLOSED] Switching between partial views on a tree panel
hey guys I have two partials which both contain grids whose stores are filtered so only data for that node is displayed. The problem I have is I can't switch between the partial views so when I click on a different child node (this is case Test1 -> Test3) it doesn't render on screen. I used to use a panel.update() but this cause issues with my grid which Daniil helped me fix heres a sample of my code.
Controller
Controller
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Ext.Net;
namespace TestTemplate.Controllers
{
public class TestController : Controller
{
public ActionResult Save(string containerId, string parentNode, string node)
{
switch (parentNode)
{
case "Test":
{
Ext.Net.MVC.PartialViewResult p = new Ext.Net.MVC.PartialViewResult(containerId, RenderMode.AddTo);
p.ViewName = "TestPartial";
p.SingleControl = true;
p.ViewData.Model = new TestTemplate.ViewModel.TestViewModel();
return p;
}
case "Test3":
{
Ext.Net.MVC.PartialViewResult p = new Ext.Net.MVC.PartialViewResult(containerId, RenderMode.AddTo);
p.ViewName = "TestPartial2";
p.SingleControl = true;
p.ViewData.Model = new TestTemplate.ViewModel.TestViewModel();
return p;
}
default: return null;
}
}
}
}
MainView<%@ Page Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if (!X.IsAjaxRequest)
{
this.Store1.DataSource = this.Data;
this.Store2.DataSource = this.Data;
this.Store1.DataBind();
this.Store2.DataBind();
Ext.Net.TreeNode root = new Ext.Net.TreeNode("Fact Find");
root.Expanded = true;
this.FactFindTreePanel.Root.Add(root);
var Test = new Ext.Net.TreeNode("Test");
Test.AllowChildren = true;
Test.NodeID = "Test";
root.Nodes.Add(Test);
var Test3 = new Ext.Net.TreeNode("Test3");
Test3.AllowChildren = true;
Test3.NodeID = "Test3";
root.Nodes.Add(Test3);
var Test1 = new Ext.Net.TreeNode("Test1");
Test1.AllowChildren = false;
Test1.Listeners.Click.Handler = "treeNodeSelect(node);";
Test1.NodeID = "Test1";
Test.Nodes.Add(Test1);
Test3.Nodes.Add(Test1);
var Test2 = new Ext.Net.TreeNode("Test2");
Test2.Listeners.Click.Handler = "treeNodeSelect(node);";
Test2.AllowChildren = false;
Test2.NodeID = "3m Co";
Test.Nodes.Add(Test2);
Test3.Nodes.Add(Test2);
}
}
private object[] Data
{
get
{
return new object[]
{
new object[] { "3m Co", 71.72, 0.02, 0.03, "9/1 12:00am" },
};
}
}
</script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<ext:Store ID="Store2" runat="server">
<Reader>
<ext:ArrayReader>
<Fields>
<ext:RecordField Name="company" />
<ext:RecordField Name="price" Type="Float" />
<ext:RecordField Name="change" Type="Float" />
<ext:RecordField Name="pctChange" Type="Float" />
<ext:RecordField Name="lastChange" Type="Date" DateFormat="M/d hh:mmtt" />
</Fields>
</ext:ArrayReader>
</Reader>
</ext:Store>
<ext:Store ID="Store1" runat="server">
<Reader>
<ext:ArrayReader>
<Fields>
<ext:RecordField Name="company" />
<ext:RecordField Name="price" Type="Float" />
<ext:RecordField Name="change" Type="Float" />
<ext:RecordField Name="pctChange" Type="Float" />
<ext:RecordField Name="lastChange" Type="Date" DateFormat="M/d hh:mmtt" />
</Fields>
</ext:ArrayReader>
</Reader>
</ext:Store>
<ext:Viewport ID="FactFindViewport" runat="server" Layout="BorderLayout">
<Items>
<ext:TreePanel ID="FactFindTreePanel" runat="server" Title="Fact Find" Region="West"
Width="200">
<DirectEvents>
<Click CleanRequest="true" Url="~/Test/Save">
<ExtraParams>
<ext:Parameter Name="containerId" Value="#{mainPanel}.id" Mode="Raw" />
<ext:Parameter Name="node" Value="node.id" Mode="Raw" />
<ext:Parameter Name="parentNode" Value="node.parentNode.id" Mode="Raw" />
</ExtraParams>
</Click>
</DirectEvents>
</ext:TreePanel>
<ext:Panel runat="server" Width="700" Region="Center" ID="mainPanel" Layout="FitLayout">
<BottomBar>
<ext:Toolbar runat="server">
<Items>
<ext:Button runat="server" Icon="Bug">
<Listeners>
<Click Handler="debugger" />
</Listeners>
</ext:Button>
</Items>
</ext:Toolbar>
</BottomBar>
</ext:Panel>
</Items>
</ext:Viewport>
<script src="<%=Url.Content("~/Scripts/view/Test.js") %>" type="text/javascript">
</script>
</asp:Content>
PartialView 1<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<TestTemplate.ViewModel.TestViewModel>" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
}
</script>
<ext:Container ID="Container1" runat="server">
<Items>
<ext:Checkbox ID="Checkbox1" runat="server" FieldLabel="Not Disclosed" />
<ext:GridPanel ID="Test" BufferResize="500" Title="Bank & Building Society" runat="server"
StoreID="Store1">
<ColumnModel>
<Columns>
<ext:Column ColumnID="Company" Header="Company" DataIndex="company" />
<ext:Column Header="Price" DataIndex="price" />
<ext:Column ColumnID="Change" Header="Change" DataIndex="change" />
</Columns>
</ColumnModel>
<View>
<ext:GridView ForceFit="true" />
</View>
</ext:GridPanel>
</Items>
</ext:Container>
PartialView 2<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<TestTemplate.ViewModel.TestViewModel>" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
}
</script>
<ext:Container ID="Container1" runat="server">
<Items>
<ext:Checkbox ID="Checkbox1" runat="server" FieldLabel="Not Disclosed" />
<ext:GridPanel ID="Test" BufferResize="500" Title="Bank & Building Society" runat="server"
StoreID="Store2">
<ColumnModel>
<Columns>
<ext:Column ColumnID="Test1" Header="Company" DataIndex="company" />
<ext:Column Header="Test2" DataIndex="price" />
<ext:Column ColumnID="Test3" Header="Change" DataIndex="change" />
</Columns>
</ColumnModel>
<View>
<ext:GridView ForceFit="true" />
</View>
</ext:GridPanel>
</Items>
</ext:Container>
My js file// <reference name="Ext.Net.Build.Ext.Net.extjs.adapter.ext.ext-base.js" assembly="Ext.Net" />
/// <reference name="Ext.Net.Build.Ext.Net.extjs.ext-all-debug.js" assembly="Ext.Net" />
/// <reference name="Ext.Net.Build.Ext.Net.extnet.extnet-core-debug.js" assembly="Ext.Net" />
/// <reference name="Ext.Net.Build.Ext.Net.extnet.extnet-data-debug.js" assembly="Ext.Net" />
/// <reference path="site_master.js" />
var treeNodeSelect = function (node) {
node.select();
if (node.parentNode.id == "Test") {
ids = node.id;
Store1.clearFilter();
Store1.filter('company', ids);
}
if (node.parentNode.id == "Test3") {
ids = node.id;
Store1.clearFilter();
Store1.filter('company', ids);
}
}
Heres the sitemaster<%@ Master Language="C#" Inherits="System.Web.Mvc.ViewMasterPage" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<style type="text/css">
.my-grid .x-grid3-cell-inner { white-space: normal; }
.ext-ie .button-fix table.x-btn, .ext-gecko .button-fix table.x-btn { top: 0px; }
.ext-ie .button-fix .x-form-text, .ext-gecko .button-fix .x-form-text { margin-top: 1px; }
.list-item { font: normal 11px tahoma, arial, helvetica, sans-serif; padding: 3px 10px 3px 10px; border: 1px solid #fff; border-bottom: 1px solid #eeeeee; white-space: normal; color: #555; }
.list-item h3 { display: block; font: inherit; font-weight: bold; color: #222; }
.ext-el-mask { filter: alpha(opacity=80) !important; width: 100% !important; -moz-opacity: 0.8 !important; opacity: 0.8 !important; }
.x-fieldset-no-padding { padding-left: 0px !important; padding-right: 0px !important; }
</style>
<title>
<asp:ContentPlaceHolder ID="TitleContent" runat="server" />
</title>
</head>
<body>
<ext:ResourceManager ID="ResourceManager1" runat="server" IDMode="Explicit" Theme="Default"
GZip="true" CleanResourceUrl="true" ScriptMode="Debug" SourceFormatting="true" />
<asp:ContentPlaceHolder ID="MainContent" runat="server" />
</body>
</html>
Thanks
Last edited by Daniil; Nov 26, 2011 at 3:24 PM.
Reason: [CLOSED]