mostrar imagen en una cuadrícula usando extjs

Question

Soy nuevo en extjs. Quiero mostrar imágenes de íconos para cada elemento de la grilla. ¿me puedes ayudar a alguien?

Obtengo la ruta de la imagen desde un archivo xml.

Mi código está por debajo. Aquí estoy mostrando la ruta de la imagen.

Tengo que reemplazarlo para mostrar la imagen.

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

tratando con el atributo "render" en la declaración de la columna que desea mostrar la imagen en. Usando el Render atributo que puede emitir el código HTML de su elección. Compruébelo en los foros de ExtJs :) Espero que lo señale en la dirección correcta

Answer 2

puede escribir el archivo xml como htmlspecialchars ("") luego puede verlo simplemente.

Answer 3

Debe agregar un representador a sus columnas para las que desea mostrar una imagen. El valor del procesador es la función a llamar para representar la etiqueta de la imagen.

Uno de sus elementos de columna modificada:

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

una función de ejemplo renderer:

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

En este ejemplo, el valor de la dataIndex debe ser la ruta completa de la imagen. Si no, entonces debes agregar alguna lógica adicional.

Answer 4

Otra alternativa que podría ser adoptado a su pregunta en particular sería fijar las imágenes en el archivo CSS, como:

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

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

a continuación, crear un render para añadir a los metadatos de células como se dicte:

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

de icono que muestra para su primera columna de nombre no cambia tras

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

m función aga como

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

Answer 6

simple

En su JSON pasar la cadena con < img src = " " />

después dataIndex:

fields:[ 

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

] 

{ 

text: 'images', 

dataIndex: 'images' 

} 

Answer 7

Este es el modo mejor, aplicar una columna widget y la imagen Reproductor escriba de esta manera:

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

en extjs 6