[CLOSED] Show Image Component Dynamically

[Mario]

Hi,

I have need to show a list of record with a image in first position.
My code is similar to this:

<ext:GridPanel runat="server" ID="GridPanelRisultato" MarginSpec="2 0 0 0" Flex="1" Border="true">
            <Store>
                <ext:Store runat="server" ID="StoreRisultato">
                    <Model>
                        <ext:Model runat="server">
                            <Fields>
                                <ext:ModelField Name="CodiceTipoUtente" Type="String" />
                                <ext:ModelField Name="CodiceUtente" Type="String" />
                                <ext:ModelField Name="Cognome" Type="String" />
                                <ext:ModelField Name="Nome" Type="String" />
                                <ext:ModelField Name="RagioneSociale" Type="String" />
                                <ext:ModelField Name="Stato" Type="String" />
                            </Fields>
                        </ext:Model>
                    </Model>
                </ext:Store>
            </Store>
            <ColumnModel runat="server" EnableColumnHide="False">
                <Columns>
                    <ext:ComponentColumn runat="server" DataIndex="CodiceTipoUtente" Width="22">
                        <Component>
                            <ext:Image runat="server" Height="20" ImageUrl ="~/Immagini/Cliente.png" />
                        </Component>
                    </ext:ComponentColumn>
                    <ext:Column runat="server" Text="CodiceUtente" DataIndex="CodiceUtente" Width="100"/>
                    <ext:Column runat="server" Text="Cognome" DataIndex="Cognome" Width="100"/>
                    <ext:Column runat="server" Text="Nome" DataIndex="Nome" Width="100"/>
                    <ext:Column runat="server" Text="RagioneSociale" DataIndex="RagioneSociale" Width="100"/>
                    <ext:Column runat="server" Text="Stato" DataIndex="Stato" Width="100"/>
                </Columns>
            </ColumnModel>
            <Plugins>
                <ext:FilterHeader runat="server" />
            </Plugins>
        </ext:GridPanel>

In the code, the line:

<ext:Image runat="server" Height="20" ImageUrl ="~/Immagini/Cliente.png" />

show a static Image.... always Cliente.png

I need to use a dynamic reference to Image, like:

<ext:Image runat="server" Height="20" ImageUrl ="~/Immagini/{CodiceTipoUtente}.png" />

Can you help me?

Tnx

[Daniil]

Hi @Mario,

Please use a ComponentColumn's BeforeBind like this.

Example

<ext:ComponentColumn runat="server" DataIndex="image">
    <Component>
        <ext:Image runat="server" />
    </Component>
    <Listeners>
        <BeforeBind Handler="e.config[0].imageUrl = Ext.net.ResourceMgr.resolveUrl(Ext.String.format('~/Images/{0}.png', e.record.data.image));" />
    </Listeners>
</ext:ComponentColumn>

[Mario]

TNX Daniil, It Works!

Another question:
How do I add dynamic text (bound to record data) to the right of the image in the same column?

:)

[Daniil]

You could add a Label. For that you might need to wrap both - Image and Label - in a Container with an HBoxLayout to position them horizontally.

[Mario]

OK Danill,
but if I change the code, transforming this:

<ext:ComponentColumn runat="server" DataIndex="image">
    <Component>
        <ext:Image runat="server" />
    </Component>
    <Listeners>
        <BeforeBind Handler="e.config[0].imageUrl = Ext.net.ResourceMgr.resolveUrl(Ext.String.format('~/Images/{0}.png', e.record.data.image));" />
    </Listeners>
</ext:ComponentColumn>

in this:

<ext:ComponentColumn runat="server" DataIndex="image">
    <Component>
        <ext:Container runat="server" Layout="HBoxLayout" >
            <Items>
                <ext:Image runat="server" ID="ImageCodiceUtente" Height="20"/>
                <ext:Label runat="server" ID="LabelCodiceUtente"/>
            </Items>
        </ext:Container>
    </Component>
    <Listeners>
        <BeforeBind Handler="e.config[0].imageUrl = Ext.net.ResourceMgr.resolveUrl(Ext.String.format('~/Images/{0}.png', e.record.data.image));" />
    </Listeners>
</ext:ComponentColumn>

the code:

<BeforeBind Handler="e.config[0].imageUrl = Ext.net.ResourceMgr.resolveUrl(Ext.String.format('~/Images/{0}.png', e.record.data.image));" />

no longer works !
And the text property of the new Label "LabelCodiceUtente" not work,

Can you make an example for resolve this case?

Tnx

[Daniil]

e.config[0]

is now the Container, not the Image control.

Hope this information helps.

By the way, we would also recommend you to consider using a regular Column with a custom Renderer.

[Mario]

I prefer to use the method with the container object, because if I use a script HTML to render the cell content, its content is not centered vertically.

Danill, can you please tell me how I can set the values of ImageUrl and Text in the two objects in container?

tnx

[Daniil]

So, "e.config[0]" is the Container. I would expect there should be the "items" property. I would try this first:

e.config[0].items

You can debug/explorer it using any tool that you like. I generally prefer the Visual Studio JavaScript debugger.