Dec 16, 2016, 1:24 PM
VBox MVC Show Grey Rectangle on GridPanel
Hello, i'm starting a MVC project with Ext.Net. In my view, i have a gridpanel inside a vbox layout as follow
The layout is looking good until user click test button. It show a grey rectangle on top of gridpanel. Pls let me know what wrong with my vbox layout. thank you.
@model ExtNetMvcApplication.Models.Plant
@{
var X = Html.X();
}
<html>
<head>
<title>Ext.NET MVC Sample</title>
<script type="text/javascript">
var showData = function (grid) {
grid.getStore().getProxy().setExtraParam('test', App.hiddenId.getValue());
grid.getStore().reload();
//Ext.getCmp('hiddenId').setValue(new Date().getMinutes().toString());
};
</script>
</head>
<body>
@(Html.X().ResourceManager())
@(X.Viewport()
.Layout(LayoutType.Border)
.Items(
X.Panel()
.Title("My Query")
.Region(Region.West)
.Border(true)
.BodyPadding(10)
.Layout(LayoutType.VBox)
.LayoutConfig(new VBoxLayoutConfig { Align = VBoxAlign.Stretch })
.Frame(true)
.Items(
X.Panel().Layout(LayoutType.Fit)
.Items(
X.Hidden().ID("hiddenId").Value("some value")
),
X.Button().Text("Test")
.Listeners(ls =>
{
ls.Click.Handler = "showData(App.GridPanel1)";
}
),
X.Panel().Layout(LayoutType.Fit).Flex(1)
.Items(
X.GridPanel().ID("GridPanel1")
.Title("My Grid")
.Frame(true)
.Store(Html.X().StoreForModel()
.AutoLoad(false)
.Proxy(Html.X().AjaxProxy()
.Url(Url.Action("Read"))
.Reader(Html.X().JsonReader().RootProperty("data")))
.PageSize(5)
)
.ColumnModel(Html.X().Column().DataIndex(Model, m => m.Common).Text("Common Name"),
Html.X().Column().DataIndex(Model, m => m.Botanical).Text("Botanical").Width(230),
Html.X().Column().DataIndex(Model, m => m.Light).Text("Light").Width(130)
)
.SelectionModel(
Html.X().RowSelectionModel().Mode(SelectionMode.Single).DirectEvents(de =>
{
de.SelectionChange.Url = Url.Action("SetTimeStamp");
de.SelectionChange.Confirmation.Title = "Title";
})
)
.BottomBar(
Html.X().PagingToolbar().HideRefresh(true)
.DisplayInfo(true)
.DisplayMsg("{2}")
.EmptyMsg("0"))
)
),
X.TabPanel()
.Region(Region.Center)
.Items(
X.Panel()
.Title("Center")
.Border(false)
.BodyPadding(6)
.Items(
Html.X().TextField().ID("TextField3").FieldLabel("Company Name").AllowBlank(false)
)
,
X.Panel()
.Title("Close Me")
.Closable(true)
.Border(false)
.BodyPadding(6)
.Html("Closeable Tab")
)
)
)
</body>
</html>using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Ext.Net;
using Ext.Net.MVC;
namespace ExtNetMvcApplication.Controllers
{
public class ViewportLayoutController : Controller
{
//
// GET: /ViewportLayout/
public ActionResult Index()
{
return View();
}
public ActionResult SetTimeStamp()
{
var txtField = this.GetCmp<TextField>("TextField3");
txtField.Text = DateTime.Now.ToLongTimeString();
return this.Direct();
}
public ActionResult Read(StoreRequestParameters parameters, string test)
{
return this.Store(Models.Plant.PlantsPaging(parameters));
}
}
}The layout is looking good until user click test button. It show a grey rectangle on top of gridpanel. Pls let me know what wrong with my vbox layout. thank you.
