display image in a grid using extjs

Question

I am new to extjs. I want to display icon images for each grid elements. can you please healp me anybody? i am getting the image path from an xml file.

my code is below. here i am displaying image path. i have to replace it by displaying 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

Use Google and click Show more results from extjs.com.

The discussion board of Ext JS is an indispensable source of examples and solutions.

Answer 2

trying using the "render" attribute on the column declaration that you want to show the image in. Using the Render attribute you can output the HTML of your choice. Check it out on the ExtJs forums :) Hope that points you in the right direction

Answer 3

you can write the xml file as htmlspecialchars("") then you can view it simply .

Answer 4

You need to add a renderer to your columns that you want to display an image. The renderer value is the function to call to render the image tag.

One of your column elements modified:

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

A sample renderer function:

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

In this example, the value of the dataIndex must be the full path of the image. If not then you must add some additional logic.

Answer 5

how load a image for client??? or only can load it for server???

Answer 6

I think the answerer above meant:

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

}