[CLOSED] Multiple partial views on single page

I've got several partial views that I need to include on the same page - they all work individually but the layout breaks when they are all included... the code is as follows:

Code:

@(Html.X().Panel() .Collapsible(true) .ID("pnlEditServiceDetails") .Layout(LayoutType.Container) .Title("SERVICE DETAILS") .AutoHeight(true) .Items(sections => { sections.Add(Html.X().Container() .ID("BasicServiceDetails") .Layout(LayoutType.Column) .Padding(10) .AutoHeight(true) .Margins("0 0 0 10") .Items(containers => { containers.Add(Html.X().Container() .Layout(LayoutType.Anchor) .Cls("droppable") .Items(items => { items.Add(Html.X().Panel() .ID("pnlBasicServiceDetails") .ContentFromPage(this, "/Views/Shared/_BasicServiceDetailsPanel.cshtml")); })); containers.Add(Html.X().Container() .Layout(LayoutType.Anchor) .Cls("droppable") .Items(items => { items.Add(Html.X().Panel() .ID("pnlPlaceDetails") .ContentFromPage(this, "/Views/Shared/_PlaceDetailsPanel.cshtml")); })); containers.Add(Html.X().Container() .Layout(LayoutType.Anchor) .Cls("droppable") .Items(items => { items.Add(Html.X().Panel() .ID("pnlRecurringCharges") .ContentFromPage(this, "/Views/Shared/_RecurringChargesPanel.cshtml")); })); containers.Add(Html.X().Container() .Layout(LayoutType.Anchor) .Cls("droppable") .Items(items => { items.Add(Html.X().Panel() .ID("pnlContractDetails") .ContentFromPage(this, "/Views/Shared/_ContractDetailsPanel.cshtml")); })); })); }) )

Hi,

ColumnLayout requires Width or ColumnWidth to be set up for its items. The ColumnWidths must always add up to 1 (or 100%) when added together, otherwise your layout may not render as expected.
http://docs.sencha.com/ext-js/4-1/#!...ntainer.Column

That doesn't appear to be the problem - I'm basically trying to refactor some code into partial views and it's not working as expected. The original code is:

Container View:

Code:

@{ Layout = null; } <!DOCTYPE html> <html> <head> <title>Manager</title> <link rel="stylesheet" type="text/css" href="/resources/css/main.css" /> <script type="text/javascript" src="/resources/js/site.js"></script> <style type="text/css"> .invite { background-color : #99bbe8 !important; } .x-drop-marker { background-color : silver; } </style> <script type="text/javascript"> var notifyDrop = function (source, e, data) { var targetCt = Ext.getCmp(this.el.dom.id), targetPanel = targetCt.items.get(0), sourceCt = data.panel.ownerCt; sourceCt.add(targetPanel); targetCt.add(data.panel); Ext.defer(function () { targetPanel.doLayout(); data.panel.doLayout(); }, 1); }; var startDrag = function () { Ext.select(".droppable").addCls("x-drop-marker"); Ext.select(".draggable").hide(); this.panelProxy.moveOnDrag = false; }; var endDrag = function () { Ext.select(".droppable").removeCls("x-drop-marker"); Ext.select(".draggable").show(); Ext.panel.DD.prototype.endDrag.apply(this, arguments); }; </script> </head> <body> <div> @(Html.X().ResourceManager() .Theme(Theme.Gray) ) @(Html.X().Panel() .Collapsible(true) .ID("pnlBasicServiceDetails") .Layout(LayoutType.Container) .Title("SERVICE DETAILS") .AutoHeight(true) .Items(sections => { sections.Add(Html.X().Container() .ID("BasicServiceDetails") .Layout(LayoutType.Column) .ContentFromPage(this, "/Views/Shared/_BasicServiceDetails.cshtml")); }) ) @(Html.X().DropTarget() .Target("${.droppable}") .Group("panelDD") .OverClass("invite") .NotifyDrop(notifyDrop => { notifyDrop.Fn = "notifyDrop"; }) .NotifyOut(notifyOut => { notifyOut.Handler = "this.el.removeCls('invite');"; }) .NotifyOver(notifyOver => { notifyOver.Handler = "Ext.select('.droppable').removeCls('invite'); this.el.addCls('invite');"; })) </div> </body> </html>

_BasicServiceDetails.cshtml

Code:

@{var outer = Html.X().Container() .ID("pnlBasicServiceDetails") .Layout(LayoutType.Column) .Padding(10) .AutoHeight(true) .Margins("0 0 0 10") .Items(containers => { containers.Add(Html.X().Container() .Layout(LayoutType.Fit) .Cls("droppable") .Items(p => { p.Add(Html.X().Panel() .ID("pnlServiceDetails") .Layout(LayoutType.Column) .Title("BASIC SERVICE DETAILS") .Cls("draggable") .Padding(4) .Width(800) .AutoHeight(true) .Margins("4 0 4 4") .BodyPadding(4) .Items(items => { items.Add(Html.X().FieldContainer() .Layout(LayoutType.Anchor) .ColumnWidth(0.4) .Items(fields => { fields.Add(Html.X().NumberField() .ID("txtServiceId") .FieldLabel("Service Id") .LabelAlign(LabelAlign.Top) .Cls("form-label") .Width(75) .LabelWidth(200) .ReadOnly(true) .Margins("0 0 4 4")); fields.Add(Html.X().TextField() .ID("txtServiceReference") .LabelAlign(LabelAlign.Top) .FieldLabel("Service Reference") .Width(300) .LabelWidth(200) .Cls("form-label") .Margins("0 0 4 4")); fields.Add(Html.X().TextField() .ID("txtServiceName") .FieldLabel("Service Name") .LabelAlign(LabelAlign.Top) .Cls("form-label") .Width(300) .LabelWidth(200) .Margins("0 0 4 4")); fields.Add(Html.X().TextField() .ID("txtServiceAlias") .LabelAlign(LabelAlign.Top) .FieldLabel("Service Alias") .Width(300) .LabelWidth(200) .Cls("form-label") .Margins("0 0 4 4")); })); items.Add(Html.X().FieldContainer() .Layout(LayoutType.Anchor) .ColumnWidth(0.3) .Margins("0 0 0 8") .Items(fields => { fields.Add(Html.X().ComboBox() .FieldLabel("Service Status") .LabelAlign(LabelAlign.Top) .ID("ddlServiceStatus") .Margins("0 0 0 0") .LabelWidth(200) .Width(200) .EmptyText("--- Please Select ---") .Cls("form-label") .DisplayField("ServiceStatusName") .ValueField("ServiceStatusId") .Store(store => store.Add(Html.X().Store() .AutoLoad(true) .Proxy(proxy => proxy.Add(Html.X().AjaxProxy() .Url("/Services/RetrieveServiceStatuses/") .Reader(reader => reader.Add(Html.X().JsonReader() .Root("data") .TotalProperty("total") )) )) .Model(model => model.Add(Html.X().Model() .Fields(modelFields => { modelFields.Add(Html.X().ModelField().Name("ServiceStatusID")); modelFields.Add(Html.X().ModelField().Name("ServiceStatusName")); }) )) ) ) ); fields.Add(Html.X().ComboBox() .FieldLabel("Commercial Status") .LabelAlign(LabelAlign.Top) .ID("ddlCommercialStatus") .Margins("0 0 0 0") .LabelWidth(200) .Width(200) .EmptyText("--- Please Select ---") .Cls("form-label") .DisplayField("CommercialStatusName") .ValueField("CommercialStatusId") .Store(store => store.Add(Html.X().Store() .AutoLoad(true) .Proxy(proxy => proxy.Add(Html.X().AjaxProxy() .Url("/Services/RetrieveCommercialStatuses/") .Reader(reader => reader.Add(Html.X().JsonReader() .Root("data") .TotalProperty("total") )) )) .Model(model => model.Add(Html.X().Model() .Fields(modelFields => { modelFields.Add(Html.X().ModelField().Name("CommercialStatusID")); modelFields.Add(Html.X().ModelField().Name("CommercialStatusName")); }) )) ) ) ); fields.Add(Html.X().TextField() .FieldLabel("Parent Product Type") .LabelAlign(LabelAlign.Top) .ID("txtParentProductType") .Margins("0 0 0 0") .LabelWidth(200) .Width(200) .Cls("form-label")); })); }) ); } )); containers.Add(Html.X().Container() .Layout(LayoutType.Fit) .Cls("droppable") .Items(p => { p.Add(Html.X().Panel() .Draggable(true) .AutoHeight(true) .ID("pnlPlaceDetails") .Layout(LayoutType.Column) .Title("PLACE DETAILS") .Cls("draggable") .Padding(4) .Width(800) .Margins("4 0 4 4")); })); containers.Add(Html.X().Container() .Layout(LayoutType.Fit) .Cls("droppable") .Items(p => { p.Add(Html.X().Panel() .ID("pnlContractDetails") .Layout(LayoutType.Column) .Title("CONTRACT DETAILS") .Cls("draggable") .Padding(4) .Width(800) .AutoHeight(true) .Margins("4 0 4 4") .BodyPadding(4) .Items(items => { items.Add(Html.X().FieldContainer() .Layout(LayoutType.Anchor) .ColumnWidth(0.4) .Margins("0 0 0 8") .Items(fields => { fields.Add(Html.X().NumberField() .ID("txtQuotedLeadTime") .FieldLabel("Quoted Lead Time (weeks)") .LabelAlign(LabelAlign.Top) .LabelCls("numberFieldWidth") .Cls("form-label") .Width(75) .LabelWidth(300) .Margins("0 0 4 4")); fields.Add(Html.X().DateField() .ID("txtCustomerCommitDate") .FieldLabel("Customer Commit Date") .LabelAlign(LabelAlign.Top) .Cls("form-label") .LabelWidth(200) .Margins("0 0 4 4")); fields.Add(Html.X().DateField() .ID("txtForecastDate") .FieldLabel("Forecasted Date") .LabelAlign(LabelAlign.Top) .Cls("form-label") .LabelWidth(200) .Margins("0 0 4 4")); })); items.Add(Html.X().FieldContainer() .Layout(LayoutType.Anchor) .ColumnWidth(0.3) .Margins("0 0 0 8") .Items(fields => { fields.Add(Html.X().NumberField() .ID("txtContractTermMonth") .FieldLabel("Contract Term (months)") .LabelAlign(LabelAlign.Top) .LabelCls("numberFieldWidth") .Cls("form-label") .Width(75) .LabelWidth(300) .Margins("0 0 4 4")); fields.Add(Html.X().DateField() .ID("txtContractExpiryDate") .FieldLabel("Contract Expiry Date") .LabelAlign(LabelAlign.Top) .Cls("form-label") .LabelWidth(200) .Margins("0 0 4 4")); fields.Add(Html.X().DateField() .ID("txtImplementedDate") .FieldLabel("Implemented Date") .LabelAlign(LabelAlign.Top) .Cls("form-label") .LabelWidth(200) .Margins("0 0 4 4")); })); })); })); containers.Add(Html.X().Container() .Layout(LayoutType.Fit) .Cls("droppable") .Items(p => { p.Add(Html.X().Panel() .Draggable(true) .ID("pnlRecurringCharges") .Layout(LayoutType.Column) .Title("RECURRING CHARGES") .Cls("draggable") .Padding(4) .Width(800) .AutoHeight(true) .Margins("4 0 4 4") .BodyPadding(4) .Items(items => { items.Add(Html.X().FieldContainer() .Layout(LayoutType.Anchor) .ColumnWidth(0.4) .Margins("0 0 0 8") .Items(fields => { fields.Add(Html.X().DateField() .ID("txtPricingLineStartDate") .FieldLabel("Pricing Line Start Date") .LabelAlign(LabelAlign.Top) .Cls("form-label") .LabelWidth(200) .Margins("0 0 4 4")); fields.Add(Html.X().DateField() .ID("txtPricingLineEndDate") .FieldLabel("Pricing Line End Date") .LabelAlign(LabelAlign.Top) .Cls("form-label") .LabelWidth(200) .Margins("0 0 4 4")); //monthly, yearly, quarterly fields.Add(Html.X().ComboBox() .FieldLabel("Invoice Frequency") .LabelAlign(LabelAlign.Top) .ID("ddlInvoiceFrequency") .Margins("0 0 0 0") .LabelWidth(200) .Width(200) .EmptyText("--- Please Select ---") .Cls("form-label") .Items(dd => { dd.Add(new ListItem("Daily", "2")); dd.Add(new ListItem("Weekly", "3")); dd.Add(new ListItem("Fortnightly", "4")); dd.Add(new ListItem("Monthly", "5")); dd.Add(new ListItem("BiMonthly", "6")); dd.Add(new ListItem("Quarterly", "7")); dd.Add(new ListItem("Annually", "8")); dd.Add(new ListItem("Biennially", "9")); })); //in advance, in arrears fields.Add(Html.X().ComboBox() .FieldLabel("Pricing Charge Date") .LabelAlign(LabelAlign.Top) .ID("ddlChargeDate") .Margins("0 0 0 0") .LabelWidth(200) .Width(200) .EmptyText("--- Please Select ---") .Cls("form-label") .Items(dd => { dd.Add(new ListItem("In advance", "1")); dd.Add(new ListItem("In arrears", "2")); })); //monthly, yearly, quarterly fields.Add(Html.X().ComboBox() .FieldLabel("Invoice Sending Frequency") .LabelAlign(LabelAlign.Top) .ID("ddlInvoiceSendingFrequency") .Margins("0 0 0 0") .LabelWidth(200) .Width(200) .EmptyText("--- Please Select ---") .Cls("form-label") .Items(dd => { dd.Add(new ListItem("Daily", "2")); dd.Add(new ListItem("Weekly", "3")); dd.Add(new ListItem("Fortnightly", "4")); dd.Add(new ListItem("Monthly", "5")); dd.Add(new ListItem("BiMonthly", "6")); dd.Add(new ListItem("Quarterly", "7")); dd.Add(new ListItem("Annually", "8")); dd.Add(new ListItem("Biennially", "9")); })); })); items.Add(Html.X().FieldContainer() .Layout(LayoutType.Anchor) .ColumnWidth(0.3) .Margins("0 0 0 8") .Items(fields => { fields.Add(Html.X().NumberField() .ID("txtPriceExGST") .FieldLabel("Price (ex GST)") .LabelAlign(LabelAlign.Top) .Cls("form-label") .LabelWidth(200) .Margins("0 0 4 4")); // Contracted Power, Reservation Power //must be updated to use a ajax store populated from database| fields.Add(Html.X().ComboBox() .FieldLabel("Pricing Line Item Type") .LabelAlign(LabelAlign.Top) .ID("ddlPricingLineItemType") .Margins("0 0 0 0") .LabelWidth(200) .Width(200) .EmptyText("--- Please Select ---") .Cls("form-label") .Items(dd => { dd.Add(new ListItem("Contracted Power", "1")); dd.Add(new ListItem("Reservation Power", "2")); dd.Add(new ListItem("Recurring", "5")); })); //Fixed Price, Per Usage //must be updated to use a ajax store populated from database| fields.Add(Html.X().ComboBox() .FieldLabel("Service Price Type") .LabelAlign(LabelAlign.Top) .ID("ddlServicePriceType") .Margins("0 0 0 0") .LabelWidth(200) .Width(200) .EmptyText("--- Please Select ---") .Cls("form-label") .Items(dd => { dd.Add(new ListItem("Fixed Price", "1")); dd.Add(new ListItem("Price Per Usage", "2")); })); //Usage Related Fields //Power Usage, Volume Usage //must be updated to use a ajax store populated from database| fields.Add(Html.X().ComboBox() .FieldLabel("Service Usage Type") .LabelAlign(LabelAlign.Top) .ID("ddlServiceUsageType") .Margins("0 0 0 0") .LabelWidth(200) .Width(200) .EmptyText("--- Please Select ---") .Cls("form-label") .Items(dd => { dd.Add(new ListItem("Power Usage", "1")); dd.Add(new ListItem("Data Volume Usage", "2")); })); //kWt, Mb //must be updated to use a ajax store populated from database fields.Add(Html.X().ComboBox() .FieldLabel("Service Usage Units") .LabelAlign(LabelAlign.Top) .ID("ddlServiceUsageUnits") .Margins("0 0 0 0") .LabelWidth(200) .Width(200) .EmptyText("--- Please Select ---") .Cls("form-label") .Items(dd => { dd.Add(new ListItem("kWh", "1")); dd.Add(new ListItem("kb", "2")); })); })); items.Add(Html.X().FieldContainer() .Layout(LayoutType.Anchor) .ColumnWidth(0.3) .Margins("0 0 0 8") .Items(fields => { fields.Add(Html.X().TextArea() .FieldLabel("Pricing Line Description") .LabelAlign(LabelAlign.Top) .ID("txtPricingLineDescription") .Margins("0 0 0 0") .LabelWidth(200) .Width(200) .Height(200) .Cls("form-label")); })); })); })); }); } @outer

This works basically as expected - now I need to modularise the view by creating partial views for each section on the page. I've done this by putting each of the panels in a partial view and setting up the container view like so:

Container:

Code:

@{ Layout = null; } <!DOCTYPE html> <html> <head> <title>Service Manager</title> <link rel="stylesheet" type="text/css" href="/resources/css/main.css" /> <script type="text/javascript" src="/resources/js/site.js"></script> <style type="text/css"> .invite { background-color : #99bbe8 !important; } .x-drop-marker { background-color : silver; } </style> </head> <body> <div> @(Html.X().ResourceManager() .Theme(Theme.Gray) ) @(Html.X().Panel() .Collapsible(true) .ID("pnlEditServiceDetails") .Layout(LayoutType.Container) .Title("SERVICE DETAILS") .AutoHeight(true) .Items(sections => { sections.Add(Html.X().Container() .ID("BasicServiceDetails") .Layout(LayoutType.Column) .Padding(10) .AutoHeight(true) .Margins("0 0 0 10") .Items(containers => { containers.Add(Html.X().Container() .Layout(LayoutType.Fit) .Cls("droppable") .AutoHeight(true) .Width(800) .Items(items => { items.Add(Html.X().Panel() .ID("pnlBasicServiceDetails") .ContentFromPage(this, "/Views/Shared/_BasicServiceDetailsPanel.cshtml")); })); containers.Add(Html.X().Container() .Layout(LayoutType.Fit) .Width(800) .Cls("droppable") .AutoHeight(true) .Items(items => { items.Add(Html.X().Panel() .ID("pnlPlaceDetails") .ContentFromPage(this, "/Views/Shared/_PlaceDetailsPanel.cshtml")); })); containers.Add(Html.X().Container() .Layout(LayoutType.Fit) .AutoHeight(true) .Width(800) .Cls("droppable") .Items(items => { items.Add(Html.X().Panel() .ID("pnlRecurringCharges") .ContentFromPage(this, "/Views/Shared/_RecurringChargesPanel.cshtml")); })); containers.Add(Html.X().Container() .Layout(LayoutType.Fit) .Width(800) .Cls("droppable") .AutoHeight(true) .Items(items => { items.Add(Html.X().Panel() .ID("pnlContractDetails") .ContentFromPage(this, "/Views/Shared/_ContractDetailsPanel.cshtml")); })); })); }) ) </div> </body> </html>

Example partial view:

Code:

@(Html.X().Panel() .ID("pnlBasicServiceDetails") .Layout(LayoutType.Column) .AnchorHorizontal("100%") .Title("BASIC SERVICE DETAILS") .Cls("draggable") .Padding(4) .Width(800) .AutoHeight(true) .Margins("4 0 4 4") .BodyPadding(4) .Items(items => { items.Add(Html.X().FieldContainer() .Layout(LayoutType.Anchor) .ColumnWidth(0.4) .Items(fields => { fields.Add(Html.X().NumberField() .ID("txtServiceId") .FieldLabel("Service Id") .LabelAlign(LabelAlign.Top) .Cls("form-label") .Width(75) .LabelWidth(200) .ReadOnly(true) .Margins("0 0 4 4")); fields.Add(Html.X().TextField() .ID("txtServiceReference") .LabelAlign(LabelAlign.Top) .FieldLabel("Service Reference") .Width(300) .LabelWidth(200) .Cls("form-label") .Margins("0 0 4 4")); fields.Add(Html.X().TextField() .ID("txtServiceName") .FieldLabel("Service Name") .LabelAlign(LabelAlign.Top) .Cls("form-label") .Width(300) .LabelWidth(200) .Margins("0 0 4 4")); fields.Add(Html.X().TextField() .ID("txtServiceAlias") .LabelAlign(LabelAlign.Top) .FieldLabel("Service Alias") .Width(300) .LabelWidth(200) .Cls("form-label") .Margins("0 0 4 4")); })); items.Add(Html.X().FieldContainer() .Layout(LayoutType.Anchor) .ColumnWidth(0.3) .Margins("0 0 0 8") .Items(fields => { fields.Add(Html.X().ComboBox() .FieldLabel("Service Status") .LabelAlign(LabelAlign.Top) .ID("ddlServiceStatus") .Margins("0 0 0 0") .LabelWidth(200) .Width(200) .EmptyText("--- Please Select ---") .Cls("form-label") .DisplayField("ServiceStatusName") .ValueField("ServiceStatusId") .Store(store => store.Add(Html.X().Store() .AutoLoad(true) .Proxy(proxy => proxy.Add(Html.X().AjaxProxy() .Url("/Services/RetrieveServiceStatuses/") .Reader(reader => reader.Add(Html.X().JsonReader() .Root("data") .TotalProperty("total") )) )) .Model(model => model.Add(Html.X().Model() .Fields(modelFields => { modelFields.Add(Html.X().ModelField().Name("ServiceStatusID")); modelFields.Add(Html.X().ModelField().Name("ServiceStatusName")); }) )) ) ) ); fields.Add(Html.X().ComboBox() .FieldLabel("Commercial Status") .LabelAlign(LabelAlign.Top) .ID("ddlCommercialStatus") .Margins("0 0 0 0") .LabelWidth(200) .Width(200) .EmptyText("--- Please Select ---") .Cls("form-label") .DisplayField("CommercialStatusName") .ValueField("CommercialStatusId") .Store(store => store.Add(Html.X().Store() .AutoLoad(true) .Proxy(proxy => proxy.Add(Html.X().AjaxProxy() .Url("/Services/RetrieveCommercialStatuses/") .Reader(reader => reader.Add(Html.X().JsonReader() .Root("data") .TotalProperty("total") )) )) .Model(model => model.Add(Html.X().Model() .Fields(modelFields => { modelFields.Add(Html.X().ModelField().Name("CommercialStatusID")); modelFields.Add(Html.X().ModelField().Name("CommercialStatusName")); }) )) ) ) ); fields.Add(Html.X().TextField() .FieldLabel("Parent Product Type") .LabelAlign(LabelAlign.Top) .ID("txtParentProductType") .Margins("0 0 0 0") .LabelWidth(200) .Width(200) .Cls("form-label")); })); }) )

this works to some extent but only the first partial view renders correctly, the others seem to be hidden behind some broken styles. The error I get if i debug is:

Node cannot be inserted at the specified point in the hierarchy
Ext.getDom(el).appendChild(this.dom);

any ideas where i'm going wrong?

You should use ItemsFromPage instead of ContentFromPage to cause the items from the partial views to be participated in layout logic.