Detail

Developer Tip of the Month: "actioncolumns" im Modern-Toolkit von ExtJS

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.

Cookie-Einstellungen

Auch wir verwenden Cookies. Durch die weitere Nutzung unserer Website sind Sie mit der Verwendung dieser Cookies einverstanden. Darüber hinaus sind auf dieser Website Dienste anderer Dienstleister eingebunden. Dazu werden ebenfalls Cookies gesetzt, die sie jeder Zeit ändern können. Wir verwenden keine Cookies für Werbezwecke oder Social Media. Weitere Details: Datenschutzerklärung und Impressum

Details anzeigen

Name Cookie Dauer Zweck
eye-cookie Consent Cookie 10 Jahre Dieses Cookie speichert Informationen zum Verwalten Ihrer Cookie-Einstellungen für diese Webseite
Details anzeigen

Wir verwenden Dienste von Drittanbietern.

Name Cookie Dauer Zweck
Goolge Maps google-maps Google Maps Cookie
Google Recaptcha google-recaptcha
Google Analytics GA