PDA

View Full Version : VBox MVC Show Grey Rectangle on GridPanel



browndong
Dec 16, 2016, 1:24 PM
Hello, i'm starting a MVC project with Ext.Net. In my view, i have a gridpanel inside a vbox layout as follow



@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.Si ngle).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>


And the controller is


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));
}
}
}


and my model exactly the same as the example.

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. 2479624797

fabricio.murta
Dec 17, 2016, 1:17 AM
Hello @browndong, and welcome to Ext.NET forums!..

Sometimes dealing with layouts will require a lot of attention not to forget one or another specific trait of the layout setting.

In your test case, you needed to give either a fixed width or a flex value to the panel in the west region. According to the documentation on border layout (http://docs.sencha.com/extjs/6.0.2/classic/Ext.layout.container.Border.html) (see the notes in the summary of the feature), at least this was necessary to ensure the page would smoothly work. East, south and north will also require these settings. Omitting them may result in a working page but -- exactly as you witnessed -- layout refreshes may break, and that's a reasonably difficult aspect to tackle with.

Here are some relevant discussions on the subject:
- Post #9 in "Layout run failed" appears when displaying large no of dynamic MenuPanels inside Portals inside GroupTabPanel (http://forums.ext.net/showthread.php?25289&p=111619&viewfull=1#post111619). I believe reading from the first post down to this 9th post is enough to understand the problems around it and debugging alternatives.
- Border layout without region & CommandCOlumn (http://forums.ext.net/showthread.php?58181). Points to the relevance of considering the notes in the docs of the border layout.

As for the test case you provided, it was as hard to solve the issue as adding the .Flex(1) argument to line 23 of your view code. Properly indenting the razor syntax algorithm helps a lot identifying blocks and where the width/height or flex setting is missing.

We appreciate providing the runnable test case, but indenting the code and pointing the exact example you based your test case from (so we could pull the class directly from it without having to search over) would greatly help! :)

Anyway, hope the explanation above is clear and helps you make your page work smoothly!

browndong
Dec 19, 2016, 8:44 PM
thank you for the long explanation fabrizio. It solved my problem with the proper width of the gridpanel