Displaying an Image/Icon inside an EXT.NET GridPanel Cell depinding on value

Question

Greeting,

I need to display an image/icon AND a value in an EXT.NET cell (of a gridpanel). The value comes from the datatable. The value can either be a string ‘good’ or ‘bad’ and resides in the column ‘Status’.

For example: good accept.png or bad cancel.png.

Layout:

 <ext:GridPanel ID="grid" runat="server">
<Store>
   <ext:Store ID="Store1" runat="server">
            <Reader>
                <ext:ArrayReader>
                    <Fields>
                        <ext:RecordField Name="status" Mapping="Status" />
                    </Fields>
                </ext:ArrayReader>
            </Reader>
        </ext:Store>
    </Store>
 <ColumnModel ID="ColumnModel1" runat="server">
        <Columns>
            <ext:Column DataIndex="status" Header="Status" Width="160">
            </ext:Column> 
        </Columns>
</ColumnModel>
</ext:GridPanel>

Now I have seen some exaples but I can’t seem to get the picture, I think it has something to do with this:

<script type="text/javascript">
    function imgRenderer(value, meta, record, rowIndex, colIndex, store) {
if(data == ‘good’)
{
return "<img src='accept.png'/>"
}
else (data == "bad") 
        {
            return "<img src='cancel.png'/>"
        }
    }
</script>

More info: http://miamicoder.com/2009/displaying-an-image-inside-an-ext-js-gridpanel-cell-part-2/ http://techmix.net/blog/2010/11/25/add-button-to-extjs-gridpanel-cell-using-renderer/

Answer 1

I forgot to return the value.

<ext:Column ColumnID="columnStatus" DataIndex="omschrijving" Header="Status" Width="150">
                <Renderer Handler="return imgRenderer(value);" />
</ext:Column>

Answer 2

You have options, although I think there is just one minor syntax error that is causing the problem.

Option 1:

In your existing code, you should change data to value.

Example

// existing
if(data == ‘good’)

// revised
if(value == ‘good’)

Option 2:

Rename your images to same value as the value, although this would still require using the value attribute instead of data. Rename accept.png to good.png, and same renaming with the "bad" image. With this change you shouldn't require the if|else statement.

Example

// existing
if(data == ‘good’)
{
    return "<img src='accept.png'/>"
}
else (data == "bad") 
{
    return "<img src='cancel.png'/>"
}

// revised
return '<img src="' + value + '.png"/>';

Hope this helps.