afficher l'image dans une grille en utilisant extjs

Question

Je suis nouveau à extjs. Je veux afficher des images d'icônes pour chaque élément de la grille. pouvez-vous s'il vous plaît m'aider quelqu'un? Je reçois le chemin d'image à partir d'un fichier XML.

Mon code est ci-dessous. Ici, je montre le chemin de l'image.

Je dois le remplacer en affichant l'image.

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

essayer en utilisant l'attribut « rendu » sur la déclaration de la colonne que vous voulez afficher l'image. Utilisation de la sortie d'attribut de rendu, vous pouvez le HTML de votre choix. Check it out sur les forums ExtJs :) Espérons que vous pointez dans la bonne direction

Answer 2

vous pouvez écrire le fichier xml comme htmlspecialchars ("") alors vous pouvez le voir simplement.

Answer 3

Vous devez ajouter un moteur de rendu à vos colonnes pour afficher une image. La valeur de rendu est la fonction à appeler pour rendre la balise d'image.

L'un de vos éléments de colonne modifiés:

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

Fonction échantillon renderer:

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

Dans cet exemple, la valeur de la dataIndex doit être le chemin complet de l'image. Si non, vous devez ajouter une logique supplémentaire.

Answer 4

Une autre alternative qui pourrait être adoptée à votre question particulière serait d'installer les images dans le fichier CSS comme:

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

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

Ensuite, créez un rendu à ajouter aux métadonnées de cellule tel qu'il est rendu:

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

pour afficher l'icône de votre première colonne de nom ne change suivant

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

m fonction Ake comme

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

Answer 6

Simple

Dans sa Json passer la chaîne avec < img src = " " />

après dataIndex:

fields:[ 

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

] 

{ 

text: 'images', 

dataIndex: 'images' 

} 

Answer 7

Ce mode est mieux, appliquer une colonne widget et de l'image widget de tapez comme ceci:

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

sur les extensions 6