Posts tagged Controller

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

ExtJS 4: ComponentQuery Selectors in a Controller

Aug 6th

Posted by existdissolve in ExtJS

1 comment

In ExtJS 4, you can do some pretty powerful stuff inside your controllers using ComponentQuery. In the following example, I have a simple grid panel view, and I’m using ComponentQuery in my controller to handle itemcontextmenu events within the grid:

views/Bookmarks.js

Ext.define("ME.view.bookmarks.List", {
   extend: "Ext.grid.Panel",
   alias: "widget.bookmarks",
   store: "Bookmarks",
   scroll: "vertical",
   title: "My Bookmarks",
   initComponent: function() {
      this.columns = [
         {
            text: "Bookmark",
            dataIndex: "title",
            flex: 1,
            renderer: function(value,meta) {
               meta.tdAttr = 'data-qtip="' + value + '"';
               return value;
            }
         },
         {
            text: "Created",
            dataIndex: "created",
            xtype: "datecolumn",
            format: "m-d-y",
            hidden: true
         }
      ];
      this.callParent(arguments);
   }
});

controllers/Bookmarks.js

Ext.define("ME.controller.Bookmarks", {
   extend: "Ext.app.Controller",
   stores: ["Bookmarks"],
   models: ["Bookmark"],
   views:  ["bookmarks.List"],
   init: function() {
       this.control({
           "bookmarks": {
              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 Forever",
                              icon: "images/delete.png",
                              handler:function(btn) {
                                 me.deletebookmark(record,item);
                              }
                          }
                       ],
                       defaultAlign: "tl"
                    });
                 }
                 item.ctxMenu.showBy(item);
              }
           }
      });
   }
});

First things first. You’ll notice this bit in the view:

alias: "widget.bookmarks"

This allows me to define my class as a custom xtype. This is important because you can use ComponentQuery to select components by xtype. With this in mind, I can now use the alias of my More >

ComponentQuery, Controller, ExtJS 4, Selectors