PDA

View Full Version : Grid -in Panel which has layout- couldnt show records



unicorn64
Mar 24, 2017, 12:10 PM
Hi all,
I have used FormPanel in GridPanel's TopBar for user can select parameter values, on Ext.Net
in Ext.Net.Mobile there is no TopBar, so i try to use panel which has VBox layout as container, FormPanel and Grid in it.
but if panel has layout config, grid couldnt show records.




@using Ext.Net.Mobile;
@using Ext.Net.Mobile.MVC;
@{
Layout = null;
var X = Html.X();
}
<!DOCTYPE html>
<html>
<head>
<title>Ext.NET Mobile MVC Sample</title>
</head>
<body>
@Html.X().ResourceManager()

@(Html.X().Panel()
.Layout(LayoutType.VBox)
.Padding(10)
.Items(
X.FormPanel()
.Items(
X.NumberField().Label("Number")
),
X.Grid().Height(500)
.Title("Simpsons")
.Store(X.Store()
.Fields("name", "email", "phone")
.Proxy(p =>
{

var proxy = new AjaxProxy();
proxy.Reader.Add(new JsonReader() { RootProperty = "data" });
proxy.Url = Url.Action("GetData");
p.Add(proxy);
})
.AutoLoad(true)
)
.Columns(
X.Column().Text("Name").DataIndex("name").Width(200),
X.Column().Text("Email").DataIndex("email").Width(250),
X.Column().Text("Phone").DataIndex("phone").Width(150)
)
)
)
</body>
</html>




using Ext.Net.Mobile.MVC;
using System.Collections.Generic;
using System.Web.Mvc;

public class ExtNetMobileController : Controller
{
public ActionResult Index()
{
return this.View();
}


public ActionResult GetData()
{
var data = new List<object>
{
new
{
name = "Lisa",
email = "lisa@simpsons.com",
phone = "555-111-1224"
},

new
{
name = "Bart",
email = "bart@simpsons.com",
phone = "555-222-1234"
},

new
{
name = "Homer",
email = "homer@simpsons.com",
phone = "555-222-1244"
},

new
{
name = "Marge",
email = "marge@simpsons.com",
phone = "555-222-1254"
}
};
return this.Store(data);
}
}

fabricio.murta
Mar 24, 2017, 3:10 PM
Hello @unicorn64!

You want to use toolbars, and dock them to the desired side of the panel!

- Ext.NET Mobile examples - Toolbars (http://mobile.ext.net/#demo/toolbars)

For best experience browsing the mobile examples explorers on desktop, please use chrome and enable device emulation mode (in Firefox, the corresponding feature would be 'responsive design mode' and enable touch events -- little hand that is then shown).

Hope this helps!

unicorn64
Mar 24, 2017, 3:14 PM
thanks @fabricio.murta,

ok, i will look this example,
but the real problem is, grid doesnt show records if it is in a panel and panel's layout is VBox or HBox

fabricio.murta
Mar 24, 2017, 3:32 PM
Hello again, @unicorn64!

The idea would be to keep just the panel, Fullscreen="true" on the page (constrained viewport, mobile devices small, right?)

Besides, I'm missing in your example either:
- giving the outer panel dimensions (width/height)
- telling the panel it must occupy all viewport (Fullscreen="true")
- wrapping the page to an explicit viewport in a similar way to Ext.NET for desktop/tablet

Hope this helps!