Console.log for IE

Using of Alert to loop/debug through the code is sometimes annoying for a developer as IE does not come with *Console*. Below code snippet will take care of *Consle* object an IE, it works in two ways. - If you have debugger open than it will log the information on IE console. - If you do not have IE debugger open than it will use ALERT the log the information.

var alertFallback = true;
if (typeof console === "undefined" || typeof console.log === "undefined") {
  console = {};
  if (alertFallback) {
      console.log = function(msg) {
           alert(msg);
      };
  } else {
      console.log = function() {};
  }
}

• Case -1 . Without opening Debugger

In this case it will display logger messages in alert.

      

• Case-2 With Debugger 

In this case it will display logger message in the IE debugger console

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>',
    '</tpl>',
   '</tr>'
  ];
 } 

Convert String to Title case in Javascript

Hi,
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();
 });
};

Usage:

"JoHn METHEW".toProperCase()

Itemselector Height in ExtJs4

It seems like in ExtJS4.0.2a, we can not modify the height directly. ( height:) will not work. As height has been initialized to 200 by default..

To Assign your own height you have to override the onRender method of ItemSelector.js

commonConfig = {
displayField: me.displayField,
valueField: me.valueField,
dragGroup: ddGroup,
dropGroup: ddGroup,
flex: 1,
hideLabel: true,
height : (this.height || 200)
}