MODEL class is as follows:
public class UserStore
{
public string FirstName { get; set; }
public string LastName { get; set; }
public string EmailAddress { get; set; }
}Controller class is as follows:
public class GridController : Controller
{
public ActionResult Index()
{
var list = new List<UserStore>();
list.Add(new UserStore() { EmailAddress = "[email protected]", FirstName = "Rose", LastName = "Taylor"});
list.Add(new UserStore() { EmailAddress = "[email protected]", FirstName = "Russell", LastName = "Nguyen" });
list.Add(new UserStore() { EmailAddress = "[email protected]", FirstName = "Ellis", LastName = "Davis" });
list.Add(new UserStore() { EmailAddress = "[email protected]", FirstName = "Neal", LastName = "Clarke" });
list.Add(new UserStore() { EmailAddress = "[email protected]", FirstName = "Brendon", LastName = "Taylor" });
ViewBag.userStore = JsonConvert.SerializeObject(list);
return View();
}
}sendex.cshtml content is as follows:
@{
ViewBag.Title = "Index";
}
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Grid Demo</title>
<link rel="stylesheet" type="text/css" href="http://cdn.bootcss.com/extjs/6.0.1/classic/theme-neptune/resources/theme-neptune-all.css">
<script type="text/javascript" src="http://cdn.bootcss.com/extjs/6.0.1/ext-all.js"></script>
<script type="text/javascript" src="http://cdn.bootcss.com/extjs/6.0.1/classic/theme-neptune/theme-neptune.js"></script>
<script type="text/javascript">
var userList = '@(Html.Raw(ViewBag.userStore))';
</script>
<script type="text/javascript" src="~/Scripts/grid.js"></script>
</head>
<body>
</body>
</html>
grid.js code:
EXT.DEFINE ('UserList', {
extend: 'ext.data.model',
Fields: ['firstName', 'LastName', 'Emailaddress'] // You Can Comment the Fields. It Still Works.
});
var usestore = ext.create ('ext.data.store', {
Model: 'UserList',
data: ext.json.decode (userlist)
});
// Define pagination
var pagebar = ext.create ("ext.toolbar.paging", {{
Store: usestore,
displayinfo: true,
displaymsg: "Display {0}-{1} bar, total {2}",
EMPTYMSG: "No data"
});
Ext.application ({{{
name: 'EXT6 GRID Example',
Launch: Function () {
Ext.create ('EXT.Grid.panel', {
renderto: ext.getBody (),
Seltype: 'Rowmodel', // 'Cellmodel',
plugins: [{{
ptype: 'rowediting',
ClickStoEdit: 1
}],,,
Store: usestore,
columnlines: true,
// width: "100%",
// frame: true,
Forcefit: true,
fixed: true,
height: 500,
Title: 'EXT6 GRID Example',
Columns: [
{{
text: 'first name',
width: 200,
dataindex: 'firstname',
Editor: 'TextField'
},
{{
text: 'last name',
width: 200,
dataindex: 'LastName',
Editor: 'TextField'
},
{{
text: 'email address',
width: 250,
dataindex: 'emailaddress',
Editor: {{
XType: 'TextField',
AllowBlank: false
}
},
{{
Text: 'BIRTH DATE',
width: 250,
dataindex: 'BIRTHDATE',
Editor: 'Datefield'
}
],,,
// Pagling function
// bbar: PageBar,
// Pagling function-Effects are the same as above
dockedItems: [{{
xtype: 'pagingtoolbar',
Store: usestore,
Dock: 'Bottom',
displayinfo: true,
}]
});
}
});display page as shown in the figure: