extjs 自定义事件

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!!');
}
});