ExtJs6 为Ext.Img对象添加单机事件

项目主页头部工具栏最后显示当前登陆用户的名字和头像,头像是用Ext.Img做的,需要点击头像可以修改个人信息,但是查看api一圈并未找到click或dblclick事件,这我就纳闷了,为啥这么常用的两个事件居然没有,然后我就想能否手动添加上这个事件。

ExtJs6 为Ext.Img对象添加单机事件_第1张图片

然后我先是给xtype : 'image'添加了render事件,然后在rander事件里面写添加事件方法:
toolbar部分:
items : [
    {
        xtype: 'image',
        title : '点击修改个人信息',
        height: 35,
        width: 35,
        src: 'resources/images/user/default_avatar.png',
        listeners : {
            render : 'onRender'
        }
    }
],
controller部分:
onRender : function(){
    //这个'image-1038'是我用google找到这个头像标签,ext自动为这个标签加上去不变id
    Ext.get('image-1038').on({
        click : function(){
            doSomething....
        }
    });
}
问题似乎是解决了,可是有所不知,这只是开始。。。
怎么回事呢?原来只要我登陆上去无论怎么刷新怎么操作,这个render事件里添加click事件都没问题,因为缓存里已经把头像这个标签创建好了,id也已经加好了,所以click事件是添加了上去,但是只要我注销登陆,然后再输帐号密码上去就会提示Ext.get('image-1038') is null...
我的内心是崩溃的。。。这不坑爹么?但是在刷新一下就好了,所以是render事件的触发时机问题,之后尝试了afterrender、active、enable等事件来添加单击事件都不奏效所以我就思考用别的方式来添加单击事件,最终还是找到了方法:
toolbar部分:
items : [
    {
        xtype: 'image',
        title : '点击修改个人信息',
        height: 35,
        width: 35,
        src: 'resources/images/user/default_avatar.png',
        listeners : {
            el : {
                click : 'onClick'
            }
        }
    }
]
controller部分:
onClick : function(){
    doSomething.....
}

你可能感兴趣的:(ExtJs6)