[ExtJS] 监听事件

在ExtJS中，常见的监听事件一般用listeners，如下：

{
    xtype:'控件名',
    liteners:{
        事件名:'方法名'
    }
}
//demo 
{
    xtype:'textfield',
    liteners:{
        blur:'onBlur'
    }
}

或者是单个控件on绑定

var wgt = Ext.widget('控件名');
wgt.on(事件名,方法名,作用域)

Demo:

function Demo2() {
    const me = this;//this表示当前的作用域类
    var edit = Ext.widget('textfield');
    edit.on('blur','onBlur',me);
}
function onBlur() {console.log('失焦了')}

 

以上都是单个控件的监听，要是想对一组控件（或某个容器里的控件）进行监听，可采用以下方式：

容器对象.on({
    delegate:'selector选择器',
    事件名:方法
})

例如：有个form控件，里面有三个field类控件

{
    xtype:'formpanel',
    items:[
        {
            xtype:'textfield',
            label:'没有name的姓名控件',
        },
        {
            xtype:'textfield',
            label:'姓名',
            name:'Name'
        },
        {
            xtype:'selectfield',
            label:'性别',
            options:[
                {text:'男',value:'M'},
                {text:'女',value:'F'}
            ]
        },
        {
            xtype:'checkbox',
            label:'选中'
        }
    ]
}

想对其统一监听change变化 可以采用：

formpanel控件对象.on({
    delegate:'textfield[name],checkbox,selectfield',//选取含有name属性的textfield控件
    change:'onChange',//调取onChange方法,
    scope:'作用域'//一般某个类里
})

想要统一移除监听

方法一：

利用foreach 逐个去除，不一定生效

form表单容器.query('pickerfield[name], selectfield, sliderfield[name], checkbox').forEach(
     x=>{
       x.un('change','onChange',me)
     }
);

方法二：

使用表单控件的一键清除

form表单控件.clearDelegatedListeners();

使用场景

上述这些绑定方法，可能用于，某个表单 进行编辑时，希望是 编辑了某个字段，就进行单个保存，而非全部编辑完毕再进行点击【保存】进行保存