[ExtJS] viewModel绑定监听方法 控件动态绑定方法

现在随着移动端的开发，很多控件都是一步保存，尤其是在浏览态下。

但是，无论是在浏览态下还是新增态，都是公用的一个控件。这时对于blur或change这种就要区别判断。

新增态下，不可调用事件，浏览态才可以调用更新类事件

在ExtJS6下，可以借助viewModel来实现

1.设置一个viewModel 用一个字段isBrowser来记录页面状态

viewModel:{
     data:{
          isBrowser:true//是否是浏览态
     },
},

2.设置好自己的方法，一定要有个监听的空方法，因为bind里用三目运算，： 后必须有值

onEmpty(sender){
    sender.purgeListeners();//清空所有的方法
},//空方法
onUpdate(){
    alert('更新了')
}

3.给控件进行监听

{
     xtype:'textareafield',
     bind:{
        listeners:{
             blur:'{isBrowser?"onUpdate":"onEmpty"}'//是浏览态 就调用更新方法
        }
     }
}

完整例子：

Ext.application({
    name: 'Fiddle',
 
    launch: function () {
        Ext.Viewport.add({
            xtype: 'container',
            defaultListenerScope: true,
            viewModel: {
                data: {
                    isBrowser: true //是否是浏览态
                },
            },
            items: [{
                xtype: 'textareafield',
                bind: {
                    listeners: {
                        blur: '{isBrowser?"onUpdate":"onEmpty"}'
                    }
                }
            }],
            onEmpty(sender) {
                sender.purgeListeners();//清空所有的方法
            }, //空方法
            onUpdate() {
                alert('更新了')
            }
        });
    }
});