Take the 2-minute tour ×

I'm new to Extjs library and I cannot figure out how to add listener to some events in GridPanel. As I'm filling the grid asynchronously I want my function to be executed when we add new element to grid panel.

I found (I think) correct event:

added( Ext.Component this, Ext.container.Container container, Number pos )

but I cannot find a correct place to put the listener as this function is executed only once on the page load:

Ext.define('MyApp.NewsGrid', {
  extend: 'Ext.grid.GridPanel',
  alias: 'widget.newsgrid',
  initComponent: function() {
    Ext.apply(this, {
      title: 'News',
      store: newsStore,
      viewConfig: {
        plugins: [{
          pluginId: 'preview',
          ptype: 'preview',
          bodyField: 'testo',
          expanded: false 
        listeners: {
          add: function() {
            alert("add executed");
          added: function() {
            alert("added executed");

The problem is that there are different ways to add listeners (inside and outside viewConfig hash, inside and outside component definition etc...) and I cannot figure out one that works in this case. What makes it even more frustrating is that there are many places in the internet with documentation for version 3 or even without specifying the version.

share|improve this question
what elements are you adding or do you mean you want to listen to when new records are added to the underlying store? –  amol Jun 7 '11 at 16:01
like @amol said,.. if so, try to put add listeners in your store.. not in grid –  Warung Nasi 49 Jun 7 '11 at 17:52
add comment

1 Answer

You should listen the add event of Store:

initComponent: function() {
    // somewhere inside initComponent...
    this.getStore().on("add", function(store, records) {
        alert(records.length + " records added");
    }, this);
share|improve this answer
add comment

Your Answer


