对于ExtJS这个前端框架来说,组件的监听器起着很关键的作用。
最常见的监听器就是“单击”事件。
比如一个GridPanel数据网格,我们要操作指定的数据,先要选中要被操作的数据,然后再进行增删改查操作。
一般的写法是
监听器 : {
监听器A : function( ) {....},
监听器B : function( ) {....},
}
listeners: {
//点击监听事件,Java中的观察者设计模式与之思想一致
select: function (model, record, index, eOpts) {
//当前选中记录的数据 复制到 另外一个全局变量selectedRecord中
selectedRecord = record.data;
},
//监听双击事件
rowdblclick: function (table, record, tr, rowIndex, e, eOpts) {
historyWin.setTitle('审批流程查询');
//手动加载store数据,在指定load()方法之前,执行beforeload监听事件。
historyGridStore.load();
//审批历史窗口弹出
historyWin.show();
}
}
上述方法是以组件“属性”的形式给出的。
另外一种写法,是以“方法”的形式给出。
比如,在获取数据之前,需要添加查询条件。获取数据的方法是load()方法,有一个监听器专门在监听load()方法,如果load()方法要被执行,那么就抢先执行,这个监听器叫“beforeload”。
/*监听事件的另外一种写法,正好上面的historyGridStore要求加载
*load()方法执行之前 执行这个beforeload监听方法
*于是带上额外的参数,executionId:流程实例的id号
*/
historyGridStore.on('beforeload', function (store) {
//将被选中的记录的流程实例id取出来
store.proxy["extraParams"]["executionId"] = selectedRecord.processInstanceId;
});
这个historyGridStore请求的地址是 url: '
后台接收方法如下。
@RequestMapping(value = {URL_COMMENT_LIST})
@ResponseBody
public PagedQueryExtResult getHistoryComment(String executionId) {
....
}