Gemeinschaft Lernen Tools-Bibliothek Freizeit
suchen
Deutsch
Heim > Web-Frontend > js-Tutorial > So fügen Sie Extjs grid_extjs einen Bildstatus oder eine Schaltfläche hinzu

So fügen Sie Extjs grid_extjs einen Bildstatus oder eine Schaltfläche hinzu

WBOY
Freigeben： 2016-05-16 16:53:30
Original
1299 Leute haben es durchsucht

Wir müssen oft einen Bildstatus oder eine Schaltfläche im extjs-Raster hinzufügen. Fassen wir die von uns verwendeten Methoden zusammen:

1. Statusdarstellung:

Kopieren Code Der Code lautet wie folgt:

renderer:function(value){
if(value==0){
return "< img src=' images/icons/cancel.png'>";
}else if(value==1){
return " ";
}
Rückgabewert;
}

Renderer-Identifikationsstatus in Spalten hinzufügen. Der Effekt ist wie folgt:

http://images. cnitblog.com/ blog/489550/201304/19103818-94991d9869a6458e8a568efdea6081b5.png

2. Ereignisbehandlung:

Onclick-Ereignis direkt zum Bild hinzufügen:
Kopieren Sie den Code Der Code lautet wie folgt:

Detaillierte Wartung' 🎜>
Das Ereignis besteht darin, die erforderlichen Daten zu übergeben.

Eine andere Möglichkeit besteht darin, dem Raster ein Zellklickereignis hinzuzufügen:

Kopieren Sie den Code Der Code lautet wie folgt folgt:
Listener: {
cellClick: viewDoc
}

function viewDoc(grid, rowIdx, colIdx, e) {
var action = e. getTarget(). value;

}

Auf diese Weise können Sie die angeklickte Zelle abrufen und die Ereignisverarbeitung hinzufügen.

3. Sie können „actioncolumn“ verwenden, um Bildschaltflächen hinzuzufügen

Code kopieren Der Code lautet wie folgt:
{header:'certificate',sortable:false,width:80,align:'center',scope:this,

xtype:

'actioncolumn ',
items: [{
icon: '${ctx}/img/details.png',
tooltip: 'Zertifikat anzeigen',
handler: function(grid, rowIndex, colIndex) {
var record = grid.getStore().getAt(rowIndex); . .
}
]}


Auf diese Weise können Sie auch Bilder zu Rasterzellen hinzufügen.
Verwandte Etiketten：
extjs grid 添加图片
Quelle：php.cn
Vorheriger Artikel：Einführung in JavaScript-Methoden, -Eigenschaften und -Ereignisse zur Steuerung des Vollbildmodus verschiedener Browser_Javascript-Kenntnisse Nächster Artikel：Vertiefendes Verständnis der Schleifenanweisung für Anweisung in Javascript_Javascript-Kenntnisse
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Aktuelle Ausgaben
Beim Erstellen von node.appendChild in EXTJS auswählen und bearbeiten Ich bin sehr neu bei Extjs und arbeite derzeit mit einem Baum, in dem ich einen Zweig und ...
Aus 2024-04-03 17:39:46
0
1
397
Cypress-Test zum Abrufen von Elementattributen Ich habe gerade mit der Entwicklung eines neuen Testprojekts begonnen, um Cypress-Tests zu...
Aus 2024-03-30 18:13:55
0
1
352
verwandte Themen
Mehr>
Beliebte Empfehlungen
Beliebte Tutorials
Mehr>
Verwandte Tutorials
Beliebte Empfehlungen
Aktuelle Kurse
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage