Wednesday, 2 July 2014

ExtJS4 : Copying data from one grid to another.

Copying content into clipboard is a security hole. As a result no simple javascript method is available to write content into clipboard. Except IE, no other browser supports this without any plugins/flash. But if you just want to copy one row of grid and paste it into another grid you can use following hack.(Two grid stores should use same model). 

  • Select a row and provice ExtJS context menu, in action get selected record. It will be in the form of model. Convert this model object into JSON object using getData(true) method on the model. It converts model object into json including association data. 
  • Now your task is to persist this data in user's environment. For this you can use HTML5 web storage. It is simple, faster and secure. But it doesn't work on IE7 and earlier versions.
                   localStorage.setItem("json-object", model.getData(true));
  • Above code stores model object into client's browser in the form of string. 
  • When you wan to handle paste, fetch the stored data string and decode into JSON object. 
                  var jsonObject =  Ext.Deode(localStorage.getItem("json-object"));
  • After retrieving jsonObject convert this back in to model and push it into grid's store. 
            Check this to convert jsonObject into model.

Extjs4 : Converting JSON Object into model

ExtJS provides getData(true) method on model to convert model object into JSON Object including associations. But other way is not a straight forward thing in ExtJS4. If you have JSON and want to convert into model, one dirty way could be create a store with memory proxy, input JSON object as data object and access first record in the store. But this method is not always fruitful. If your JSON has associated data, this method will not work properly. Especially in case of hasOne association case, it never creates *HasOneInstance objects using this method.

I found similar API in Sencha touch 2.2.1 and modified a bit to make it work in ExtJS 4.2.1