ext如何动态改变图片颜色？

比如报警前是绿色类似一个报警灯似的图片，报警后是红色最好这个图片还可以闪烁。
[b]问题补充：[/b]
to mgssnake：我这个要求动态改变不是手动触发的。
to playfish：你顺便跟我普及一下ext的回调如何用
[b]问题补充：[/b]
to playfish:我要求的就是你讲那个样子的，那如果页面调用的话，只需要给img一个id就行那，是不是这样子的。

嗯,直接给img一个id,比如alert,然后

document.getElementById('alert').src = "";就可以了,在ajax返回成功的回调函数里面调用这个函数就行了.

几行代码就能搞定的问题,没必要非要ext封装成那个样子.

这个直接用JavaScript就可以解决了.很简单的方法

比如

[code="java"]function swapImg(alert){

if(alert){
imgDom.src = "images/alert.gif";
}else{

imgDom.src = "images/common.gif";

}[/code]

在你的回调函数里面调用这个方法,把imgDom改成你的图片的dom,比如用getElementById获得的dom,图片路径跟名字换下就ok

你可以通过改变style进行图片转换，例如：
[code="java"]
new Ext.Panel({
renderTo:Ext.getBody(),
layout : "form",
items :[
new Ext.form.DateField({
id : "dateField",
style : "background:url('icon-success.gif')",
fieldLabel : "日历"
width:400,

                format : "Y-m"
            }),
            new Ext.Button({
                text:"改变颜色",
                handler:function(){
                    Ext.get("dateField").dom.style.background = "url('icon-error.gif')";
                }
            })
        ]
    });

[/code]

如上代码就是通过样式来改变图片，如果要你说的带动的图片，那就做一个gif动画图片即可

我给你的例子是手动触发，因为我不知道你是在什么样的条件下触发的，你只需把我手动触发的部分更改为你触发函数之内就可以了

你的程序查看是否报警的话，是用一个Ext.Ajax.request()去取是否报警的标志，那么你就可以在success:function()函数体内，调用改变样式的方法，如果你是用Store去调用的话，那你在store.load({params:{},callback:function(){}})callback函数体内即可执行你的改变样式方法，即callback就是你回调函数。

你如果是实现报警的话,我猜测可能是ajax定时的去向服务器取数据,判断是否报警这样的逻辑吧,如果取到的数据说明要报警,那就改变图标.不知道是否是这样的逻辑?

回调函数最通俗的说,就是一件事情执行完后调用的函数.

比如说ajax请求完成后,调用的函数..比如说你的一个组件拖放后,调用的函数,这种函数就是所谓的回调函数.

[code="js"]
new Ext.Panel({
renderTo : Ext.getBody(),
items : [{
xtype : 'box',
autoEl : {
tag : 'div',
children : [{
tag : 'img',
id:'img',
qtip : 'Image',
src : "http://www.17ext.com/editor/images/smilies/default/12.gif"
}]
}
}, new Ext.Button({
text : "Change Color1",
handler : function() {
Ext.get("img").dom.src = "http://www.17ext.com/editor/images/smilies/default/12.gif";
}
}), new Ext.Button({
text : "Change Color2",
handler : function() {
Ext.get("img").dom.src = "http://www.17ext.com/editor/images/smilies/default/13.gif";
}
})]
});
[/code]

这个就是动态的了

[code="js"]
Ext.onReady(function() {
var w = new Ext.Window({
width : 300,
height : 400,
items : [{
xtype : 'box',
autoEl : {
tag : 'div',
children : [{
tag : 'img',
id : 'img',
qtip : 'Image',
src : "http://www.17ext.com/editor/images/smilies/default/10.gif"
}]
}
}]
});
w.show();
var sp = new Ext.util.TaskRunner();
function startTasks() {
sp.start({
run : function() {
if(Ext.get("img").dom.src == 'http://www.17ext.com/editor/images/smilies/default/10.gif'){
Ext.get("img").dom.src = "http://www.17ext.com/editor/images/smilies/default/12.gif";
}else{
Ext.get("img").dom.src = "http://www.17ext.com/editor/images/smilies/default/10.gif";
}

        },
        interval : 1000
    });
}
startTasks();

})
[/code]

原理是通过 document.getElementById('id').src='url'来改变的,只是ext帮你包装了一下.