ExtJS Javascript Library for Beginners!

Did you know Ext JS had a calendar control?

I didn’t until yesterday when after dissection our application at work I discovered we were using a 3rd party calendar from DynamicDrive.com.
Not only was this calendar a bit lame, it also added about three extra JavaScript files (setup file, main calendar file and a language file) and an extra CSS file.
The speed heads out there will tell you that that equals 4 extra http requests, which even if cached is still an overhead if you’re including JavaScript libraries in your app too.

So I set about pulling the original calendar to pieces, mainly because it wasn’t working to start with. This was when I came across the Ext.DatePicker class. After stumbling on the MultiMonth Calendar.
So I figured seeing as though I now know Ext has its own calendar, why not chuck it in bro?

So here’s how it’s done. A basic calendar can be rendered thus:

Ext.onReady(function(){
    // this is required for the tooltips.
    Ext.QuickTips.init();

    var dp = new Ext.DatePicker({
        renderTo: Ext.getBody(),
        listeners: {
            'select': function(date_picker, date){
                alert(date.getFullYear() + '-' + (parseInt(date.getMonth()) + 1) + '-' + date.getDay());
            }
        }
    });


});

That gives a basic calendar control which when a date is clicked will display an alert with the date format of YYYY-MM-DD. Sooooo simple!! Much nicer then the calendar we were using to.

Floating the Calendar

From here I went a bit further, because the calendar needs to be in a floating div (and I’m too lazy to float it with CSS) I wrapped my calendar control in an Ext.Window (why not, it’s all there!)

Here is the code for a calendar in an Ext.Window

Ext.onReady(function(){

    Ext.QuickTips.init();

    // define the calendar.
    var dp = new Ext.DatePicker({
        listeners: {
            'select': function(date_picker, date){
                // our form element.
                var _frm = document.getElementById('date_picker_form');

                // date value form inpuit
                var _set_day = document.getElementById('set_day');

                // set value and submit.
                _set_day.value = date.getFullYear() + '-' + (parseInt(date.getMonth()) + 1) + '-' + date.getDate();
                _frm.submit();
            }
        }
    });

    // define the window.
    var win = new Ext.Window({
        title: 'Date Picker',
        closeable: true,
        closeAction: 'hide',
        id: 'calendar_ctrl',
        hidden: true,
        resizable: false,
        renderTo: Ext.getBody(),
        items: [dp] // the date picker from above.
    });
});

Now this works fine in FireFox. Internet Explorer however showed a big box the height of the calendar across the page. Bit annoying!! But after a while I found the fix. In the Ext.Window definition add the following:

    width:'200px',
    height:'200px',

That fixed it for me, and didn’t compromise the calendar display.

That’s chopped out an extra 4 items from our app – another performance win!!

Recommended Reading

1. http://extjs.com/deploy/dev/docs/ – DatePicker and Window

James