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提供了很多開箱即用的選項。