Html 5 LocalStorage

localStorage is also called Web Storage or DOM storage. It is a database that can store only key-value pairs, and the value data-type should always be a string. At first, this might seem a serious limitation, but using along with JavaScript arrays and JSON we can achieve quite a bit. The good news is that this feature is supported in the latest versions of all browsers, both on desktop and mobile environments (Android and iOS). Also, the developer gets a huge 5 MB of storage per domain.

localStorage support on browsers/platforms

This table lists the minimum version of each browser required to support localStorage:

IE	Firefox	Safari	Chrome	Opera	iPhone	Android
8.0+	3.5+	4.0+	4.0+	10.5+	2.0+	2.0+

Operations on localStorage

The methods of localStorage include setItem(), getItem(), removeItem() and clear(). Here is sample code to add a record to localStorage using setItem():

// max limit reached exception try {   localStorage.setItem(itemId, "Sample Value"); } catch (e) {   if (e == QUOTA_EXCEEDED_ERR) {     alert('Quota exceeded!');   } }

We will use getItem() and removeItem() in the Web app that we will develop. Note thatlocalStorage.clear() removes all entries from the database, so use it with caution!

How word-wrap cell text on extjs grid

I use following way to wrap the cell text in extjs grid.

{
 header : 'Error Message',
 dataIndex : 'errorMessage',
 renderer:function(val, meta, record, rowIndex, colIndex, store){
  return '<div style="white-space:normal !important;">'+ val +'</div>';
}
}

How to hide grid header in extjs grid

Please use "hideHeaders:true" to hide header in extjs grid.

How to refresh paging toolbar data on store reload

Below code will refresh paging toolbar data on store reload.
(Issue is when you are in second page and try to reload the store, you will see paging tool bar is not refreshing to starting page.)

 store.load({start:0,limit:25});  
 store.loadPage(1);

How deal with checkbox in extjs grid

There are few ways to implement checkbox in extjs grid. However, I feel below one is the good one.

Use below code in grid.

{
  header : 'Reviewed',
  align:'center',
  renderer:function(val, meta, record, rowIndex, colIndex, store){
      return Ext.String.format('<input name="review[]" type="checkbox" value="{       0}">',record.get('id'));
}// here i am passing "id" value as part of check box. 

I  have one button to get those values and use it for further processing.

{
xtype: 'button',
text:'Apply Changes',
listeners : {
 click : function(){
var aunarray = "";
var check = document.getElementsByName('review[]');
var checkLength = check.length;
 for(var i=0; i < checkLength; i++){
  if(check[i].checked){
    aunarray = aunarray+","+check[i].value;
   }
 }
DW.App.getController('AdminNotification').appplyChanges(aunarray);
}
}
}