In der aktuellen Frameworkversion (zum Zeitpunkt der Erstellung dieses Artikels 6.5) ist es von Haus aus nicht möglich, die "actioncolumns" in ein Grid einzufügen, da diese nicht existieren. Um dennoch klickbare Icons in einer Column zu realisieren, geht man wie in diesem Blog-Beitrag beschrieben vor.
Die Grid-column wird wie folgt definiert:
{
cell: {
xtype: 'gridcell',
encodeHtml: false
},
tpl: ''
}
Wir fügen der Column eine Cell-Config mit encodeHtml: false hinzu. Dies bewirkt, dass das HTML-Template der Column direkt gerendert wird.
Anschließend erstellen wir im ViewController einen Listener, um als Handler für einen Icontap zu dienen:
control: {
'grid': {
itemtap: 'onItemTap'
}
}
Der Handler wird nun wie folgt definiert:
onItemTap: function(grid, index, target, record, e) {
if(e.target.classList.contains("fa-trash") ||
e.target.children[0] && e.target.children[0].classList.contains("fa-trash"))
{
// auszuführender Code bei Icon-Tap hier einfügen
}
}
Wir überprüfen, ob das Ziel des Taps das Icon bzw. dessen Parent war. (Parent sollte nur bei einzelnen Icons in einer Column auf diese Weise überprüft werden). Hierbei ist es wichtig, auf die zu überprüfende Klasse zu achten.
Bei Bedarf kann über den Stylesheet zusätzlich noch cursor: pointer; für das Icon eingefügt werden, um das Verhalten eines Buttons abzubilden.
Lauffähiges Beispiel als fiddle.