Wednesday, February 11, 2009

ExtJs problems with Date control

While working with extjs date control , I experienced a lots of problems.

-Auto increment of date in extjs

take a look at
http://extjs.com/deploy/dev/examples/form/xml-form.html

In that example when u put some value like 13 in months field of date control then on shift of focus,date control gets auto incremented.I dont know how this can be useful to any one ?? So i felt like correcting this mistake of user rather notify him of his error.
so all i has to do is handle this function


Ext.form.DateField.prototype.beforeBlur = function() { };

and keep my custom validator in place


function dateValidator(value)
{
if((parseInt(value.substring(0,2)) <=0 ) || (parseInt(value.substring(0,2)) > 12))
{
var message= 'Please Enter a Proper Number for ' + ' Month ' +' in ' + this.fieldLabel+' field ';
return message;
}
else if((parseInt(value.substring(3,5)) <=0 ) || (parseInt(value.substring(3,5)) > 31))
{
var message= 'Please Enter a Proper Number for ' + ' Day ' +' in ' + this.fieldLabel+' field ';
return message;
}
else
return true;
}



-Keys inside Date Control

Another important feature i needed was to allow user to submit the forum on enter even when he was in date field and the important thing was to get the edited(dirty) value of date filed.
Normally when u apply key events for a form , try to submit that form say on Enter key , then when u 'enter' while focus inside date field then you end up getting the value of date field which may not be the exact value u have entered in currently focused date field .The way extjs does is

-value : proper value
-rawvalue : dirty value which may or may not be valid

So in my case of user entering while inside datefield, i use getRawValue().

Refer to example in attachment.


http://www.box.net/shared/lkal6x9sr7

Sunday, February 8, 2009

ExtJs Grid Extension with Copy,Paste of selected Cell,Row and Grid

Grid is a very crucial component while building business applications.
One very required feature of grids is context menu with copy cell,row and entire grid. In our application we needed this feature to be there in almost all the grids in the application. So inspired by this post on extjs forums

http://extjs.com/forum/showthread.php?t=13340

I have made a grid extension which has copy cell,row and grid features. The reason behind making this extension is re-usability since i cant write the same code for every grid just to get these functions(cell,row,table copy).

For Mozilla Browsers I made use of a workaround on this post

http://www.jeffothy.com/weblog/clipboard-copy.


So here i am posting the code of ExtJs grid extension with copy cell,row and grid,sample html with extjs grid . take care of css ,images paths of extjs.


http://www.box.net/shared/i9m7i36llx


Note :
For Asp.net users please take care of Date.Format issues when your column type is Date Type.