[ExtJS] viewModel binding listener method dynamically bound method controls

Copyright: Should reprint, please contact the author. https://blog.csdn.net/ZYD45/article/details/87379758

Now, with the development of mobile terminals, many controls are saving step, especially in view state.

However, whether it is new or state in the browser state, is a common control. For this case will change or blur difference is determined.

Under the new state, can not call the event, the browser can call the state update class event

In ExtJS6, can make use of viewModel be implemented

1. Set a viewModel with a page status field to record the isBrowser

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

2. set up their own methods, must have a listening empty method, because bind with three head in operation: there must be value

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

3. To listen to the control

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

Complete example:

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('更新了')
            }
        });
    }
});