I'm trying to load a partial view when a row is expanded in my grid. My listener looks like this:
x.RowExpander()
.Listeners(ls =>
{
ls.Expand.Handler = string.Format("Item.onListRowExpand('{0}', {1}, this);",
Url.Action("ItemDetail", "My"), Model);
})
This calls into a JavaScript function:
onListRowExpand: function(url, listId, expander) {
var container = App.DashboardPanel;
var itemId = expander.componentsCache[0].cmp.record.data.Id;
var panelId = "Details_" + listId + "_" + itemId;
// Check if the selected panel was selected again. If it was do nothing
var panel = container.getComponent(panelId);
if (!panel) {
// Remove the opened panel so we can add a new one
if (container.items.getCount() > 1) {
container.remove(container.items.getAt(1).id);
}
// Add the new panel...
container.add({
id: panelId,
closeable: true,
loader: {
xtype: "panel",
url: url,
renderer: "frame",
params: {
"listId": listId,
"itemId": itemId }
}
});
container.update();
}
}
This method then calls into a controller:
public Ext.Net.MVC.PartialViewResult ItemDetail(int listId, int itemId)
{
var result = new Ext.Net.MVC.PartialViewResult
{
RenderMode = RenderMode.AddTo,
ContainerId = "MyPanel",
WrapByScriptTag = false,
Model = new ItemViewModel
{
ListId = listId,
ItemId = itemId
}
};
return result;
}
which is supposed to return a partial view to be added onto the container's Items
:
@(x.Container()
.ID("MyPanel")
.Layout(LayoutType.HBox)
.Loader(x.ComponentLoader()
.Url(Url.Action("ViewList", "My"))
.Mode(LoadMode.Script)
.Params(new { listId = Model.ListId })))
The view looks like this:
@model ItemViewModel
@{
var x = Html.X();
}
@(x.Panel()
.LayoutConfig(new HBoxLayoutConfig {Align = HBoxAlign.StretchMax})
.Flex(1)
.Items(
x.Button().Text("Temp").Flex(1)))
My issue is that I cannot seem to get the partial view to render. It comes back as either a white box if I set WrapByScriptTag
to true - in which case I get an error stating "Uncaught ReferenceError: Ext is not defined") or I get the component's JavaScript as text if I set WrapByScriptTag
to false. I know I'm missing a setting somewhere but I'm not sure what's wrong. Any help would be appreciated.
The solution for me was to change my controller to use RenderMode.Config
and to change the renderer
option on the loader from "frame"
to "component"
. The difference, as I understand it, is that the frame option tells Ext.JS to expect an IFrame (ie fully-formed HTML) whereas the component option is used to described Ext components. That was half the problem. The other half was that I was trying to render the component so it would be added into another container's Items
field but the request originated from a call to add
so this was unnecessary. Rather, rendering the component as a config made more sense because it was a partial view.
Note that this works in Ext.NET 4.2.0 but not Ext.NET 4.1.0. In that case choosing renderer: "script"
fixed the problem.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.