Was ist eine gute ExtJS-Komponente, um eine Kartendatenstruktur mit dynamischen Schlüssel/Wert-Paaren zu verwalten

Question

Ich möchte um Ihren Rat mit dem folgenden Problem bitten.

Ich habe eine Entität Darstellung in JSON, die wie folgt aussieht:

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

Wie Sie sehen, hat meine Entitätseigenschaften „PROP1“ und „prop2“, die jeden Wert annehmen kann, und es hat auch eine Eigenschaft "dynamicProperties", die eine variable Anzahl von Eigenschaften haben können (zB "name1", "name2", "name3" usw.)

Ich möchte, dass meine Benutzer die Eigenschaft dynamicProperties erstellen/aktualisieren/löschen können. Das heißt, es wird möglich sein, eine neue Eigenschaft "name4" mit dem Wert "value4" hinzuzufügen und den Wert der Eigenschaft "name2" zu ändern und/oder das Paar "name1"/"value1" zu löschen.

Ich dachte anfangs über Ext.Grid.PropertyGrid, um die DynamicProperties anzuzeigen. Dadurch kann ich die Werte meiner Eigenschaften bearbeiten, aber ich kann keine neuen Eigenschaften hinzufügen. Standardmäßig ist die Name-Spalte von PropertyGrid nicht editierbar und ich konnte dies nicht ändern.

Gibt es eine Möglichkeit zu erreichen, wonach ich suche?

Die einzige Alternative, die ich gedacht habe von meiner JSON Darstellung zu so etwas wie die folgenden JSON zu ändern und eine regelmäßige Ext.grid.Panel verwenden, um es zu verwalten:

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

Ich mag das nicht Ansatz, weil ich validieren müsste, dass der Name eindeutig sein muss, und vielleicht eine ID-Eigenschaft hinzufügen.

Auf dem Backend ich eine Java Entity verwenden, wo die DynamicProperties ist ein HashMap wie folgt aus:

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

Vielen Dank für Ihre Beratung.

Answer 1

Sie können zusätzliche Komponenten in den Zeileneditor aufnehmen.

In Ihrem Fall würde ich vorschlagen, eine Zelle Bearbeitungsgitter unter den nicht-dynamischen Eigenschaften, die für zwei Felder (Name/Wert) ermöglicht und Benutzer können eingeben, was sie wollen.

Ich stieß auf ein ähnliches Problem und löste es mit this question and answer, die ich denke, deckt die Grundlage, wie dies zu tun ist.