ExtJS - Event Listening

• ExtJS few events will be fired without user action like afterrender.
• There are events will be fired based on the user action like click, double click, mouseover etc.

Following code demonstrates , how to fire the event when user clicked.

Ext.create('Ext.Button', {
    text: 'Click me to call listener',
    renderTo: Ext.getBody(),
    listeners: {
        click: function() {
            Ext.Msg.alert('Listener function called!');
        }
    }
});

Same way multiple listeners can be added for same component

listeners: {
        click: function() {
            Ext.Msg.alert('Listener function called!');
        },
        mouseover: function() {
            //mouseover functionality
        }
    }

 

ExtJS - Events

Events

• Events Fires , whenever some activity occurs in the components.
• Following code has afterrender listener or event will be called after the   Ext.Component rendered.

   

 Ext.create('Ext.Panel', {
    html: 'Event Example',
    renderTo: Ext.getBody(),
    listeners: {
        afterrender: function() {
            Ext.Msg.alert('Panel is rendered');
        }
    }
});

Extjs - Sencha Commands

Generate New application

   > sencha generate app -ext newApp /path/newApp

Create Build for existing application

     > sencha app build (inside app dir)

Start Sencha server

     > sencha web start (inside app dir)