agorum.composite.form.element.button

Dieses Element stellt eine Schaltfläche dar und löst ein action-Event aus.

• Die Schaltfläche erscheint nur im Bearbeitungsmodus.
• Bei readOnly=true erscheint die Schaltfläche NICHT.

agorum.composite.form.element.button erbt alle Grundeigenschaften von element.

Beispiel

---

Skript zur Oberfläche

let aguila = require('common/aguila');

let form = aguila.create({
  width: 500,
  height: 300,
  type: 'agorum.composite.form.basic',

  elements: [
    {
      type: 'agorum.composite.form.element.button',
      name: 'button1',
      text: 'Flugmodus',
      label: 'Button mit Text',
    },
    {
      type: 'agorum.composite.form.element.button',
      name: 'button2',
      label: 'Button mit Icon',
      icon: 'aguila-icon airplanemode_active',
    },
  ],
});

form.on('action', data => {
  console.log('action - name des Buttons:', data.name);
  console.log('action - data:', data);
});

form;

 

Parameter

---

Alle Parameter in element gelten. Zusätzlich gelten die folgenden Parameter.

label

Definiert das Label der Schaltfläche.

Sie können den Parameter nachträglich ändern.

Beispiel

form.down('button1').label = 'Neues Label';

text

Definiert den Text der Schaltfläche.

Sie können den Parameter nachträglich ändern.

Beispiel

form.down('button1').text = 'Neuer Text';

icon

Definiert das Icon der Schaltfläche.

Sie können den Parameter nachträglich ändern.

Beispiel mit Standard-Icon

form.down('button1').icon = 'aguila-icon ac_unit';

Beispiel mit erstelltem Icon

Über die Aktion Icon erstellen können Sie eigene Icons definieren. Diese können Sie ebenfalls hier verwenden:

let icons = require('/agorum/roi/customers/agorum.icons/js/icons');
// ...
form.down('button1').icon = icons.cls('agorum:agorum-logo;color=#0069b5');

readOnlyHidden

Wert	Beschreibung
true	Blendet die Schaltfläche aus, sofern Sie den readOnly-Modus gesetzt haben.
false	Blendet die Schaltfläche ein.

Für Schaltflächen gedacht, die den Wert eines Formulars ändern, etwa eine Schaltfläche, die den Wert eines anderen Felds zurücksetzt.

locked

Sperrt die Schaltfläche, wenn für locked ein String übergeben wird, um dem Benutzer zu signalisieren, dass gerade etwas gemacht wird, und verhindert zudem, dass der Benutzer während der Aktion nochmals draufklicken kann.

• Eine Animation erscheint, die zeigt, dass die Schaltfläche beschäftigt ist.
• Wenn Sie null setzen, wird der Zustand wieder zurückgesetzt.
• Der String, der bei locked übergeben wird, wird während des gesperrten Zustands als Tooltip angezeigt.

Beispiel

let button = form.down('button1');
button.locked = 'Einen Moment bitte ...';

aguila.fork(() => {
  // hier wird irgendetwas Zeitaufwändiges gemacht
  // ...
})
.finally(() => {
  button.locked = null;
});

Events

---

Alle Events in element gelten. Zusätzlich gelten die folgenden Events.

action

Löst aus, wenn ein Benutzer die Schaltfläche anklickt.

• Verwenden Sie die Schaltfläche innerhalb einer form, löst auf Ebene der form ebenfalls ein action-Event aus.
• Das System übergibt dann als Parameter den Namen der Schaltfläche.

Beispiel

form.on('action', data => {
  console.log('action - name des Buttons', data.name);
});