[Sublime] Code Formatter (Reindent) Shortcut in Sublime

Preference -> Key Bindings-User：

[
  { "keys": ["ctrl+shift+r"], "command": "reindent", "args": { "single_line": false } }
]

This will reindent entire file in Sublime.

[ExtJS] Close Window if Click Anywhere Other Than The Window Itself

Some web application shows a window for presenting more detail information. It allows user to close the window not only via clicking the close button but also via clicking anywhere other than the window itself.

Click to Close Ext JS Window on Focus Out

If you'd like to have this behavior for a window in ExtJS, you can add the following code to your application.

Ext.define('TonyTuan.window.Window', {
    override: 'Ext.window.Window',
    closeOnFocusOut: false,
    initComponent: function() {
        var me = this;
        if (me.closeOnFocusOut === true) {
            me.mon(Ext.getBody(), 'click', function(el, e) {
                me.close(me.closeAction);
            }, me, {
                delegate: '.x-mask'
            });
        }
        me.callParent(arguments);
    }
});

And set closeOnFocusOut:true for the window you want.

Ext.widget('window', {
    closeOnFocusOut: true,
    title: 'Hello',
    height: 200,
    width: 400,
    layout: 'fit',
    items: {       
        html: 'hello world'
    }
}).show();

Please note that this kind of behavior is not suitable for a window with a input form, since user may click somewhere other than the window incautiously, leading to the loss of input data.

[ExtJS] RowExpander doesn't show a whole long word

I have a RowExpander grid with a summary field which may contains a very long word. If there's no space between this word, RowExpander cannot show full word. For example, the summery field is '11111 222222 33333344444444444....555555555555'. But the number "5555.." doesn't present.

If a word is too long, I'd like to let the row expander break it a new line instead of hiding it.

Live Example: RowExpander doesn't show a whole long word

To solve this issue, we can just add a attribute word-wrap:break-word; to x-grid-rowbody class like:

.x-grid-rowbody p {
 word-wrap: break-word;
}

Result:

Force a Long Line of Word (without spaces) to Line Break in ExtJS RowExpander

The solution is verified in ExtJS 4.1.1, 4.2, and 5.0.

[CSS] Force a Long Line of Word (without spaces) to Line Break

Suppose you have a very long word in DIV as below, the word will not break by default.

<div id="veryLongWord">VeryLongWordVeryLongWordVeryLongWord</div>
<style>    
  #veryLongWord{
    border-style:double;
    width: 250px;
  }    
</style>

Result:

VeryLongWordVeryLongWordVeryLongWord

If you'd like to make a long word have Line Breaks, just add word-wrap:break-word; to your css like:

<div id="breakWord">VeryLongWordVeryLongWordVeryLongWord</div>
<style>    
  #breakWord{
    border-style:double;
    width: 250px;
    word-wrap:break-word;
  }    
</style>

Result:

VeryLongWordVeryLongWordVeryLongWord

Auto login in WinSCP cmd

Create a script named "scp.script" with the following content.

option batch on
option confirm off
open sftp://MyAccount:MyPass@serverIP:22 -hostkey="ssh-rsa 1024 42:9e:c7:f4:7f:8b:50:10:6a:06:04:b1:d4:f2:04:6d"
dir
exit

Then run the script:

"C:\Program Files\WinSCP\WinSCP.com" /script:"scp.script"     

Here comes result:

batch           on
confirm         off
Searching for host...
Connecting to host...
Authenticating...
Using username "root".
Authenticating with pre-entered password.
Authenticated.
Starting the session...
Reading remote directory...
Session started.
Active session: [1] root@10.0.0.1
-rw-------   1 root     root         14376 Apr 11 14:30:29 2014 .mysql_history
-rw-r--r--   1 root     root           107 Apr 23 17:13:12 2013 .gtk-bookmarks

[ExtJS] Cancel Duplicate Store Loading Request Automatically

In the previous article, we mentioned how to abort a store request manually. It's used when programmer want to cancel a store loading request manually.

"Refresh" button in grid

Image there's a "Refresh" button in your grid, the user may press the button quickly multiple times. This behavior make store send multiple requests at a short period of time. So it's better to abort the previous requests for performance and data correctness issue.

Cancel Duplicate Store Loading Request Automatically

The following code overrides ExtJS store behavior, making all of stores in web application abort duplicated store loading request automatically. Just put it to somewhere your application initialized.

Ext JS 4.1.1a:

Ext.define('Tonytuan.data.Store', {
  override: 'Ext.data.Store',
  abort: function () {
    var me = this;
    if (me.loading && me.lastOperation) {
      var requests = Ext.Ajax.requests;
      for (id in requests) {
        if (requests.hasOwnProperty(id) && requests[id].options == me.lastOperation.request) {
          Ext.Ajax.abort(requests[id]);
          delete requests[id];
          break;
        }
      }
    }
  },
  constructor: function (config) {
    var me = this;
    me.callParent([config]);
    me.on({
      'beforeload': function (store, operation) {
        // Abort previous request if it has not been completed.
        if (me.loading) {
          me.abort();
        }
        store.lastOperation = operation;
      }
    });
  }
});

Ext JS 5.0.1:

Ext.define('Ext.enhance.data.Store', {
  override: 'Ext.data.Store',
  abort: function() {
    var me = this;
    if (me.isLoading() && me.lastOperation) {
      var requests = Ext.Ajax.requests;
      for (id in requests) {
        if (requests.hasOwnProperty(id) && requests[id].options.url == me.lastOperation.request._url) {
          Ext.Ajax.abort(requests[id]);
          delete requests[id];
          break;
        }
      }
    }
  },
  constructor: function(config) {
    var me = this;
    me.callParent([config]);
    me.on({
      'beforeload': function(store, operation) {
        // abort previous request
        if (me.isLoading()) {
          me.abort();        }
        store.lastOperation = operation;
      }
    });
  }
});

[ExtJS] Capture All Events Fired by a Component

If you want to capture all events fired by a component, just call Ext.util.Observable.capture after the component is created.

Ext.util.Observable.capture(grid, function(eventName, signature) {
    console.log('Event:', eventName, signature);
});

Capture All Events Fired by a Component in ExtJS

Online Demo on Sencha Fiddle