agorum.imageList

Dieses Widget stellt eine Liste von Bildern dar.

Verwendung

Das folgende Beispiel sucht PDF-Dateien im System und zeigt von der ersten 10 gefundenen Dokumenten die erste Seite als Vorschaubild an:

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

let widget = aguila.create(
  {
    type: 'agorum.vbox',
    width: 500,
    height: 300,
    items: [
      {
        type: 'agorum.imageList',
        name: 'imageList',
        flexible: true
      },
      {
        type: 'agorum.textDisplay',
        name: 'log',
        label: 'Ausgabe'
      }
    ]
  }
);

let listData;

let log = widget.down('log');
let imageList = widget.down('imageList');

// Löst aus, wenn sich die Auswahl ändert
imageList.on('selectionChanged', item => {  
  let rowNumber = item[0];
  log.text = 'selectionChanged: ' + rowNumber + ', ' + listData[rowNumber].id;
});

// Sucht alle PDF-Dokumente im System und zeigt die ersten 10 an
aguila.fork(() => {
  // Sucht nach PDF-Dokumenten
  let docs = objects.query('nameextension:pdf').limit(10).search('id').rows;
  
  // Erstellung des Datenblocks mit dem Vorschaubild der ersten Seite
  // als _nc (noCache) wird das letzte Änderungsdatum verwendet, um
  // Browsercaching bei Änderung des Dokuments zu vermeiden
  return docs.map(doc => {
    doc = objects.find(doc.id);
    return {
      src: 'https://agorumdocproxy.agorum.com/api/rest/object/preview/' + doc + '.jpg?page=' + 1 + 
        '&size=' + 120 + '&_nc=' + doc.lastModified,
      text: doc.name,
      id: doc.ID
    };
  });
  
}).then(data => {
  imageList.data = listData = data;
  imageList.selection = [ 0 ];
});

widget;

Events

hovered

Löst aus, sobald ein Benutzer auf die imageList (außerhalb eines Bilds) mit der Maus fährt.

itemClicked

Löst aus, sobald ein Benutzer auf ein Element in der Liste mit der linken Maustaste klickt.

Das System gibt als Parameter die selektierte Zeilennummer zurück, beginnend mit 0.

Beispiel

imageList.on('itemClicked', item => {  
  let rowNumber = item;
  console.log('itemClicked: ' + rowNumber + ', ' + listData[rowNumber].col1;
});

itemDblClicked

Löst aus, sobald ein Benutzer auf ein Element in der Liste doppelklickt.

Das System gibt als Parameter die selektierte Zeilennummer zurück, beginnend mit 0.

Beispiel

imageList.on('itemDblClicked', item => {  
  let rowNumber = item;
  console.log('itemDblClicked: ' + rowNumber + ', ' + listData[rowNumber].col1;
});

itemRightClicked

Löst aus, sobald ein Benutzer auf ein Element in der Liste mit der rechten Maustaste klickt.

Das System gibt als Parameter die selektierte Zeilennummer zurück, beginnend mit 0.

Beispiel

imageList.on('itemRightClicked', item => {  
  let rowNumber = item;
  console.log('itemRightClicked: ' + rowNumber + ', ' + listData[rowNumber].col1;
});

itemHovered

Löst aus, sobald die Maus über ein Element fährt.

Das System gibt als Parameter die selektierte Zeilennummer zurück, beginnend mit 0.

Beispiel

imageList.on('itemHovered', item => {  
  let rowNumber = item;
  console.log('itemHovered: ' + rowNumber + ', ' + listData[rowNumber].col1;
});

selectionChanged

Löst aus, sobald sich die Auswahl in der Liste ändert, d. h. immer dann, wenn der Benutzer einen neuen Eintrag aus der Liste wählt.

Das System übergibt als Parameter ein Array der selektierten Nummern, beginnend mit 0.

Beispiel

imageList.on('selectionChanged', item => {  
  let rowNumber = item[0];
  console.log('selectionChanged: ' + rowNumber + ', ' + listData[rowNumber].id;
});

Parameter

 data (nur schreiben)

Übergibt die Daten für die angezeigten Bilder als Array, wobei ein Element im Array einem Bild entspricht.

Beispiel

{
  group: 'Gruppentitel',
  tint: null, // 'coral', 'lightgray'
  src: 'url des Bildes',
  text: 'Text unter dem Bild',
  id: 'ID des Bildes',
  angle: 90
}

selection

[ 0 ]

basicGrid.selection = [ 0 ];

Funktionen

keine