extjs 自定义事件

ゞ浴缸里的玫瑰 2022-07-18 01:58 207阅读 0赞

![Center][]

addEvents(  Object/String... eventNames )

向本Observable可能触发的事件列表中添加指定的事件。

### Parameters ###

*  eventNames : Object/String...
    
    要么是有事件名作为属性，属性值为 `true`的对象。例如:
    
        this.addEvents({ storeloaded: true, storecleared: true });
    
    要么是作为参数的任意个数的事件名。例如:
    
        this.addEvents('storeloaded', 'storecleared');
 *      fireEvent( 
              
               String eventName, Object... args ) : 
              
               Boolean
             
              
             
              
              
               使用传递过来的参数(去掉事件名，加上传递给addListener的options对象 )触发指定的事件。 通过调用enableBubble，一个事件 能被设置为沿着Observable的继承体系(见Ext.Component.getBubbleTarget)向上起泡。 Parameters eventName : String 待触发的事件名。 args : Object... 传递给事件处理函数的可变数量的参数 Returns Boolean 如果任何一个事件处理函数返回false，就返回false，否则返回true。

示例：

Ext.define('V5.test.view.BarChart', \{  
extend : 'Ext.chart.Chart',  
xtype : 'barchart',  
width : 500,  
height : 300,  
animate : true,  
initComponent : function() \{  
var me = this;  
//添加自定义事件  
me.addEvents('barclick');  
me.store = Ext.create('Ext.data.JsonStore', \{  
fields : \['name', 'data'\],  
data : \[\{  
'name' : 'metric one',  
'data' : 10  
\}, \{  
'name' : 'metric two',  
'data' : 7  
\}, \{  
'name' : 'metric three',  
'data' : 5  
\}, \{  
'name' : 'metric four',  
'data' : 2  
\}, \{  
'name' : 'metric five',  
'data' : 27  
\}\]  
\});  
me.axes = \[\{  
type : 'Numeric',  
position : 'bottom',  
fields : \['data'\],  
label : \{  
renderer : Ext.util.Format  
.numberRenderer('0,0')  
\},  
title : 'Sample Values',  
grid : true,  
minimum : 0  
\}, \{  
type : 'Category',  
position : 'left',  
fields : \['name'\],  
title : 'Sample Metrics'  
\}\];  
me.series = \[\{  
type : 'bar',  
axis : 'bottom',  
highlight : true,  
tips : \{  
trackMouse : true,  
width : 140,  
height : 28,  
renderer : function(storeItem, item) \{  
this.setTitle(storeItem.get('name') + ': '  
\+ storeItem.get('data') + ' views');  
\}  
\},  
melabel : \{  
display : 'insideEnd',  
field : 'data',  
renderer : Ext.util.Format.numberRenderer('0'),  
orientation : 'horizontal',  
color : '\#333',  
'text-anchor' : 'middle'  
\},  
xField : 'name',  
yField : 'data',  
listeners : \{  
itemclick : function() \{  
//触发自定义事件  
me.fireEvent('barclick');  
\}  
\}  
\}\]  
this.callParent();  
\}  
  
  
\});

Test.js

Ext.define('V5.test.controller.Test', \{  
extend : 'Ext.app.Controller',  
models : \[\],  
stores : \[\],  
views : \['Grid','V5.test.view.BarChart'\],  
refs : \[\{  
ref:'BarChart',  
selector:'barchart'  
\}\],  
  
  
init : function() \{  
var me = this;  
this.control(\{  
'barchart':\{     
barclick:me.doClick  
\}  
\});  
\},  
//实现自定义事件  
doClick:function()\{  
alert('hello world!!');  
\}  
\});

[Center]: /images/20220717/801de7d9e6af479cac985f43c9988f20.png