View Full Version : Create images dynamic in panel

17 Oct 2012, 2:28 AM
Hi everybody!

I'm working with Ext js 4 in MVC - style.

I have a problem to add images dynamic to a panel.
I loop through a store and want to add images from the store to a panel.
What i need: I want to have a layout image, where other images should to be placed on.

First i tried a simple approach.

showSchemaPage: function(id, region, imgSource)
var panel = Ext.getCmp(region.name); //center region panel
panel.removeAll(); //remove all components first

xtype: Ext.create('ServiceRequest.view.AlarmPanel'), //create alarmpanel
xtype: Ext.create('Ext.Img', {
src: imgSource,
autoEl: 'div',zIndex: 0
}) //add layout image
//want to add dynamic images
//xtype:Ext.create('ServiceRequest.Infrastructure.shared.Controls.BaseImageControl',{x: 400, y: 200, autoEl: 'div', zIndex: 3})// wrap in a div

The problem i have : when i add the image to the layout image, the layout-image disappears.
Hint: my image sources are all base64 coded.

Thanks a lot for any help and suggestion to get the right approach for my problem.
Greets Thomas

17 Oct 2012, 11:05 AM
Nobody any clue?

Suitable tutorials for working with Images in Ext Js 4 are extremely poor here on sencha.
Why? Are there any Examples such as Image gallery, layered/nested image creation etc?
May its better to use the contentEL of the panel and create dynamic Html Tags?

Thanks for any suggestions!


James Goddard
17 Oct 2012, 11:18 AM
So as I understand it you want a panel that displays a list of images from a store and want the images to be data images?

Try this for your panel config:

xtype: 'dataview',
itemSelector: 'img',
tpl: '<img src="data:image/png;base64,{imageData}" />',
store: yourStore

(Replace imageData with whatever the field name of your base64 data is in the store's model.)
Then whenever your store is updated your images will update and you don't have to do anything special.

17 Oct 2012, 12:10 PM
Thanks for you reply!
Maybe i explained it not correctly.
My fault.

Wich construct i want to create:
One big underlaying base image, where i place (with given positions) other small images on.
Imagine you have a livingroom in byrds eye view, and you want to fill it with something like ikea styled things.
The livingroom is the underlaying base image. And all the ikea things are my small images.

In your example (once a again: thanks a lot!! ) i miss something like: telling one image: you're the big main picture (its defined in the store as main but in the view -- z-index??). Other Images had to placed on that main pic. with specific position (also defined as x,y in the store.)

Hope this helps for better understanding.
It doesn't matter in wich format i get the pic (png,gif,jpg etc or base64 encoded) as long as i can assign
them to a img scr.

The example with the store is quite near what iam searching. But i don't now how where i can do the postioning and z-index settings.


James Goddard
17 Oct 2012, 12:13 PM
You could do something similar to what I posted before but instead, put your "liviing room" as the background image of the panel body with css or bodyStyle.

Then, assuming the x and y positions are in your store records with the image data adjust the image tag in the tpl in my example to use something like style="position: absolute; top: {y}; left: {x}".

17 Oct 2012, 12:19 PM
Thanks a lot!

Will give a try. But only tomorrow. It was a long working day and iam nearly dreaming of sencha.
So as a conclusion: its the easiest way to combine it with good old html style..
I thought it could be done with the drawing implementation from sencha.
Thanks a lot!


James Goddard
17 Oct 2012, 6:02 PM
Well a data view is designed to do exactly what you are wanting. Creating a component for all of your images is overkill, especially since they are already in a store. Most people think of data views for just lists or collections but there is no reason they can't be more free form. I've used exactly this technique to show servers in a rack based on the unit height and position of the server from the model data. Best thing is you just manage the data in the store and the data view handles the updating for you. You can even do drag drop with some minor customization to save the positioning.

18 Oct 2012, 12:42 PM
Thanks a lot for answering my question.

its a good approach, without doubt, but i need to do this in an other way.
I've made custom panels for my images. I have a base class where all these custom panels to be derived.
Base class have base config settings and is an extend from Ext.panel.Panel. Settings in the base: absolute positioning, borders etc.
The reaon is: i need for some images more functionality.
Some are only image - views (e.g. temperature), others are combined with text and/or with buttons.
So i can use them reusable and extendable.
That works perfect.

cheers thomas