核心提示:首先看一段代码:Ext.define(XIRJS.widget.risk.scene.defined.RiskDefinedGrid, {extend : XIRJS.widget.base.Base...
首先看一段代码:
Ext.define('XIRJS.widget.risk.scene.defined.RiskDefinedGrid', { extend : 'XIRJS.widget.base.BaseQueryPanel', sqlPath: 'com.xquant.platform.component.javascript.risk.scene.TrskSceneWebMapper', queryModel: 'MAPPER', enablePager: true, exportTitle: '情景定义', initComponent: function(){ this.addEvents('gotoDefinePanel'); this.callParent(arguments); },
然后可以看到我们在这里为我们的自定义控件RiskDefinedGrid添加了一个名为”gotoDefinePanel”的监听事件,在接下来的代码中我们在一个按钮的事件监听中为这个控件注册了”gotoDefinePanel”监听事件(也就是说如果点到这个按钮,就会触发这个事件,并且将参数也传递出去)
addButtonHandler: function(){ this.fireEvent('gotoDefinePanel', this, XIRJS.widget.risk.scene.defined.BaseInfoPanel.ADD_STATUS); }, updButtonHandler: function(){ this.fireEvent('gotoDefinePanel', this, XIRJS.widget.risk.scene.defined.BaseInfoPanel.UPDATE_STATUS, this.grid.getSelectRecord()); },
在接下来的新定义的panel界面中,我们应用了前面定义的RiskDefinedGrid控件,然后可以看到,我们为这个控件绑定了一个为“gotoDefinePanel”类型的监听事件,也就是说在触发了“gotoDefinePanel”事件的时候,我们就要执行当前的“gotoDefinePanelHandler”方法(其实整体的思路就是:首先我们在前面的控件中为按钮注册了“gotoDefinePanel”事件,然后当我们点击按钮的时候,就会触发这个事件,接下来在panel中应用了这个控件后,因此也会触发我们为这个控件绑定的事件,就会执行“gotoDefinePanelHandler”方法体)。
Ext.define('XIRJS.widget.risk.scene.defined.RiskDefinedPanel', { extend : 'Ext.panel.Panel', layout: 'fit', requires : ['XIRJS.widget.risk.scene.defined.BaseInfoPanel', 'XIRJS.widget.risk.scene.defined.CurveInfoPanel'], title: '情景定义', width: 1000,//这里一定要设置好宽度,否则不显示 height:500, initComponent: function(){ this.items = [ this.buildGrid()]; this.callParent(arguments); this.mon(this.grid, 'gotoDefinePanel', this.gotoDefinePanelHandler, this); }, buildGrid: function(){ var grid = Ext.create('XIRJS.widget.risk.scene.defined.RiskDefinedGrid',{ superPanel : this }); this.grid = grid; return grid; },
最后总结一下,整个过程就是,为一个自定义的控件使用addEvents来绑定一个自定义的事件类型,然后在接下来,我们可以为这个控件内部逻辑中注册使用这个事件类型(比如:我们点击某一个按钮,就会触发这个事件类型,并且传入需要的参数),接下来调用这个控件的时候,我们就可以为这个控件绑定这个事件类型触发时的进一步处理。