在ExtJS表格中實現複雜的數據結構

Question

我們有一個客戶，要求相當複雜的數據模型。這意味着數據模型不僅非常龐大（大約500-1000個字段，嵌套在許多對象中），還需要在任何時候發送和接收所有數據，而這一切都是一個字段發生變化的時間（在它失去焦點之後）。我們把它看作JSON。以下是一個結構示例：

{ 
    data: { 
     somefield: 'some content' 
    }, 
    label: { 
     somelabel: 'some label text' 
    }, 
    applyable: { 
     somefield: { 
      visible: false 
     } 
    } 
    someSubForm: { 
     data: { 
      somefield: 'some content' 
     }, 
     label: { 
      somelabel: 'some label text' 
     }, 
     anotherSubForm: { 
      data: { 
       somefield: 'some content' 
      }, 
      label: { 
       somelabel: 'some label text' 
      } 
     } 
    } 
} 

但這並不是全部;該模型還包含標籤，工具提示和其他配置。所有數據都需要在多個選項卡中顯示，其中可能會在兩個不同的選項卡中顯示相同的數據。由於所需佈局（由客戶定義），表單將相互嵌套。

後端由我們的客戶提供，因此我無法在此更改任何內容。

我開始使用帶有定義代理的單個模型來加載JSON。但在此之後，我遇到了幾個問題。

首先是形式將始終跟蹤所有領域的嵌套形式甚至是一個 二是，我不能改變任何標籤或自定義設置應用 三是由於數據）的大量的loadRecord（和getValues（）方法運行時間很長。

我的問題是我如何分解這個問題，使每個表單只處理它自己的數據，而不是所有的數據，我將如何能夠應用自定義設置？

Answer 1

下面是我用現在的解決方案：

首先，一些事實：

1. 我將不得不覆蓋多個R/W操作（特別是改變一個領域後，失去了重點）
2. 我總是得到所有數據返回每個請求
3. 我必須涵蓋大量的數據（現場數據，存儲數據，標籤和配置）
4. 我必須優化這個爛攤子是性能的關鍵
5. 沒有辦法保存任何東西在服務器端的會話
6. 的形式廣泛嵌套一個到另一個也可以拆分或存在兩次

這就是我現在做的事：

我把所有關聯，並決定只用一個模型從支持自定義root屬性像someSubForm修改getData方法的模式推廣到去（見我的例子代碼曲estion）。這些字段被配置爲auto，因此需要對讀寫器進行更改。 也許不穩固，但它的工作原理。

下一個大問題是表格。即使表單處於其他形式，該表單也會嘗試設置每個字段。另外我需要設置很多獨立標籤。所以默認的表單不能使用，我應該擴展嗎？但是我應該如何以及從哪裏開始？在長時間瞭解源代碼後，我認爲我無法擴展，所以我決定創建一個完全自定義的窗體類以及一個自定義的mixin類和自定義的form.basic類。 爲什麼？因爲我需要形成僅查看直接放置在此表單中的字段，所以能夠設置標籤並將模型實例交給任何嵌套表單。

因此，我現在可以用自定義選擇器分別註冊我自己的監視器實例。哦，我忘記了我的新形式的第一件事;它通過包含名稱的屬性（如someSubForm）綁定到實體。

這用於當

1. 甲項被添加到形式
   • 任何字段獲得formId
   • 任何標籤獲得formId（未綁定到一個形式中，標記物）
   • 任何形式獲得parentFormId和實例
2. 監視器選擇器設置好的
3. 模型是負載到表單
4. 數據是從模型

其次是，現在有3個監視器實例取出

1. 通過使用新的選擇器，還收集所有領域尋找實體。通過任何窗體域會被忽略，因爲他們有自己的實體
2. 所有相同的標籤
3. 收集所有形式的

第三種是使用模型的新getData()方法修改loadRecord方法並將特定數據設置爲字段，標籤和整個模型爲任何形式。

總而言之，我的表現提升了800％。

Answer 2

既然你不能拆分你的JSON，你需要一個monolitic模型的webservice I/O：這是你已經有。

但是，當用戶使用數據時，您應該關注所需的數據，以減少加載和更新的時間。所以我會建議定義額外的模型和商店，這些模型和商店會返回每個選項卡或每個表單在選項卡中。根據您的數據樣本，您可以創建一個表單模型，它是在您的大型I/O模型通過複製數據加載（在回調中或者在監聽加載事件）後創建的。您甚至可以將這種代價高昂的複製操作推遲到用戶打開相應選項卡時。

我看到有一個子窗體，所以也許你可以嘗試添加一個關聯到窗體模型本身。

Ext.define('YourApp.model.FormModel', { 
extend: 'Ext.data.Model', 
fields: [ 
    { name: 'data'}, 
    { name: 'label'} 
], 
associations: [ { 
     type: 'hasMany', 
     model: 'YourApp.model.FormModel', 
     associationKey: 'someSubForm' 
    } 
] 
});