ExtJS Listener Example

Problem

You want an Ext component to respond to an event.

Solution

Use the “listeners” property of the object.

Ext.onReady(function() {
    var trackStore = new Ext.data.Store({
        storeId: 'soundCloudStore',

         proxy: {
                type: 'ajax',
               url: 'blues.json',
               reader: {
                  type: 'json',
                  idProperty: 'id'
               }
        },
        fields:['duration', 'genre', 'created_at', 'title', 'id']
});
    trackStore.load(
      function() { 
        Ext.create('Ext.grid.Panel', {
            title: 'Tracks',
          store: trackStore,
          stripeRows: false,
            columns: [
              { header: 'Title', dataIndex: 'title' },
              { header: 'Duration',  dataIndex: 'duration' },
              { header: 'Genre', dataIndex: 'genre' },
              { header: 'Created At', dataIndex: 'created_at' }
            ],
           height: 200,
            width: 475,
          renderTo: Ext.getBody(),
          listeners: {
            afterrender: function( obj, eOpts )
            {
              view = this.getView();
              view.tip = Ext.create('Ext.tip.ToolTip', {
                target: view.el,
                delegate: view.itemSelector,
                trackMouse: true,
                renderTo: Ext.getBody(),
                listeners: {
                beforeshow: function updateTipBody(tip) {
                    tip.update("Tooltip!");
                }
              }
            });
          }
        }
      });
    });
});

Discussion

Most of the events appear to take two or more arguments – at the least this and eOpts. “this” is the object firing the event, and eOpts, oddly, is the contents of the listeners config option.

Some events also have a “state” argument; the Ext documentation says these come from a StateProvider object (actually Ext.state.Stateful), which is essentially an implementation of an enumeration type. These methods are part of a scheme to allow the developer to automatically save/load state at defined points, at useful points during the end user workflow. These events are provided by the base component class (Ext.AbstractComponent), and thus should apply to every Ext UI component.

There are 23 events provided at this level: activate, added, afterrender, beforeactivate, beforedeactivate, beforedestroy, beforehide, beforerender, beforeshow, beforestaterestore, beforestatesave, deactivate, destroy, disable, enable, hide, move, removed, render, resize, show, staterestore, and statesave.