Learning Ext JS - Fourth Edition

Grid listeners

The event listener is a core feature in the components of the Ext JS library. The Grid panel is not an exception. Because of its nature, this panel has a very well designed set of listeners that allow us to process all kinds of events.

Taking our last example (the rowmodel selection), let's write some code to add event listeners to our grid. The code will look similar to this:

Ext.onReady(function(){
  Ext.tip.QuickTipManager.init();
  //Step 1
  var myEventsArea = Ext.create('Ext.form.field.TextArea',{
    itemId:'myResultArea',
    width : 400,
    height : 200,
    renderTo:'myResults'
  });
  var myStore = Ext.create("Myapp.store.customers.Customers");
  var myGrid = Ext.create('Ext.grid.Panel',{
    // Grid config
    listeners:{ //Step 2
      render:{ fn:function(grid, ...