Showing posts with label ExtJs4. Show all posts
Showing posts with label ExtJs4. Show all posts

Monday, April 7, 2014

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