Posts tagged Events

ExtJS 4: Intercepting a Window Closure

Aug 18th

In a blog post I ran across recently, someone was trying to intercept the closure of a window via the “X” icon in the top right corner. The idea was to be able to run additional processing before closing the window (such as confirming save/cancel of data, resetting a form, updating a record, or whatever else).

Turns out this is pretty simple to accomplish, but it’s good to understand what’s going on behind the scenes before implementing the solution.

The “Close” Tool

When you specify that your Window (a glorified extension of Panel) is “closable” (the default behavior, btw), here’s what happens in the background:

initTools: function() {
    var me = this;
    me.tools = me.tools || [];
    ......
    // Add subclass-specific tools.
    me.addTools();
    // Make Panel closable.
    if (me.closable) {
        me.addClsWithUI('closable');
        me.addTool({
            type: 'close',
            handler: Ext.Function.bind(me.close, this, [])
        });
    }
    // Append collapse tool if needed.
    if (me.collapseTool && !me.collapseFirst) {
        me.tools.push(me.collapseTool);
    }
}

As you can see, if the Window is closable, a tool of “close” type is added automatically, and fires the panel’s “close” method when clicked. Here’s what close() looks like:

close: function() {
    if (this.fireEvent('beforeclose', this) !== false) {
        this.doClose();
    }
}

The important thing to note here is that the “beforeclose” More >

Controller, Events, ExtJS 4, Sencha, Window

ItemClick and ItemContextMenu

Jul 8th

Posted by existdissolve in ExtJS

No comments

Custom context menus are one of the features of ExtJS that I love. They are stupid simple to add in, and ridiculously customizable–they can really add some value to your app and help preserve real estate if you have a lot of embedded actions that need to happen.

For example, in one of my controllers, I’m looking for the “itemcontextmenu” event on a grid:

this.control({
    "bookmarks": {
       itemclick: function(...) {
          ....
       },
       itemcontextmenu: function(view,record,item,index,e) {
          var me = this;
          var r = record.data;
          e.stopEvent();
          if(item.ctxMenu) {
              item.ctxMenu = new Ext.menu.Menu({
                 items: [
                    {
                       text: "Delete This Thing",
                       icon: "images/delete.png",
                       handler: function(btn) {
                          me.deletebookmark(record,item);
                       }
                    }
                 ]
              });
         }
     }
})

One of the issues I was running into, however, was that whenever I would “right” click using my Mac’s “magic mouse” (e.g., Ctrl+click), both the itemclick AND itemcontextmenu events would fire.

To debug this, I took a quick peek at the “event” object passed on both methods. This object provides a bunch of information about the event that was fired, including: