How to handle event propagation from two different elements in ExtJS - extjs4

Question

I have a grid editor with toolbar. There are two event handlers, one for grid's store (update event) and one for button on grid tool bar.
When I edit grid cell and update contents and click the button on toolbar without tabbing out, grid store's 'update' event is getting triggered and not the button handler. Is there any way to trigger both events?
Here is the code.
Ext.define('Plant', {
extend: 'Ext.data.Model',
fields: [
// the 'name' below matches the tag name to read, except 'availDate'
// which is mapped to the tag 'availability'
{name: 'common', type: 'string'},
]
});
// create the Data Store
var store = Ext.create('Ext.data.Store', {
// destroy the store if the grid is destroyed
autoDestroy: true,
model: 'Plant',
proxy: {
type: 'ajax',
// load remote data using HTTP
url: 'plants.xml',
// specify a XmlReader (coincides with the XML format of the returned data)
reader: {
type: 'xml',
// records will have a 'plant' tag
record: 'plant'
}
},
sorters: [{
property: 'common',
direction:'ASC'
}],
listeners:{
'update':function(){
//Do something related to this store data.
}
}
});
// create the grid and specify what field you want
// to use for the editor at each header.
var grid = Ext.create('Ext.grid.Panel', {
store: store,
columns: [{
id: 'common',
header: 'Common Name',
dataIndex: 'common',
flex: 1,
editor: {
allowBlank: false
}
}],
selModel: {
selType: 'rowmodel'
},
renderTo: 'editor-grid',
width: 600,
height: 300,
title: 'Edit Plants?',
frame: true,
tbar: [{
text:'Test event',
handler:function(){
//Handle button click.
}
}
]
});

Answer 1

Sha Ken, this code is part of the framework examples. I reproduce the scenario and both events are being triggered. Perhaps you are seeing/debuggin one event only.