Change current month event in Ext.picker.Date

There is no change event month in object 'Ext.picker.Date' in Ext JS 4.
Here is an implementation that allows you to add this event by extending class 'Ext.picker.Date':

Ext.define("YourCalendarPicker", {
    extend: "Ext.picker.Date",
    ...
    update : function(date, forceRefresh){
        var me = this,
            monthViewChange = me.isAnotherMonthView(date);
        me.callParent(arguments);
        if (monthViewChange){
            me.fireEvent("monthviewchange", me, date, me.activeDate);
        }
        return me;
    },
    ...

    /**
     * return true if the given date is in a different month view of the actual calendar date
     * @param {Date} date
     * @return {Boolean}
     */
    isAnotherMonthView: function(date){
        var activeDate = this.activeDate || date;
        return date.getYear() != activeDate.getYear() || 
               date.getMonth() != activeDate.getMonth();
    }
};

Blink body of an Ext.form.Panel

To draw attention to a form of creation, I wanted to give a small effect on my form body using the 'highlight' function on an HTML DOM object. Here is the ExtJS code I used:

var myForm = Ext.create("Ext.form.Panel");
...
myForm.body.el.highlight("0000DD", {
  attr: "backgroundColor", //can be any valid CSS property (attribute) that supports a color value
  endColor: "ffffff",
  easing: 'easeIn',
  duration: 500
});

source : http://docs.sencha.com/core/output/Ext.Fx.html

How to shrink your disk on VMware Player 5 ?

As the option seems to have disappeared from the VMware tools menu, these are commands to shrink your VMware disk on Windows or Linux.

Shrinking the virtual disk in a Windows virtual machine

To shrink the virtual disk in a Windows virtual machine:

1. Power on the Windows virtual machine.
2. Open a Command Prompt with administrator privileges.
3. Run these commands:
   
   cd C:\Program Files\VMware\VMware Tools
   C:\Program Files\VMware\VMware Tools> VMwareToolboxCmd help disk
   This displays a list of options that are available for shrinking.

Shrinking the virtual disk in a Linux virtual machine

To shrink the virtual disk in a Linux virtual machine:

1. Open Terminal.
2. Run these commands:
   
   cd /usr/bin
   
   /usr/bin$ vmware-toolbox-cmd help disk

source: http://communities.vmware.com/thread/420371

Be careful when you use extraparams in proxy in ExtjJS 4; you should use baseparams!

Problem with proxy extra params: proxy is common to all stores created with this proxy! Example:

var countries1, countries2; countries1 = Ext.create( "MyApp.store.Countries"); // add parameter 'countriesId' = 1 countries1.getProxy().setExtraParam( "countriesId", 1) countries1.load(); countries2 = Ext.create( "MyApp.store.Countries"); // add parameter 'countriesId' = 2 countries2.getProxy().setExtraParam( "countriesId", 2) countries2.load({     callback: function(){         countries1.load(); // 'countriesId' is no more 1, but 2 !!!     } });

I advise you to create your own store class which implements base parameters if you want to set parameters before calling 'load' function with several stores of the same type.

Ext.define( "MyStore",{     extend: "Ext.data.Store",     baseParams: null,     /**      * add base parameter to store.baseParams      * @param {Object} key/value object: {key: value}      */     addBaseParam: function(obj){         Ext.apply( this .baseParams, obj);     },     /**      * add several base parameters to store.baseParams      * @param {Array}: array of key/value object: [{key1: value1, key2: value2,...}]      */     addBaseParams: function(objects){         var me = this ;         if (Ext.isArray(objects)){             Ext. each(objects, function (obj){                 me.addBaseParam(obj);             })         } else if (objects){             me.addBaseParam(objects);         }     },     /**      * reset base parameters      */     resetBaseParams: function(){         this .baseParams = {};     },     /**      * constructor      * @param {object} config      */     constructor: function(config) {         var me = this ;         // manage base params         me.baseParams = me.baseParams || {};         // call parent         me.callParent(arguments);     },     /**      * override load method to add base params to request params      * @param {Object} options      */     load: function(options){         var me = this ;         options = options || {};         options.params = options.params || {};         Ext.applyIf(options.params, me.baseParams);         me.callParent([options]);     } });

Ext.data.Model.load doesn't take car of 'idProperty' of the model

The problem can appear with extended store, the 'load' function doesn't take care of 'idProperty' define in your model. You have to override 'load' method but be careful to look at mapping property of the identity field!

load: function (id, config){        config = Ext.apply({}, config);         var me = this ,               params={},               fields = me.getFields(),               nameProperty = me.nameProperty,               field,               fieldName,               i;                 // get field of idProperty         for (i=fields.length-1;i>=0;i--){                if (fields[i].name == me.prototype.idProperty){                      field = fields[i];                       break ;               }        }         // get the field name         if (field){               fieldName = field[nameProperty] || field.mapping || field.name;        } else {               fieldName = me.prototype.idProperty;        }         // set identity param        params[fieldName] = id;        config = Ext.applyIf(config, {               action: 'read',               params: params        });         var operation = Ext.create('Ext.data.Operation' , config),               scope = config.scope || me,               record,               callback;        callback = function (operation) {                if (operation.wasSuccessful()) {                      record = operation.getRecords()[0];                      Ext.callback(config.success, scope, [record, operation]);               } else {                      Ext.callback(config.failure, scope, [record, operation]);               }               Ext.callback(config.callback, scope, [record, operation]);        };        me.proxy.read(operation, callback, me); }

Stack Trace doesn't appear anymore on Firebug

It seems that stack trace doesn't appear by default in new Firebug version ; but you can easily re-activate the option by checking in "Console > Show Stack Trace  With Errors".

This can be very useful for ExtJS development.

Ext.data.Model.load doesn't use the idProperty of the current model

When you create you own model by extending 'Ext.data.Model', you can use the function load which take an identity as first parameter and an configuration object as second. The problem is ExtJs 4.1 doesn't use the idProperty of the new model to send the parameter but 'id'.
You can override the static function load from Ext.data.Model to modify this behavior:

load: function(id, config){       config = Ext.apply({}, config);        var me = this ,             params={};       params[me.prototype.idProperty] = id;       config = Ext.applyIf(config, {             action: 'read' ,             params: params       });        var operation = Ext.create('Ext.data.Operation' , config),             scope = config.scope || me,             record,             callback;       callback = function (operation) {              if (operation.wasSuccessful()) {                   record = operation.getRecords()[0];                   Ext.callback(config.success, scope, [record, operation]);             } else {                   Ext.callback(config.failure, scope, [record, operation]);             }             Ext.callback(config.callback, scope, [record, operation]);       };       me.proxy.read(operation, callback, me); }