ExtJs Image Component el.setStyle not working

[muceli]

xtype: 'image',
id: 'chatViewImage'
src: '../resources/images/mainView/noimage1.png',
height: 40,
width: 38,
style: 'border-right: 4px solid #808080;',
setBorderColor: function (color) {
          this.el.setStyle({borderRight: '4px solid ' + color});
}

Button click handler :
 Ext.getCmp("chatViewImage").setBorderColor("#43EB43");

border color change :
+ Chrome 32.0.1700.107 m is working
+ IE 11 is working
- Firefox 26.0 and 27.0.1 is not working

[muceli]

how to do change dynamic image border color

[venkatesh teja]

Add below line in any event of ExtJs's image component.


Ext.getCmp("ImageId").el.setStyle('border: 4px solid #808080;margin-left:40px;margin-top:20px');


It should work.

[venkatesh teja]

Hello...

See below example... It is working...

Ext.create('Ext.panel.Panel', {
title: 'Hello',
width: 250,
height:200,
frame:true,
renderTo: Ext.getBody(),
items:[{
xtype: 'image',
id: 'chatViewImage',
src: 'http://test-taking-tips.net/wp-content/uploads/2012/10/shhhhh-quiet-everyone-study-wallpaper.jpg',
height: 100,
width: 150,
listeners:{
afterrender:function(img, a, obj){
img.getEl().dom.style.border = '4px solid #40FF00';
}
}
}]
});