How can I add a status icon in front of a record in a gridpanel?

[mcdonald]

I have a set of colorful icons representing the status of the records, and I want to substitute these icons for boring status such as 0, 1, 2.

for instance:

red icon = 0,
green icon = 1,
yellow icon = 2

I already have a gridpanel as follows:

<ext:GridPanel ID="GridPanel2" runat="server" AutoExpandColumn="Id" StoreID="Store1">
    <ColumnModel ID="ColumnModel2" runat="server">
        <Columns>
            <ext:Column DataIndex="State" Header="State" />
            <ext:Column ColumnID="Id" DataIndex="Id" Header="Order ID" />
            <ext:Column DataIndex="ClientName" Header="Client Name" />
            <ext:Column DataIndex="SalesName" Header="Employ Name" />
            <ext:Column DataIndex="StartDate" Header="Start Time" Width="100">
                <Editor>
                    <ext:DateField ID="TextField6" runat="server" />
                </Editor>
            </ext:Column>
            <ext:Column DataIndex="DueDate" Header="Due Date" Width="100" />
        </Columns>
    </ColumnModel>
    <BottomBar>
        <ext:PagingToolBar ID="PagingToolBar1" runat="server" PageSize="10" StoreID="Store1" />
    </BottomBar>
    <LoadMask ShowMask="true" />
</ext:GridPanel>

I want to change the "State" column into an icon. i.e. bind the "State" column to the state retrieved from database with an icon. according to different states, different icons will be used.

Any Coolite master know how?
Thanks.

[geoffrey.mcgill]

Hi mcdonald,

What you need is a <Renderer>.

The following code demonstrates [warning: untested].

Example

<ext:Column DataIndex="State" Header="State" />
    <Renderer Handler="return '<img src=/images/status/' + value + '.gif />';" />
</ext:Column>

The <img> src attribute would point to the url of the status icon. I would name the "red icon" 0.gif/png and so on.

Several of the GridPanel examples in the explorer demonstrate <Renderers>, see https://examples1.ext.net/#/GridPanel/Layout/FitLayout/

Hope this helps.

[mcdonald]

0

Thanks, Mcgill,


It seems I have to pass a parameter to the handler, but how?


in VS, the tag </{0}:Column> is not recognized, is it </ext:Column>? if so, where will that {0} be put?


I referenced the layout example and made necessary modification below and succeed.


1. add




var stateString = '<img src=/images/status/{0}.png />';


** * * *var RTState = function(value) {
** * * * * *return String.format(stateString, value);
** * * *}








2. Changed column definition to:




<ext:Column Header="State" Sortable="true" DataIndex="State">*
<Renderer Fn="RTState" />*
</ext:Column>





But I really hope to know how to use the Handler.


Would you please tell me?

[mindcore1]

The difference between the Handler and the Fn parameters are the Fn calls the javascript function you specify between the quotes. The Handler is basically in-line javascript. Some reasons a developer may use Handler over the Fn are:

1. To reduce redundant code when working with multiple controls that have the same logic

2. You don't have to escape all the quotes you may need in your javascript, if you are returning, for example, an HTML tag.

I'm sure there are others

Fn

<script type="text/javascript">
var RTState = function(value) {
     var stateString = '<img src="/images/status/{0}.png" alt="{0}" height="16" width="16" />';
     return String.format(stateString, value);
}
</script>
.
.
.

<ext:Column Header="State" Sortable="true" DataIndex="State"> 
   <Renderer Fn="RTState" />
</ext:Column>

Handler

<ext:Column Header="State" Sortable="true" DataIndex="State"> 
   <Renderer Handler="return String.format('<img src=\"/images/status/{0}.png\" alt=\"{0}\" height=\"16\" width=\"16\" />', value);" />
</ext:Column>

Disclaimer: Above code hasn't been tested.

-MC

[mcdonald]

Thank you for your reply, MC.

It helped a lot.

And Coolite is amazing, esp. the desktop