ExtJS 4–Dom Handling–Events

ExtJS core provides a excellent support for attaching event handler for Dom Element events. For example. We can suppress the default right click context menu on browser and show our ExtJS menu, capture click listener for buttons, mouse over events for any element.

Lets see a click event getting attached to button. We will use the code from previous code. We will remove the onclick from the save button and attach event on the element. The process is same, get the element, attach a function object for desired event. The code below explains that

 function btnSaveClickHandler() {
            // To get the fname,lname, city use Ext.get(id);
            var fnameEl = Ext.get('fname');
            var lnameEl = Ext.get('lname');
            var cityEl = Ext.get('city');
            alert(fnameEl.dom.value);
        }
        var init = function () {
           // get the button element
            var btnSaveEl = Ext.get('btnSave');
            // attach a function object to the desired method
            btnSaveEl.on('click',btnSaveClickHandler );
        };

        Ext.onReady(init);

The demo can be found here