Wednesday, 30 January 2013

Make Grid Cell Selectable in EXTJS4

ExtJs Grid cells are not selectable by default  which makes it difficult for user to copy paste the contents, By overriding below CSS, it will make grid cells selectable. :)
.x-grid-row ,.x-grid-cell, .x-unselectable, .x-unselectable * {
 -webkit-user-select: text !important;
 -o-user-select: text !important;
 -khtml-user-select: all !important;
 -ms-user-select: text !important;
 user-select: text !important;
 -moz-user-select: text !important;
Next, we need to update metaRowTpl of tableChunker to use above CSS for grid Cell.
Place the following code somewhere in the top of your application javascript file.

if(typeof Ext != 'undefined'){
  Ext.core.Element.prototype.unselectable = function(){return this;};
  Ext.view.TableChunker.metaRowTpl = [
   '<tr class="' + Ext.baseCSSPrefix + 'grid-row {addlSelector} {[this.embedRowCls()]}" {[this.embedRowAttr()]}>',
    '<tpl for="columns">',
     '<td class="{cls} ' + Ext.baseCSSPrefix + 'grid-cell ' + Ext.baseCSSPrefix + 'grid-cell-{columnId} {{id}-modified} {{id}-tdCls} {[this.firstOrLastCls(xindex, xcount)]}" {{id}-tdAttr}><div class="' + Ext.baseCSSPrefix + 'grid-cell-inner ' + Ext.baseCSSPrefix + 'unselectable" style="{{id}-style}; text-align: {align};">{{id}}</div></td>',

Convert String to Title case in Javascript

Sometimes we need to convert user Name to proper casing, for that we can use below method.

i.e. JoHn METHEW will be converted to John Methew

 *  Provie toProperCase method to string Class
String.prototype.toProperCase = function() {
 return this.replace(/\w\S*/g, function(txt) {
  return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();


"JoHn METHEW".toProperCase()