使用動態鍵/值對管理Map數據結構的良好ExtJS組件是什麼

Question

我想徵詢以下問題的建議。

我在JSON實體表示，看起來像這樣：

{ 
    id: 1, 
    prop1: "someValue", 
    prop2: "someValue", 
    dynamicProperties: { 
    name1: "value1", 
    name2: "value2", 
    name3: "value3" 
    } 
} 

正如你看到的，我的實體具有屬性「PROP1」和「PROP2」，它可以採取任何價值，它也有一個屬性「dynamicProperties」，它可以具有可變數目的屬性（例如「name1，」name2「，」name3「等等）

我希望我的用戶能夠創建/更新/刪除屬性dynamicProperties。也就是說，可以添加值爲「value4」的新屬性「name4」並更改屬性「name2」的值和/或刪除「name1」/「value1」對。

我最初考慮使用Ext.grid.PropertyGrid來顯示dynamicProperties。這使我可以編輯我的屬性的值，但它不允許我添加新的屬性。默認情況下，PropertyGrid的名稱列不可編輯，我無法更改此設置。

有沒有辦法實現我在找的東西？

，我想到的唯一的選擇是我的JSON表示更改爲類似下面的JSON和使用常規Ext.grid.Panel來管理它：

{ 
    id: 1, 
    prop1: "someValue", 
    prop2: "someValue", 
    dynamicProperties: [ 
    { 
     name: "name1", 
     value: "value1" 
    }, 
    { 
     name: "name2", 
     value: "value2" 
    }, 
    { 
     name: "name3", 
     value: "value3" 
    } 
    ] 
} 

我不喜歡這方法，因爲我需要驗證該名稱必須是唯一的，並且可能會添加一個id屬性。

在我使用Java實體，其中dynamicProperties是這樣一個HashMap後端：

@ElementCollection 
    @MapKeyColumn(name="name") 
    @Column(name="value") 
    @CollectionTable(name="entity_dynamic_properties", joinColumns=@JoinColumn(name="entity_id")) 
    private Map<String, String> dynamicProperties; 

謝謝你的建議。

Answer 1

您可以在行編輯器中包含其他組件。

在你的情況下，我會建議在允許兩個字段（名稱/值）的非動態屬性下放置一個單元格編輯網格，用戶可以鍵入他們想要的內容。

我遇到了類似的問題，並用this question and answer解決了這個問題，我認爲它涵蓋了如何做到這一點的基礎。