PDA

View Full Version : Ext.ux.Image



chalu
10 Feb 2009, 7:57 PM
A component for encapsulating and rendering images in Ext applications.
Thanks to Animal and Mjlecomte for the template-method tutorial that actually had this extension as one of the examples.

Project Home and Source is here (http://code.google.com/p/ext-ux-image/)

chalu
10 Feb 2009, 9:51 PM
**removed spam link** are often treated as jewelry or as collectible works of art rather than as timepieces. This has created several different markets for wristwatches, ranging from very inexpensive but accurate Sarcar replica watches intended for no other purpose than telling the correct time, to extremely expensive watches that serve mainly as personal adornment or as examples of high achievement in miniaturization and precision mechanical engineering.

You lost me here :D:D

Scorpie
11 Feb 2009, 12:11 AM
You lost me here :D:D


It`s spam :(

Condor
11 Feb 2009, 12:16 AM
Ext.ux.Image should descend from Ext.BoxComponent instead of Ext.Component.

(that way you can put it in size-managing layouts)

chalu
11 Feb 2009, 2:20 AM
Ext.ux.Image should descend from Ext.BoxComponent instead of Ext.Component.

(that way you can put it in size-managing layouts)

I thought of this you know, meaning that when it's container is resized, it's size will also be re-calculated, right.

What about situations where you don't want Ext to interfere with the size of the image, so that it takes on the size of the picture itself, just the way images are rendered in HTML, without the width or height attributes set.

Condor
11 Feb 2009, 3:19 AM
In that case you need to embed it in a container with auto layout, e.g.

{
xtype: 'container',
autoEl: 'div',
items: {
xtype: 'image',
src: 'my-image.gif'
}
}

ps. Another nice addition to the onRender method would be:

this.relayEvents(this.el, ["click", "dblclick", "mousedown", "mouseup", "mouseover", "mousemove", "mouseout", "keypress", "keydown", "keyup"]);
I don't know if all these events are required, but IMHO at least the click and dblclick events should be relayed.

chalu
11 Feb 2009, 3:56 AM
well noted. I know that event addition has to do with event handling on the el, but I really don't know what relayEvents does. I've only had to use addevents / on / un e.t.c

The docs on relayEvents in Ext.util.Obervable suggests that the events will fired (by the el as we did it in our case).Am I correct in my thinking :-/:-/

Condor
11 Feb 2009, 6:32 AM
relayEvents will relay the events listed in the second parameter that are triggered for the element (the first parameter) to the component.

So, any click, dblclick, mousedown, mouseup, mouseover, mousemove, mouseout, keypress, keydown or keyup event that is triggered for 'this.el' (= the img tag) will also be fired on 'this' (=the image component).

chalu
11 Feb 2009, 12:24 PM
Thanks for clarifying that.

nintondo
24 May 2009, 11:21 PM
great extension currently using it.. further added height/width/altText portions
=)

moegal
10 Jul 2009, 6:06 AM
how would I center an image in my panel? Do you have the changes with the alt, height and width changes?

Marty

sabiola
15 Jul 2009, 11:57 PM
great extension currently using it.. further added height/width/altText portions
=)

it would be nice to share this...

Stefan

sabiola
15 Jul 2009, 11:58 PM
How can I use this to display an Image inside a Form.

Thanks,
Stefan

Condor
16 Jul 2009, 2:57 AM
Include the extension after ext-all.js and use the component just like any other component.

Or did you have a more specific question?

kimosabi
22 Dec 2009, 4:43 PM
I was finding that sometimes, when I included the image xtype in a form, the data was being loaded before the Image had been rendered, so I changed setSrc to the below to allow onRender to take over the setting of the src attribute if the component hadn't been rendered yet:



setSrc: function (src) {
if(this.el)
{
this.el.dom.src = src;
}
else
{
this.src=src;
}
}

paffinito
25 Aug 2010, 5:55 AM
For those who need to know mouse X and Y position on click event

add this at end of onRender event

this.el.on('click', this.onClick, this);add onClick event


onClick: function(e, div, o) {
var x = {
click: e.getXY()[0],
pos: this.el.getLeft(),
scroll: this.el.getScroll().left
};
this.X = (x.click - x.pos) + x.scroll;
var y = {
click: e.getXY()[1],
pos: this.el.getTop(),
scroll: this.el.getScroll().top
};
this.Y = (y.click - y.pos) + y.scroll;
this.fireEvent('click', this);
}