Wednesday, July 31, 2013

Store Selection Across Multiple Views

Here's a video on synchronizing store selection across multiple views of the same type, and of different types


Here's the source code.

Monday, July 1, 2013

Animating windows in ExtJS

The following code will override the Window class, causing animation on show, close, maximize, and restore.

You need to set {maximizable:true} in your Window config to get the maximize button.


  animateTarget: Ext.getDoc(), //animate on show/close from top left of document
  maximize: function(){
    this.callParent([true]); //animate

  restore: function(){
    this.callParent([true]); //animate


Friday, June 14, 2013

Prompt user before leaving page if a form is dirty


    init: function(){

        Ext.EventManager.addListener(window, 'beforeunload', this.onBeforeUnload, this, {
            normalized:false //we need this for firefox

    onBeforeUnload: function(e){

        var showMessage = false;
        var MESSAGE = 'You have unsaved changes.';

        Ext.Array.each(Ext.ComponentQuery.query('form'), function (form) {
            if (form.isDirty()) {
                showMessage = true;
                return false; //exit the loop

        /* optionally notify the server when a user has unloaded the app:

           url: 'log.php',
           async: false  //don't change


        if (showMessage === true) {
            if (e) e.returnValue = MESSAGE;
            if (window.event) window.event.returnValue = MESSAGE;
            return MESSAGE;

You will probably also want to turn on trackResetOnLoad for your forms as well:



Thursday, February 21, 2013

Enable CORS in a Spring MVC REST API for ExtJS

Let's say you want to run your ExtJS application on, but run your REST API at . Normally, you cannot do this without resorting to JSONP (GETs only), or a server proxy, due to security restrictions. However, it can be done safely using CORS, which modern browsers support.

I've been using Java Spring Roo for creating my REST API. Unfortunately, it does not support CORS out of the box. Here's how to set it up.

In your maven pom.xml file, inside dependencies, add:


Open src/main/webapp/WEB-INF/web.xml and add:


   <param-value>GET, HEAD, POST, PUT, DELETE, OPTIONS</param-value>

   <param-value>Content-Type, X-Requested-With, Origin, Accept</param-value>



Your ExtJS REST proxy should now work!