agorum.basicGrid

Dieses Widget stellt eine tabellarische Liste mit Spalten und Zeilen dar. Die Liste besteht aus zwei Elementen:

den Spaltenüberschriften (columns)
den Zeilen / Daten (rows)

Verwendung

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

let rowData = [
  {
    col1: 'Wert 1.1',
    col2: 'Wert 2.1',
    col3: 'Wert 3.1'
  },
  {
    col1: 'Wert 1.2',
    col2: 'Wert 2.2',
    col3: 'Wert 3.2'
  }
];

let basicGrid = aguila.create({
  width: 500,
  height: 300,
  type: 'agorum.basicGrid',
  columns: [
    {
      name: 'col1',
      text: 'Spalte 1',
      width: 100
    },
    {
      name: 'col2',
      text: 'Spalte 2',
      width: 100
    },
    {
      name: 'col3',
      text: 'Spalte 3',
      flexible: true
    }
  ],
  rows: rowData
});

basicGrid.on('selectionChanged', item => {  
  // ...
});

basicGrid;

Events

itemClicked

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

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

Beispiel

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

itemDblClicked

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

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

Beispiel

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

itemRightClicked

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

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

Beispiel

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

selectionChanged

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

Das System gibt als Parameter ein Array der selektierten Nummern zurück, beginnend mit 0.

Beispiel

basicGrid.on('selectionChanged', item => {  
  let rowNumber = item[0];
  console.log('selectionChanged: ' + rowNumber + ', ' + rowData[rowNumber].col1;
});

Parameter

border (Boolean)

Wert	Beschreibung
true	Erzwingt die Darstellung eines Rahmens um dieses Widget (sofern unterstützt).
false	Unterdrückt die Darstellung eines Rahmens um dieses Widget (sofern unterstützt).

columns (nur schreibend)

Definiert ein Array von Spalten mit folgenden Werten.

Wert	Beschreibung
name	Definiert einen eindeutigen Namen für die Spalte (Referenz aus rows).
text	Definiert eine Spaltenüberschrift.
width	Definiert die Breite der Spalte (nicht notwendig bei Verwendung von flexible=true).
flexible	true Füllt die Grüße automatisch nach dem verfügbaren Platz auf. false (Standard) Füllt die Grüße NICHT automatisch nach dem verfügbaren Platz auf.
hidden	true Blendet die Spalte im Standard aus. false (Standard) Blendet die Spalte im Standard ein.

Beispiel

[
  {
    name: 'col1',
    text: 'Spalte 1',
    width: 100
  },
  {
    name: 'col2',
    text: 'Spalte 2',
    width: 100
  },
  {
    name: 'col3',
    text: 'Spalte 3',
    flexible: true
  }
]

rows (nur schreibend)

Definiert ein Array von Daten, die in der Tabelle erscheinen.

Die Daten müssen analog zu den definierten Spalten (columns) sein, wobei das System den Namen der Spalte verwendet, um diesem einen Wert zuzuordnen. Ein Array-Element entspricht genau einer Zeile.
Legen Sie die Daten in einer separaten Variable ab und ordnen Sie diese dann also rows dem basicGrid zu. So können Sie später wieder auf die Daten zugreifen, etwa in den Events.

Beispiel

let rowData = [
  {
    col1: 'Wert 1.1',
    col2: 'Wert 2.1',
    col3: 'Wert 3.1'
  },
  {
    col1: 'Wert 1.2',
    col2: 'Wert 2.2',
    col3: 'Wert 3.2'
  }
];

basicGrid.rows = rowData;

selection

Verwendung	Beschreibung
Lesend	Definiert ein Array aus Zeilennummern, das die Nummer des ausgewählten Listenelementes enthält. Hat der Benutzer etwa die erste Zeile gewählt, so enthält selection den Wert: [ 0 ]
Schreibend	Wählt ein Element in der Liste. Erste Zeile wählen basicGrid.selection = [ 0 ];

Funktionen

reset

Setzt die Scrollposition der Liste auf den Anfang zurück.

Beispiel

// neue Daten laden
grid.rows = newRows;

// zum Anfang scrollen
grid.reset();

Beispiele

Komplettes Beispiel mit allen Events und Ausgabe der Ereignisse in ein Textfeld

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

let rowData = [
  {
    col1: 'Wert 1.1',
    col2: 'Wert 2.1',
    col3: 'Wert 3.1'
  },
  {
    col1: 'Wert 1.2',
    col2: 'Wert 2.2',
    col3: 'Wert 3.2'
  }
];

let widget = aguila.create(
  {
    type: 'agorum.vbox',
    width: 500,
    height: 300,
    items: [
      {
        type: 'agorum.basicGrid',
        name: 'basicGrid',
        columns: [
          {
            name: 'col1',
            text: 'Spalte 1',
            width: 100
          },
          {
            name: 'col2',
            text: 'Spalte 2',
            width: 100
          },
          {
            name: 'col3',
            text: 'Spalte 3',
            flexible: true
          }
        ],
        rows: rowData
      },
      {
        type: 'agorum.textDisplay',
        name: 'log',
        label: 'Ausgabe'
      },
      {
        type: 'agorum.textDisplay',
        name: 'logClicked',
        label: 'Ausgabe clicked'
      }
    ]
  }
);

let log = widget.down('log');
let logClicked = widget.down('logClicked');
let basicGrid = widget.down('basicGrid');

// wird ausgelöst, wenn sich die Auswahl ändert.
basicGrid.on('selectionChanged', item => {  
  let rowNumber = item[0];
  log.text = 'selectionChanged: ' + rowNumber + ', ' + rowData[rowNumber].col1;
});

// wird ausgelöst, wenn auf ein Element geklickt wird
basicGrid.on('itemClicked', item => {  
  let rowNumber = item;
  log.text = 'itemClicked: ' + rowNumber + ', ' + rowData[rowNumber].col1;
});

// wird ausgelöst, wenn auf ein Element rechts geklickt wird
basicGrid.on('itemRightClicked', item => {  
  let rowNumber = item;
  log.text = 'itemRightClicked: ' + rowNumber + ', ' + rowData[rowNumber].col1;
});

// wird ausgelöst, wenn auf ein Element doppel-geklickt wird
basicGrid.on('itemDblClicked', item => {  
  let rowNumber = item;
  log.text = 'itemDblClicked: ' + rowNumber + ', ' + rowData[rowNumber].col1;
});

// default, erste Zeile auswählen
basicGrid.selection = [ 0 ];

widget;

Beispiel mit Befüllung der Listeneinträge mit Elementen aus einem Ordner

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

let widget = aguila.create(
  {
    type: 'agorum.vbox',
    width: 500,
    height: 300,
    items: [
      {
        type: 'agorum.basicGrid',
        name: 'basicGrid',
        flexible: true,
        columns: [
          {
            name: 'id',
            text: 'ID',
            width: 100
          },
          {
            name: 'name',
            text: 'Name',
            flexible: true
          },
          {
            name: 'date',
            text: 'Datum',
            width: 100
          }
        ]
      },
      {
        type: 'agorum.textDisplay',
        name: 'log',
        label: 'Ausgabe'
      },
      {
        type: 'agorum.textDisplay',
        name: 'logClicked',
        label: 'Ausgabe clicked'
      }
    ]
  }
);

let rowData;

let log = widget.down('log');
let logClicked = widget.down('logClicked');
let basicGrid = widget.down('basicGrid');

// wird ausgelöst, wenn sich die Auswahl ändert.
basicGrid.on('selectionChanged', item => {  
  let rowNumber = item[0];
  log.text = 'selectionChanged: ' + rowNumber + ', ' + rowData[rowNumber].id;
});
// wird ausgelöst, wenn auf ein Element mit der linken Maustaste -geklickt wird 
basicGrid.on('clicked', item => {     
let rowNumber = item.rowIndex;
let cellNumber = item.cellIndex;
logClicked.text = 'clicked: row=' + rowNumber + ', col=' + cellNumber;
}); 


// füllen der Elemente aus dem Ordner "Eigene Dateien" des Benutzers
// wird im fork gemacht, da der Datenbank-Zugriff sonst die Oberfläche einfriert.
aguila.fork(() => {
  let folder = objects.find('home:MyFiles');
  let rows = folder.items().map(item => {
    return {
      id: item.ID,
      name: item.name,
      date: templates.fill('${datum:de|dd.MM.yyyy}', {datum: item.lastModifyDate})
    };
  });
  
  return rows;
}).then(rows => {
  rowData = rows;
  basicGrid.rows = rowData;
  
  // ersten Eintrag auswählen
  basicGrid.selection = [ 0 ];
});

widget;