agorum.comboBox, agorum.tokenBox

Das System zeigt dieses Widget als Auswahlmenü an, in das der Benutzer Werte entweder direkt eingeben oder aus einer Liste wählen kann.

agorum.tokenBox lässt die Auswahl von mehreren Werten gleichzeitig zu. Der Parameter value besitzt in diesem Fall den Datentyp Array.

Verwendung

---

 

 

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

let data = [
  {
    value: 0,
    text: 'null'
  },
  {
    value: 1,
    text: 'eins'
  },
  {
    value: 2,
    text: 'zwei'
  },
  {
    value: 3,
    text: 'drei'
  },
];

let combo = aguila.create({
  type: 'agorum.comboBox',
  restricted: true,
  data: data
});

combo.on('query', query => {
  query = query.toLowerCase();

  combo.data = data.filter(row => row.text.toLowerCase().indexOf(query) >= 0);
});

combo;

Events

---

query (String)

Löst aus, sobald sich der vom Benutzer direkt eingegebene Text ändert.

Das System filtert den Inhalt des Parameters data neu, um dem als Parameter übergebenen Eingabetext zu entsprechen und damit die Liste zu aktualisieren.

expanded

Löst aus, wenn ein Benutzer die zugehörige Liste aufklappt.

collapsed

Löst aus, wenn ein Benutzer die zugehörige Liste zuklappt.

Parameter

---

data (Array)

Definiert die Elemente der Liste, die der Benutzer zur Auswahl erhält.

Als Array-Elemente erwartet das System Objekte mit folgendem Aufbau:

{
  value: <value>,
  text: <text>
}

• Der Benutzer sieht den Wert von text, während das System den Wert von value als Wert dieses Felds übernimmt, wenn der Benutzer den Eintrag wählt.
• Das System transformiert das übergebene Array intern.
• Sie können das Array nicht wieder auslesen.
• Sie müssen das Array separat halten, wenn Sie es noch separat verwendet möchten, etwa, um nach Selektion noch zusätzlich vorhandene Spalten auszulesen.

restricted (Boolean)

Wert	Beschreibung
true	Der Benutzer kann nur Werte eingeben / wählen, die in der Liste zur Auswahl stehen.
false (Standard)	Der Benutzer kann beliebige Eingaben tätigen. Halten Sie im data-Array text und value jedes vorhandenen Eintrags identisch, da das System sonst nicht unterscheiden kann, ob ein Benutzer einen angezeigten Wert gewählt hat (value von text abweichend) oder eingegeben hat (value und text identisch).

textIsHtml (Boolean)

Wert	Beschreibung
true	Gibt den in den Daten gelieferten Text direkt als HTML aus. Sie können damit etwa Styles in den Ergebnissen verwenden.
false (Standard)	Gibt den in den Daten gelieferten Text NICHT direkt als HTML aus.

Funktionen

---

keine

Beispiele

---

keine