PDA

View Full Version : [CLOSED] Show Image Component Dynamically



Mario
Nov 28, 2014, 4:46 AM
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
Nov 28, 2014, 2:52 PM
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
Nov 28, 2014, 3:36 PM
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
Nov 30, 2014, 10:40 PM
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
Dec 01, 2014, 9:37 AM
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
Dec 01, 2014, 9:45 AM
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
Dec 01, 2014, 10:21 AM
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
Dec 01, 2014, 2:29 PM
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.