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:
@{
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
@{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:
@{
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:
@(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?