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

Question

我目前正在开发一个使用 ExtJs 3.3.1 作为前端的应用程序。后端是 .NET 4 平台，服务器端使用 MVC。这意味着一旦请求，控制器操作就会返回数据。

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

一个很好的例子是显示维护作业的网格面板。每个维护作业都有许多已完成的任务和许多未完成的任务。除此之外，记录可能包含下一次计划维护工作的日期。目前 - 使用 ExtJs 3.3.1 - 记录在服务器上创建并作为 JSON 发送到客户端。 datastore/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 代码 sn-p 就更好了。无论如何，无论版本是什么，您都应该对服务器进行 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 结构并使用模型/存储而不是使用这种方式。商店/模型有更多的优势，如果你使用他们的 mvc 架构，ExtJS 提供了很多开箱即用的选项。