visualizza l'immagine in una griglia usando extjs

Question

Sono nuovo per gli extjs. Voglio visualizzare le immagini delle icone per ogni elemento della griglia. puoi aiutarmi per favore qualcuno?

Sto ottenendo il percorso dell'immagine da un file xml.

Il mio codice è di sotto. qui sto visualizzando il percorso dell'immagine.

Devo sostituirlo visualizzando l'immagine.

Ext.onReady(function(){ 

     var store = new Ext.data.Store({ 
     url: 'new_frm.xml', 

       reader: new Ext.data.XmlReader({ 
       record: 'message', 
       fields: [{name: 'first'},{name: 'last'},{name: 'company'},{name: 'email'},{name: 'gender'},{name: 'form-file'},{name: 'state'},{name: 'Live'},{name: 'content'}] 
      }) 
    }); 

     var grid = new Ext.grid.GridPanel({ 
     store: store, 
     columns: [ 
      {header: "First Name", width: 120, dataIndex: 'first', sortable: true}, 
      {header: "Last Name", width: 180, dataIndex: 'last', sortable: true}, 
      {header: "Company", width: 115, dataIndex: 'company', sortable: true},   
      {header: "Email", width: 100, dataIndex: 'email', sortable: true}, 
      {header: "Gender", width: 100, dataIndex: 'gender', sortable: true}, 
      {header: "Photo", width: 100, dataIndex: 'form-file', sortable: true}, 
      {header: "State", width: 100, dataIndex: 'state', sortable: true}, 
      {header: "Living with", width: 100, dataIndex: 'Live', sortable: true}, 
      {header: "Commands", width: 100, dataIndex: 'content', sortable: true} 

     ], 
     renderTo:'example-grid', 
     height:200 
    }); 

    store.load(); 
}); 

Answer 1

cercando utilizzando l'attributo "render" sulla dichiarazione colonna che si desidera visualizzare l'immagine in. Usando il rendering degli attributi è possibile l'uscita HTML di vostra scelta. Dai un'occhiata ai forum di ExtJs :) Spero che punti nella giusta direzione

Answer 2

puoi scrivere il file xml come htmlspecialchars ("") quindi puoi vederlo semplicemente.

Answer 3

È necessario aggiungere un rendering alle colonne per visualizzare un'immagine. Il valore del renderer è la funzione da chiamare per eseguire il rendering del tag immagine.

Uno dei suoi elementi colonna modificata:

{header: "Photo", width: 100, renderer:renderIcon, dataIndex: 'form-file', sortable: true}, 

una funzione di esempio di rendering:

function renderIcon(val) { 
    return '<img src="' + val + '">'; 
} 

In questo esempio, il valore della DataIndex deve essere il percorso completo dell'immagine. In caso contrario, è necessario aggiungere una logica aggiuntiva.

Answer 4

Un'altra alternativa che potrebbe essere adottato alla tua domanda particolare potrebbe essere quella di impostare le immagini in file CSS come:

.icon-red { 
    background-image: url('red.png'); 
    background-repeat: no-repeat; 
} 

.icon-green { 
    background-image: url('green.png'); 
    background-repeat: no-repeat; 
} 

quindi creare un rendering da aggiungere ai metadati cella come è reso:

renderIcon: function(value, metadata, record, rowIndex, colIndex, store) { 

    // set the icon for the cells metadata tags 
    if (value > 0) { 
     metadata.css = metadata.css + ' icon-green '; 
    } else { 
     metadata.css = metadata.css + ' icon-red '; 
    } 

    // add an individual qtip/tooltip over the icon with the real value 
    metadata.attr = 'ext:qtip="' + (value) + '"'; 

    return ' '; 
} 

Answer 5

per visualizzare l'icona per la vostra prima colonna nome non a seguito di variazioni

{header: "First Name", width: 120, renderer:first, dataIndex: 'first', sortable: true}, 

m Funzione ake come

function first(val) 
{ 
return '<img src="' + val + '">'; 
} 

Answer 6

semplice

Nel suo JSON passare la stringa con < img src = " " />

dopo DataIndex:

fields:[ 

{name: 'images', type: 'string'} 

] 

{ 

text: 'images', 

dataIndex: 'images' 

} 

Answer 7

Questa è la modalità migliore, applicare una colonna widget e immagine widget di digitare come questo:

columns:[ 
     {text:'Image', xtype:'widgetcolumn', widget:{xtype:'image', src: 'http://www.sencha.com/img/20110215-feat-html5.png'}, dataIndex:'image'}] 

su extjs 6