controls

Beschreibung

Optional. Eine Reihe von Konfigurationen, die eine oder mehrere benutzerdefinierte Steuerelemente definiert

Info

Die Eigenschaft controls ermöglicht es Ihnen, benutzerdefinierte Editbar-Steuerelemente auf Basis von Grundlegenden Steuerelementen und/oder Komplexen Steuerelementen zu erstellen. Verwenden Sie die Eigenschaft properties, um das/die benutzerdefinierte(n) Steuerelement(e) auf die benötigten Elemente (Formen, Gruppen, Swimlanes usw.) anzuwenden.

Weitere Informationen zur Konfiguration finden Sie in der Anleitung Editbar-Konfiguration!

important

Wir empfehlen nicht, Standard-Steuerelemente beim Erstellen eines benutzerdefinierten Steuerelements neu zu definieren. Verwenden Sie für jedes benutzerdefinierte Steuerelement einen individuellen Namen!

Verwendung

controls?: {
    [type: string]: object, // benutzerdefiniertes Steuerelement
};

Parameter

• type - der Typname eines benutzerdefinierten Steuerelements
  • object - das Konfigurationsobjekt eines neuen Steuerelements auf Basis von Grundlegenden Steuerelementen und/oder Komplexen Steuerelementen

controls: {
      estimate: { /*...*/ }, // erstellt ein neues Steuerelement "estimate" mit benutzerdefinierten Konfigurationen
      // weiteres Steuerelement
}

Beispiel

const editor = new dhx.DiagramEditor("editor_container", {
    type: "org",
    view: {
        // editbar: true, // zeigt die Standard-Editbar an
        // oder Editbar über ein Objekt konfigurieren
        editbar: {
            css: "custom_css",
            show: true,
            width: 300,
            properties: {
                $shape: [
                    { type: "estimate" }, // wendet das benutzerdefinierte Steuerelement "estimate" an
                    { type: "name" } // wendet das benutzerdefinierte Steuerelement "name" an
                ]
            },
            controls: {
                // erstellt das benutzerdefinierte Steuerelement "estimate"
                estimate: {
                    type: "fieldset",
                    label: "Time estimate",
                    rows: [
                        { type: "datepicker", key: "date_start", label: "Date start" },
                        { type: "datepicker", key: "date_end", label: "Date end" }
                    ]
                },
                // erstellt das benutzerdefinierte Steuerelement "name"
                name: { type: "input", label: "Name", key: "name" }
            }
        }
    }
});

Changelog: Die Eigenschaft wurde in v6.0 hinzugefügt

Verwandter Artikel: Editbar-Konfiguration

Verwandtes Beispiel: Diagram Editor. Standardmodus. PERT-Diagramm mit der Legende