Drawing border around a sprite image

[ganesh239]

Hi,

I have a sprite image that i have added to a drawComponent.
On click of that sprite, I want to draw a border around that image.

var myimage = new Ext.draw.Sprite({
id: uuid,
type: 'image',
src: ''<path to an image>",
width: 50,
height: 50,
style: 'border: 10px solid #000000' // draw border on load itself
.....
});

i also tried myimage.setStyle(), myimage.addCls() but i get this exception - Uncaught TypeError: Cannot read property 'setStyle' of undefined

myimage is not undefined..not sure why this does not work..


In firebug, to the svg image element , i added "border-styleolid;border-width:1px;" to the style element but that did not draw the border. Adding the above style to the <svg> tag, drew the border around the the entire canvas. Not sure why the svg image is not able to apply the style.

Pls help on this
-ganesh

[scottmartin]

See if the following will help:

Ext.create('Ext.draw.Component', {
    renderTo: Ext.getBody(),
    width: 200,
    height: 200,
    items: [{
        type: "image",
        src: "http://www.sencha.com/img/apple-touch-icon.png",
        width: 200,
        height: 200
    }],
  style: {
    borderColor: '#ff0000',
    borderStyle: 'solid'
  }
});

Scott.

[ganesh239]

Hi Scott,

Thanks for your reply, your solution draws a border around the "draw.component", but i would want the border around each of the sprite elements individually.

I tried this, but that does not draw the border around the sprite;.

Ext.onReady(function() {


    Ext.create('Ext.draw.Component', {
    renderTo: Ext.getBody(),
    width: 800,
    height: 800,
        items: [
            {
                type: "image",
                src: "http://www.sencha.com/img/apple-touch-icon.png",
                width: 200,
                height: 200 ,
                x: 100,
                y: 100 ,
                style: {
                    borderColor: '#ff0000',
                    borderStyle: 'solid'


                }
            },
            {
                type: "image",
                src: "http://www.sencha.com/img/apple-touch-icon.png",
                width: 200,
                height: 200,
                x: 500,
                y: 100
            }
        ]
    });




});

Pls help

[ganesh239]

Hi, could you pls help me on this ?

[ganesh239]

any help on this pls ?