[CLOSED] [#1392] [4.2.0] Mobile.mvc do not support PolarChart?
I used Mobile.Mvc like X.PolarChart()
but the Ext.decode(response) been given you're trying to decode an invalid json string:
There is not any Chart Examples in http://mvc.mobile.ext.net/
my codes :
Code:
@{
var X = Html.X();
}
@(
X.PolarChart().InnerPadding(10)
.Store(
X.Store().ID("StoreZic")
.ServerProxy(X.AjaxProxy().Url("/api/home/getzicdata"))
.Model(
X.Model().Fields(
new ModelField("CltZicTyp", ModelFieldType.String),
new ModelField("CltZicPer", ModelFieldType.Float)
)
)
)
.Interactions(
X.ItemHighlightInteraction(),
X.RotateInteraction()
)
.LegendConfig(X.ChartLegend().Docked(Dock.Right))
.Series(X.PieSeries()
.AngleField("CltZicPer").Donut(0)
.Label(X.ChartLabel().Field("CltZicTyp").FontSize("14").Display(SeriesLabelDisplay.Rotate))
.HighlightDefaults(X.Sprite().Margin(20))
)
)
Code:
[DirectMethod]
public ActionResult GetView(string viewName)
{
var path = @"~\Views\Home\";
path = String.Concat(path, viewName, ".cshtml");
return new Ext.Net.Mobile.MVC.PartialViewResult
{
ViewName = path,
RenderMode = RenderMode.Config
};
}
Code:
App.direct.GetView(viewName, {
success: function (response) {
console.log(response);
response = Ext.decode(response);
Ext.net.loadResources(response, function (config) {
var view = Ext.create(config[0]);
Ext.Viewport.animateActiveItem(view, {
type: "slide",
direction: 'left'
});
}, this);
}
scope: this
});
finally there is a js error:you're trying to decode an invalid json string.
the response is a invalid json string.
My problem is that PolarChart can not be created through by function "Ext.Net.Mobile.Mvc.PartialViewResult" in Controlers
yes,I know it runs very well in full example .
But I would like to create dynamic view like your example.
Read 'csthml' by [DirectMethod] GetView.
And create view page by js like this.
Code:
App.direct.GetView(viewName, {
success: function (response) {
console.log(response);
response = Ext.decode(response);
Ext.net.loadResources(response, function (config) {
var view = Ext.create(config[0]);
Ext.Viewport.animateActiveItem(view, {
type: "slide",
direction: 'left'
});
}, this);
}
scope: this
});
it works well in every page,but only in PolarChart View.
this is my simple example
controllers:
Code:
[DirectController]
public class HomeController : Controller
{
public ActionResult test()
{
return View();
}
[DirectMethod]
public ActionResult GetView(string viewName)
{
var path = @"~\Views\Home\";
path = String.Concat(path, viewName, ".cshtml");
return new Ext.Net.Mobile.MVC.PartialViewResult
{
ViewName = path,
RenderMode = RenderMode.Config
};
}
}
test.cshtml
Code:
@{
Layout = null;
var X = Html.X();
}
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title></title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<script type="text/javascript">
var showView = function (viewName) {
App.direct.GetView(viewName, {
success: function (response) {
response = Ext.decode(response);
Ext.net.loadResources(response, function (config) {
var view = Ext.create(config[0]);
Ext.Viewport.animateActiveItem(view, {
type: "slide",
direction: 'left'
});
}, this);
},
complete: function () {
Ext.Viewport.setMasked(false);
},
scope: this
});
};
var onBack = function () {
var view = Ext.Viewport.getActiveItem();
Ext.Viewport.animateActiveItem(0, {
type: "slide",
direction: 'right'
});
Ext.Viewport.remove(view);
view.destroy();
};
</script>
</head>
<body>
@X.ResourceManager()
@(X.Container().FullScreen(true).Padding(10).Layout(LayoutType.VBox)
.Items(
X.Button().Text("chart error").Margin(10).Handler("showView('chart');"),
X.Button().Text("view success").Margin(10).Handler("showView('view');")
)
)
</body>
</html>
chart.csthml
Code:
@{
Layout = null;
var X = Html.X();
var n = 5;
var floor = 20;
List<object> data = new List<object>(n);
Random random = new Random();
double p = (random.NextDouble() * 11) + 1;
for (int i = 0; i < n; i++)
{
data.Add(new
{
id = i,
name = (char)('A' + i),
g1 = Math.Floor(Math.Max(random.NextDouble() * 100, floor))
});
}
}
@(
X.Container().Layout(LayoutType.Fit)
.Items(
X.TitleBar().Title("test")
.Items(
X.Button().Text("back").UI(ButtonUI.Back).Handler("onBack();")
),
X.PolarChart().InnerPadding(10)
.Store(
X.Store().Data(data).Fields("id", "g1", "name")
)
.Interactions(
X.ItemHighlightInteraction(),
X.RotateInteraction()
)
.Series(X.PieSeries()
.AngleField("g1").Donut(30)
.Label(
X.ChartLabel().Field("name").Display(SeriesLabelDisplay.Rotate)
)
)
)
)
view.cshtml
Code:
@{
Layout = null;
var X = Html.X();
}
@(
X.Container()
.Items(
X.TitleBar().Title("this is a test view")
.Items(
X.Button().Text("back").UI(ButtonUI.Back).Handler("onBack();")
)
)
)
you can tap the button in test.cshtml
the first button runs incorrectly
the sencond button works fine