Autosaving form values

Autosave is a useful feature found in many applications. This recipe teaches you how to execute code that simulates the saving of a TextArea's contents without requiring any user intervention.

Your TextArea will be accompanied by a couple of toolbar items that will show the character count and the last time the TextArea contents were saved, as seen in the following screenshot:

How to do it...

1. 1. Create the components that will show the character count and status message:

   Ext.onReady(function() {
   var statusMsg = new Ext.Toolbar.TextItem('');
   var charCount = new Ext.Toolbar.TextItem('Chars: 0');
   

2. 2. Now, create a panel that will contain the the autosaving TextArea:

   new Ext.Panel({
   title: 'Autosave of a form element',
   renderTo: 'autosave-form',
   width: 450,
   autoHeight: true,
   bodyStyle: 'padding:5px;',
   layout: 'fit',
   bbar: new Ext.Toolbar({
   id: 'statusBar',
   items: [charCount, '->', statusMsg]
   }),
   

3. 3. Define the autosaving TextArea inside the panel. A handler for the keypress...