agorum.textInput

Dieses Widget stellt ein einzeiliges Eingabefeld dar. Sie können damit Eingabefelder erstellen. Über einen vordefinierten Style kann ein Eingabefeld auch als Suchfeld kenntlich gemacht werden.

Verwendung

 

 

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

let widget = aguila.create({
  width: 300,
  height: 300,
  type: 'agorum.vbox',
  title: 'agorum.textInput- Beispiel',
  items: [     
    {
      type: 'agorum.textInput',
      name: 'usernameField',
      label: 'Benutzername',
      value: '',
      placeholder: 'user@domain'
    }
  ]
});

let usernameField = widget.down('usernameField');

usernameField.on('valueChanged', value => {
  log.value = value;
});

widget;

Events

keine

Parameter

password (Boolean)

Wert	Beschreibung
true	Verschleiert den eingegebenen Text durch schwarze Punkte.
false (Standard)	Stellt den eingegebenen Text normal dar.

Beispiel

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

let widget = aguila.create({
  type: 'agorum.vbox',
  width: 300,
  items: [
    {
      type: 'agorum.textInput',
      name: 'passwordField',
      label: 'Password',
      password: true,
    },
  ],
});

widget;

 

placeholder (String)

Definiert einen Platzhaltertext, der im Eingabefeld angezeigt wird, solange der Benutzer noch keinen Wert eingegeben hat.

Diese Eigenschaft kann auch nach der Erstellung des Widgets geändert werden. Die Änderung wird sofort in der Oberfläche sichtbar.

Beispiel

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

let widget = aguila.create({
  type: 'agorum.vbox',
  width: 300,
  items: [
    {
      type: 'agorum.textInput',
      name: 'searchField',
      label: 'Suche',
      placeholder: 'Suchbegriff eingeben...',
    },
  ],
});

// Platzhalter nachträglich ändern
let searchField = widget.down('searchField');

searchField.placeholder = 'Neuen Suchbegriff eingeben...';

widget;

 

cls (String)

Setzt die hier definierte CSS-Klasse clientseitig auf die Widget-Komponente.

Sie können die vordefinierte CSS-Klasse search-input verwenden, um das Eingabefeld mit abgerundeten Ecken anzuzeigen und das Feld so als Suchfeld erkennbar zu machen:

let widget = aguila.create({
  type: 'agorum.vbox',
 
  items: [
    {
      type: 'agorum.textInput',
      cls: 'search-input',
    },
  ],
});

widget;

 

selection (Array)

Selektiert (markiert) Textbereiche im Eingabefeld programmatisch. Die Eigenschaft erwartet ein Array von Objekten mit start und end, die den zu selektierenden Bereich angeben. Um die Selektion im Eingabefeld sichtbar zu machen, muss zusätzlich der Fokus gesetzt werden.

Dies ist nützlich, wenn nach dem Setzen eines Werts der Benutzer einen bestimmten Teil des Texts sofort durch Tippen ersetzen können soll, etwa den Dateinamen ohne Endung in einem Umbenennen-Dialog.

Beispiel

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

let widget = aguila.create({
  type: 'agorum.vbox',
  width: 300,
  items: [
    {
      type: 'agorum.textInput',
      name: 'fileNameField',
      value: 'dokument.pdf',
    },
  ],
});

let fileNameField = widget.down('fileNameField');

// Nur den Dateinamen ohne Endung selektieren (Zeichen 0 bis 8)
fileNameField.selection = [
  {
    start: 0,
    end: 8,
  },
];
fileNameField.fire('focus');

widget;

 

 

Zum Selektieren des gesamten Texts setzen Sie end auf die Länge des Werts:

fileNameField.selection = [
  {
    start: 0,
    end: fileNameField.value.length,
  },
];
fileNameField.fire('focus');

Funktionen

keine