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结构并使用模型/存储而不是使用这种方式。商店/模型具有更多优势，如果你使用他们的mvc架构，ExtJS提供了大量的开箱即用选项。

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

1 个答案: