ExtJS - Component Model

 

ExtJS Component Hierarchy

• Viewport in the base component that contains container and components .
• Container is a special type of component that holds other components.
• Components inside containers will be nested by tree like structure.

var p1 = Ext.create('Ext.panel.Panel', {
    title: ' Panel 1',
    html: '1 Panel'
});

var p2 = Ext.create('Ext.panel.Panel', {
    title: ' Panel 2',
    html: '2 Panel'
});

Ext.create('Ext.container.Viewport', {
    items: [ p1, p2 ]
});

ExtJS - Custom Events

1. In Extjs , Our own custom events can be added to the component.
2. Custom events will be fired explicitly, when required.
3. The execution of custom events will be done by fireevent().
4. Following code illustrates the situation

var button = Ext.create('Ext.Button', {
    renderTo: Ext.getBody(),
    text: "Fire custom event",
    listeners: {
        customEvent: function(button) {
            Ext.Msg.alert('Custom event called');
        }
    }
});

 button.fireEvent('customEvent', button); 

ExtJS - Remove Listeners

• As adding the listeners , Listeners can be removed from Extjs.
• Calling function ON() with the event will be creating the event.
• Below example explains how to remove the listener using UN() method.

var sayHello = function() {
   alert('Hello');
};

var button = Ext.create('Ext.Button', {
    renderTo: Ext.getBody(),
    text: 'Say Hello',
    listeners: {
        click: sayHello,
    }
});

button.un('click', sayHello);

ExtJS - What is Ext.defer?

Ext.defer or Ext.function.defer is a function similar to javascript setTimeout function.

Ext.defer(function() {
   alert('Hi')
 },  1000) ;

The function given in the defer will be executed after the number of millisecond specified.

Below are the arguments for Ext.defer
Ext.defer( fn, millis, [scope], [args], [appendArgs] ) 

ExtJS - On function

• ON is the function used to create a listeners for the component.
• The usage of ON is , allows you to create the listeners later.
• We can add the listeners for already instantiated components.

var button = Ext.create('Ext.Button', {
    renderTo: Ext.getBody(),
    text: 'Button'
});

button.on('click', function() {
    Ext.Msg.alert('Event listener called from [on]');
});

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');
        }
    }
});