Grid creation in ExtJs

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.

In my previous post related to ExtJs http://nalanijayasundara.blogspot.com/2014/09/simple-application-using-extjs-50.html I have described to set up the environment to run this kind of application in VS2012. So please have a look upto 3rd point.And then follow from here.

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.