agorum.composite.form.element.picker

Dieses Element stellt ein Text-Eingabefeld dar und zeigt ein Widget an, um weitere Informationen zu laden. Die Trigger-Schaltfläche neben dem Eingabefeld öffnet ein Widget.

agorum.composite.form.element.picker erbt alle grundlegenden Eigenschaften von element.

Beispiel einer Oberfläche

---

Skript zur Oberfläche

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

// the widget that should show, when clicking on the trigger
let pickerWidget = {
  type: 'agorum.vbox',
  width: 400,
  height: 400,
  items: [
    {
      type: 'agorum.textInput',
      label: 'A text',
      name: 'aText'
    },
    {
      type: 'agorum.button',
      text: 'Set value',
      name: 'aButton'
    }
  ]
};

// the form
let form = aguila.create({
  width: 500,
  height: 300,
  type: 'agorum.composite.form.basic',
  readOnly: true,
  showError: 'always',
  docked: {
    top: {
      type: 'agorum.toolbar',
      items: [
        {
          type: 'agorum.button',
          text: 'Switch readOnly',
          name: 'switchReadOnly'
        }
      ]
    }
  },
  elements: [
    {
      type: 'agorum.composite.form.element.picker',
      name: 'pickerField1',
      value: {
        value: 'This is a value',
        text: 'This is a text'
      },
      loose: false,
      label: 'Pickerfield 1',
      attached: pickerWidget,
      validation: [
        {
          required: true
        }
      ]
    }
  ]
});

let pf = form.down('pickerField1');
let switchReadOnly = form.down('switchReadOnly');

function initPickerEvents() {
  let pwText = form.down('aText');
  let aButton = form.down('aButton');

  // when the picker is in readOnly mode, there is no button, cause the
  // pickerWidget is not loaded
  if (aButton) {
    aButton.on('clicked', () => {
      form.value = {
        pickerField1: {
          value: pwText.value,
          text: pwText.value
        }
      };

      pf.fire('collapse');
    });
  }
}

// init picker events
initPickerEvents();


form.on('readOnlyChanged', () => {
  // when the pickerField changes to readOnly, reinit the events, cause the picker widget is recreated
  initPickerEvents();
});

pf.on('trigger', expanded => {
  console.log('trigger', expanded);
});

pf.on('expanded', () => {
  console.log('expanded');
});

pf.on('collapsed', () => {
  console.log('collapsed');
});


switchReadOnly.on('clicked', () => {
  form.readOnly = !form.readOnly;
});

form.on('valueChanged', v => {
  console.log('valueChanged', v);
});

form.on('validChanged', v => {
  console.log('validChanged', v);
});


form;

• Das Widget (hier pickerWidget) lädt nur dann, wenn das Element im Bearbeitungsmodus (readOnly = false) ist.
• Wechselt ein Benutzer zwischen der Bearbeitung und der Ansicht, verwirft das System das pickerWidget und die Events, die darauf gebunden sind.
• Das obige Beispiel reagiert auf readOnlyChanged und bindet die Events neu.

Parameter

---

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

value

Definiert den Wert des Elements.

• Der Wert muss text und value enthalten.
• Sie müssen den Wert genau so übergeben, wie Sie ihn gesetzt haben.
• Sie können diesen Parameter nachträglich ändern.

Beispiel

form.down('pickerField1').value= {
  text: 'Ein Text',
  value: 'Ein Wert'
};

attached

Übergibt das Widget, das erscheint, wenn ein Benutzer den Trigger anklickt.

• Dieser Parameter ist Pflicht.
• Sie können diesen Parameter nachträglich nicht ändern.
• Das übergebene Widget muss ein reines aon sein, kein erstelltes Widget.

Beispiel

// ...
{
  type: 'agorum.composite.form.element.picker',
  name: 'pickerField1',
  label: 'Pickerfield 1',
  attached: {
    type: 'agorum.vbox',
    width: 400,
    height: 400,
    items: [
      {
        type: 'agorum.textInput',
        label: 'A text',
        name: 'aText'
      },
      {
        type: 'agorum.button',
        text: 'Set value',
        name: 'aButton'
      }
    ]
  }
}
// ...

loose

Wert	Beschreibung
true	Die Breite des pickerWidgets orientiert sich nicht automatisch an der Breite des Eingabefelds. Ein Benutzer kann die Breite manuell ändern.
false (Standard)	Die Breite des pickerWidgets orientiert sich automatisch an der Breite des Eingabefelds.

disableTrigger

Wert	Beschreibung
true	Deaktiviert das automatische Öffnen des pickerWidgets, sodass ein Benutzer die Steuerung manuell übernehmen kann.
false (Standard)	Aktiviert das automatische Öffnen des pickerWidgets.

Events (fire)

---

Ausgehende Events zum Element hin.

expand

Öffnet das Widget programmatisch (analog zum Klick auf den Trigger).

Beispiel

form.down('pickerField1').fire('expand');

collapse

Schließt das Widget programmatisch (analog zum Klick auf den Trigger).

Beispiel

form.down('pickerField1').fire('collapse');

Events (on)

---

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

trigger

Löst aus, wenn ein Benutzer den Trigger anklickt, und gibt true (Widget wurde geöffnet) oder false (Widget wurde geschlossen) zurück.

Beispiel

form.down('pickerField1').on('trigger', expanded => {
  console.log('trigger', expanded);
});

expanded

Löst aus, wenn sich das Widget öffnet.

Beispiel

form.down('pickerField1').on('expanded', () => {
  console.log('expanded');
});

collapsed

Löst aus, wenn sich das Widget schließt.

Beispiel

form.down('pickerField1').on('collapsed', () => {
  console.log('collapsed');
});

key

Löst aus, wenn ein Benutzer eine Spezialtaste (alle Tasten außer Buchstaben / Zahlen) gedrückt hat, während sich der Tastaturfokus im Eingabefeld befindet, und gibt den Key-Code dieser Taste zurück.

Beispiel

Dieses Skript ermittelt die Key-Codes für die gewünschten Tasten.

form.down('pickerField1').on('key', number => {
  console.log('key number', number);
});