Again this is a learning purpose application and this is not the best approach. But for a beginner this will be fine. :)
My task is to build a grid from data returned
by a ASP.NET MVC4/5 action method. Action method should return data encoded in
JSON format similar to below.
{
"success":true,
"data":[
{
"Id":1,
"Name":"Fixed",
"Value":0,
"ShortName":"Fix",
"Description":"Issue is fixed and completed",
"Color":"A4C400",
"DomainId":0
},
{
"Id":2,
"Name":"Can not reproduce",
"Value":0,
"ShortName":"CantReprod",
"Description":"Reported issue can not be repoduced",
"Color":"60A917",
"DomainId":0
},
{
"Id":3,
"Name":"Incomplete Data",
"Value":0,
"ShortName":"Incomplete",
"Description":"Issue description is not enought",
"Color":"FA6800",
"DomainId":0
},
{
"Id":4,
"Name":"Expected Behaviour",
"Value":0,
"ShortName":"ExpctdBhvr",
"Description":"This is expected behaviour under the normal circumstances",
"Color":"6D8764",
"DomainId":0
}
]
}
My out put looks like below.
4. 4.1 . I have created my model as Color.js
Ext.define('Assingment.model.Color', {
extend: 'Ext.data.Model',
fields: [
{ name: 'Id', type: 'int' },
{ name: 'Value', type: 'int' },
{ name: 'DomainId', type: 'int' },
{ name: 'Colour', type: 'string' },
{ name: 'Name', type: 'string' },
{ name: 'ShortName', type: 'string' },
{ name: 'Description', type: 'string' }
],
schema: {
namespace: 'Assingment.model',
urlPrefix: '/Home/GetColorInformation',
proxy: {
type: 'ajax',
url: '/Home/GetColorInformation',
reader: {
type: 'json',
rootProperty: 'data'
},
extraParams: {
name: ' '
}
}
}
});
4.2 view/main/Main.js is like this.
Ext.define('Assingment.view.main.Main', {
extend: 'Ext.form.Panel',
requires: ['Assingment.model.Color'],
xtype: 'app-main',
referenceHolder: true,
controller: 'main',
viewModel: {
type: 'main'
},
layout: {
type: 'vbox',
align: 'stretch'
},
items: [
{
xtype: 'form',
bind: '{main}',
items: [
{
xtype: 'grid',
bind: '{grid}',
reference: 'fooPanel',
columns: [
{
text: "Colour",
width: 120,
dataIndex: 'Colour',
renderer: function(value, metaData, record, rowIndex, colIndex, store) {
metaData.style = 'background-color: #' + record.data.Colour;
}
},
{ text: "Name", width: 380, dataIndex: 'Name' },
{ text: "Short Name", width: 380, dataIndex: 'ShortName' },
{ text: "Description", width: 380, dataIndex: 'Description' }
],
buttons: [
{
text: 'UpdateGrid',
handler: 'onClickButton',
}
],
}
]
}]
});
4.3. view/main/MainCOntroller.js is like this.
Ext.define('Assingment.view.main.MainController', {
extend: 'Ext.app.ViewController',
requires: [
'Ext.MessageBox'
],
alias: 'controller.main',
onClickButton: function () {
var grid = this.lookupReference('fooPanel');
var store = grid.getStore();
store.load();
},
onConfirm: function (choice) {
if (choice === 'yes') {
//
}
}
});
4.4.view/main/MainModel.js where 'Color' is located in root Models/Color.cs
Ext.define('Assingment.view.main.MainModel', {
extend: 'Ext.app.ViewModel',
requires: ['Assingment.model.Color'],
alias: 'viewmodel.main',
data: {
name: 'Assingment'
},
stores: {
grid: {
model: 'Color'
}
}
});
4.5 Color.cs contains follows.
namespace Assignment2.Models
{
public class Color
{
public string Colour { get; set; }
public string Name { get; set; }
public string ShortName { get; set; }
public string Description { get; set; }
public int Id { get; set; }
public int Value { get; set; }
public int DomainId { get; set; }
public Color() { }
public Color(int id, string Name, int Value, string ShortName)
{
this.Id = id;
this.Name = Name;
this.Value = Value;
this.ShortName = ShortName;
}
}
}
4.6. Root Controllers/HomeControllers.cs contains the action method like this.
using System.Collections.Generic;
using System.Web.Mvc;
using Assignment2.Models;
using Newtonsoft.Json;
namespace Assignment2.Controllers
{
public class HomeController : Controller
{
public ActionResult Index()
{
return View();
}
[HttpGet]
[AllowAnonymous]
public ActionResult GetColorInformation()
{
return this.JsonResponse(
new
{
success = true,
data = new List<Color>
{
new Color
{
Id = 1,
Name = "Fixed",
Value = 0,
ShortName = "Fix",
Description = "Issue is fixed and completed",
Colour = "A4C400",
DomainId = 0
},
new Color()
{
Id = 2,
Name = "Can not reproduce",
Value = 0,
ShortName = "CantReprod",
Description = "Reported issue can not be repoduced",
Colour = "60A917",
DomainId = 0
},
new Color()
{
Id = 3,
Name = "Incomplete Data",
Value = 0,
ShortName = "Incomplete",
Description = "Issue description is not enought",
Colour = "FA6800",
DomainId = 0
},
new Color()
{
Id = 4,
Name = "Expected Behaviour",
Value = 0,
ShortName = "ExpctdBhvr",
Description = "This is expected behaviour under the normal circumstances",
Colour = "6D8764",
DomainId = 0
},
}
});
}
protected ContentResult JsonResponse(object response)
{
return new ContentResult { Content = JsonConvert.SerializeObject(response), ContentType = "application/json", ContentEncoding = System.Text.Encoding.UTF8 };
}
}
}
Following is my folder structure in VS.
That's it. Now you can run in VS and see the grid content when pressing the button "UpdateGrid" in the browser.
