ExtJs 4.0与自定义字段记录的数据绑定

Question

我目前正在使用ExtJs 3.3.1作为前端制作应用程序。后端是.NET 4平台，而MVC则用于服务器端。这意味着数据一旦被请求就由控制器动作返回。

我的雇主目前在同一个数据库上请求一个全新的应用程序，我打算切换到该应用程序的最高版本的ExtJs。数据处理的方式完全不同，但似乎整个数据模型都是在Javascript文件中重建的。

一个很好的例子是一个显示维护工作的网格面板。每项维护工作都有许多任务完成，许多任务未完成。接下来，一条记录可能会有下一个计划维护工作的日期。目前 - 使用ExtJs 3.3.1 - 记录在服务器上创建并作为JSON发送给客户端。数据存储/ dataproxy/gridpanel几乎没有什么可做，除了显示它。总结完成/未完成的任务在服务器端完成。

这些任务不是模型的一部分，它们是在网格面板请求数据时由服务器创建的。 ExtJs 4.0是如何完成的？我是否需要将商店连接到返回数据的控制器操作，显然该商店是只读的？我需要在客户端的“维护工作”模型中定义这些总结吗？或者这是一种绕过Javascript文件中创建的模型的情况？

我一直没能找到太多的东西，几乎所有的例子都使用与数据库表对应的模型。数据存储可能非常简单，但我需要的不仅仅是一张表中的记录。

下面的代码是现有的ExtJs 3.3.1代码，演示了当前的数据处理方式。

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

如果您可以粘贴现有的ExtJS 3.3.1代码片段，会更好。任何方式的版本，你应该做一个Ajax调用服务器来获取JSON。它通过配置代理来实现。

创建一个网格并将该网格传递给一个函数，在该函数中进行ajax调用并使用数组存储重新配置网格。

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 }); 

通过这个网格下面的功能和重新配置网格与

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); 
} }); 

我的建议是创造，而不是用这种方式适当MVC strucutre和使用模式/存储。商店/模型有更多的优点，如果您使用他们的mvc架构，ExtJS提供了很多开箱即用的选项。