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 help me anybody?

I am getting the image path from an xml file.

My cod

Answer 1

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="' + val + '">';
}

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 2

for displaying icon for your first name column do following changes

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

make function as

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

Answer 3

Another alternative that could be adopted to your particular question would be to setup the images in the CSS file like:

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

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

Then create a render to add to the cell metadata as it is rendered:

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 4

Simple

In his Json pass the string with < img src = " " />

after dataIndex :

fields:[

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

]

{

text: 'images',

dataIndex: 'images'

}

Answer 5

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

Answer 6

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