ExtJs 4.0 data binding of records with custom fields

Question

I am currently working on an application which is made with ExtJs 3.3.1 as front-end. The back-end is a .NET 4 platform and MVC is used server side. This means data is returned by controller actions once requested.

My employer currently requests a totally new application on the same database, and I intend to switch to the highest version of ExtJs for that application. The way data is handled is entirely different though and it seems the whole data model is rebuilt in Javascript files.

A good example would be a gridpanel which displayes maintenance jobs. Each maintenance job has a number of tasks accomplished and a number of tasks not accomplished. Next to that, a record may have the date of the next planned maintenance job. Currently - with ExtJs 3.3.1 - the records are created on the server and sent as JSON to the client. The datastore/dataproxy/gridpanel have virtually nothing to do except displaying it. Summing the accomplished/not accomplished tasks is done serverside.

The tasks are not directly part of the model, they are created by the server when a gridpanel requests data. How is this accomplished with ExtJs 4.0? Do I need to connect a store to the controller action which returns the data, obviously the store being read-only? Do I need to define those summations in the model of 'maintenance job' on the clientside? Or is this a case in which you bypass the model which is made in the Javascript files?

I haven't been able to find much on it, almost all examples work with models which correspond to database tables. The datastores are probably very straightforward then, but I need more than just records from one table.

The code below is existing ExtJs 3.3.1 code and demonstrates the current way of data handling.

var visitReportStore = new Ext.data.Store({
        id: 'id',
        proxy: new Ext.data.HttpProxy({ url: '<%= Url.Action("ListVisitReports", "VisitReport") %>' }),
        reader: new Ext.data.JsonReader(
            {
                totalProperty: 'records',
                idProperty: 'Id',
                root: 'rows'
            },
            [
                { name: 'Id' },
                { name: 'Employee' },
                { name: 'CreationDate' },
                { name: 'VisitDate' },
                { name: 'TicketId' },
                { name: 'ProposalId' },
                { name: 'ProposalNr' },
                { name: 'RelationId' },
                { name: 'Relation' },
                { name: 'HoursOsab' },
                { name: 'HoursInvoice' },
                { name: 'HoursNonInvoice' },
                { name: 'HoursTotal' },
                { name: 'Action' }
            ]
        ),
        remoteSort: true, 
        baseParams: { proposalId: <%= Model.Id %> },
        autoLoad: true
    });

var visitReportStore = new Ext.data.Store({
        id: 'id',
        proxy: new Ext.data.HttpProxy({ url: '<%= Url.Action("ListVisitReports", "VisitReport") %>' }),
        reader: new Ext.data.JsonReader(
            {
                totalProperty: 'records',
                idProperty: 'Id',
                root: 'rows'
            },
            [
                { name: 'Id' },
                { name: 'Employee' },
                { name: 'CreationDate' },
                { name: 'VisitDate' },
                { name: 'TicketId' },
                { name: 'ProposalId' },
                { name: 'ProposalNr' },
                { name: 'RelationId' },
                { name: 'Relation' },
                { name: 'HoursOsab' },
                { name: 'HoursInvoice' },
                { name: 'HoursNonInvoice' },
                { name: 'HoursTotal' },
                { name: 'Action' }
            ]
        ),
        remoteSort: true, 
        baseParams: { proposalId: <%= Model.Id %> },
        autoLoad: true
    });

    public class VisitReportListItem : ListItem<VisitReportListItem>
{
    public int Id { get; set; }
    public string Employee { get; set; }
    public DateTime CreationDate { get; set; }
    public DateTime VisitDate { get; set; }
    public int? TicketId { get; set; }
    public int? ProposalId { get; set; }
    public string ProposalNr { get; set; }
    public int RelationId { get; set; }
    public string Relation { get; set; }
    public int? MaintenanceId { get; set; }
    public string Maintenance { get; set; }
    public decimal? HoursOsab { get; set; }
    public decimal? HoursInvoice { get; set; }
    public decimal? HoursNonInvoice { get; set; }
    public decimal? HoursTotal { get; set; }
    public string Action { get; set; }
}

Answer 1

It would be better if you can paste existing ExtJS 3.3.1 code snippet. Any way whatever is the version, you should make an ajax call to the server to get json. It is achieved by configuring proxy.

Create a grid and pass this grid to a function where you make an ajax call and reconfigure grid with an arraystore.

var tasksGrid =  Ext.create('Ext.grid.Panel', {
store: null,
columns: [
    { text: 'Accomplished Tasks',  dataIndex: 'accomplishedTasks', flex: 1  },
    { text: 'Failed Tasks', dataIndex: 'failedTasks', flex: 1 }
],
height: 200,
width: 400  });

Pass this grid to the following function and reconfigure grid with an

Ext.Ajax.request({
url: 'ajax_demo/sample.json',
success: function(response, opts) {
    var data = Ext.decode(response.responseText);
   var arrayStore= Ext.create('Ext.data.ArrayStore', {
        fields: [{name: 'accomplishedTasks'},{name: 'failedTasks'}]
        });
    tasksGrid.reconfigure(arrayStore); 
}  });

My advice is to create proper mvc strucutre and use models/store instead of using this way. Stores/models have many more advantages and ExtJS gives plethora of options out of the box if you use thier mvc architecture.