PDA

View Full Version : Ext.ux.Image error



raj_plays
12 Jun 2010, 2:29 AM
Hi,
I get the error 'object does not support this property or method'
when I use Animal's Image plugin given in the tutorial at http://www.extjs.com/learn/Tutorial:Creating_new_UI_controls

My panel is delared thus..

{
width: 600,
height: 70,
layout: 'column',
border: false,
items: [
{columnWidth: 0.10, xtype: 'image', url: 'Images/printer.jpg', qtip: 'Print'}
]
}

Please help...

Enviroment: Ext 3.2.1, I.E. 8

swarnendude
12 Jun 2010, 2:31 AM
You can use simple :

var imageBox = new Ext.BoxComponent({
id: 'imageBoxCmp',
xtype: 'box',
height: 100,
autoEl: {
height: 100,
width: 380,
tag: 'img',
src: url
}
});

raj_plays
12 Jun 2010, 11:40 AM
Thank you, swarnendude
It works fine. I modified it a little for an onclick event.....


{
columnWidth: 0.10,
xtype: 'box',
autoEl: {tag: 'img', src: 'Images/printer.jpg', style: 'cursor: pointer', qtip: 'Print chart'},
listeners: {render: function(cmp){cmp.getEl().on('click', function(){print('chart-div')})}}
}

raj_plays
16 Jun 2010, 11:23 AM
Hi,
As given in the code above, I have placed an image in a box container.
The problem is the image is being stretched to occupy the entire box.
It doesn't help if I specify the width and height (it is a 18*18 image)


{
columnWidth: 0.10,
xtype: 'box',
layoutConfig: {align: 'left'}, width: 18, height: 18,
autoEl: {tag: 'img', src: 'Images/printer.jpg', style: 'cursor: pointer', qtip: 'Print chart'},
listeners: {render: function(cmp){cmp.getEl().on('click', function(){print('chart-div')})}}
}


Please help..20969

Animal
16 Jun 2010, 11:49 AM
Of course its being sized! You are ASKING for it to be 0.10 of the width of the layout: 'colum' container that it is in!

And "layoutConfig"????? Of which class is "layoutConfig" a config option?

raj_plays
17 Jun 2010, 12:17 AM
Thank you, Animal
I was going by the theory that you can place an 18*18 image in a 200*100 <div> and it will not get stretched.
Any advice for my problem??

Animal
17 Jun 2010, 1:20 AM
That BoxComponent's element IS an <img> tag. That's what autoEl means.

So if you put it into a layout and ask that layout to size it, it gets sized.

Don't want it sized? Then don't ask for it to be sized.