I am using EXT.NET and have a question. I have a trouble to load json data into grid panel. My code is below. When tree item is clicked, selectNode function fires properly, but the JSON result can't be loaded into Grid panel. How can I load into the Grid panel? Currently, white blank page pops up.
@model System.Collections.IEnumerable
@{
Layout = null;
var X = Html.X();
}
<script type="text/javascript">
var selectNode = function (item, record, node, index, event) {
Ext.Ajax.request({
url: "/Popup/GetDepartmentUser",
method: "POST",
params: {
id: record.data.id
},
callback: function (options, success, response) {
if (Ext.decode(response.responseText).success == false) {
Ext.Msg.alert("Failed", response.responseText);
} else {
var grid = App.theGrid;
grid.show();
grid.getStore().loadData(Ext.decode(response.responseText));
//Ext.Msg.alert("Success", response.responseText);
}
},
failure: function (response, options) {
Ext.MessageBox.alert("Failed", response.responseText);
},
timeout: '10000'
});
}
</script>
<!DOCTYPE html>
<html>
<head>
<title>Search User</title>
</head>
<body>
@(Html.X().ResourceManager())
@(X.Panel()
.Layout(LayoutType.Border)
.Width(780)
.Height(460)
.Items(
X.TreePanel()
.Title("Department")
.ID("theTree")
.Region(Region.West)
.Width(250)
.Height(460)
.Border(false)
.Split(true)
.UseArrows(true)
.Listeners(l => l.ItemClick.Fn = "selectNode")
.Store(
Html.X().TreeStore()
.Proxy(
Html.X().AjaxProxy().Url(Url.Action("GetDepartmentChildren"))
)
)
.Root(
Html.X().Node().NodeID("0").Text(ViewBag.OrganizationName)
),
Html.X().GridPanel()
.ID("theGrid")
.Title("User Information")
.Region(Region.Center)
.Width(530)
.Height(460)
.Border(false)
.Store(Html.X().Store()
.AutoLoad(false)
.Model(Html.X().Model()
.Fields(
new ModelField("FirstName", ModelFieldType.String),
new ModelField("LastName", ModelFieldType.String),
new ModelField("Email", ModelFieldType.String)
)
)
//.DataSource(Model)
.Reader(reader => reader.Add(Html.X().JsonReader().Root("data")))
)
.ColumnModel(
Html.X().Column()
.Text("First Name")
.DataIndex("FirstName")
.Flex(1),
Html.X().Column()
.Text("LastName")
.DataIndex("LastName")
.Width(70)
.Align(Alignment.Center),
Html.X().Column()
.Text("Email")
.DataIndex("Email")
.Width(140)
)
.View(Html.X().GridView().StripeRows(true).TrackOver(true))
)
)
</body>
</html>
Here is JSON result data
{
"success":true,
"total":2,
"data":"[
{
\"FirstName\":\"BlahBlah1\",
\"LastName\":\"Kwak\",
\"Email\":\"[email protected]\"
},
{
\"FirstName\":\"BlahBlah2\",
\"LastName\":\"Kwak\",
\"Email\":\"[email protected]\"
}
]"
}
