Provide more space and less Ajax to the Note Editor

When editting long notes the old editor window (horizontal split of editor and
preview) was a bit uncomfortable. We are splitting the the editor and preview
widgets in two tabs, so you can focus on editing or previewing your work.

The changes required:

* Switch from a Border layout Panel to a TabPanel (each widget provides a Title
attribute that will be used in the corresponding tab)

* Instead of updating the preview widget on every `keypress` just update when
the user clicks on the _Preview_ tab.

More info at:
http://sourceforge.net/mailarchive/forum.php?thread_name=4DD53FE2.1090401%40nomejortu.com&forum_name=dradis-devel

public/javascripts/dx/dradis.notes.NoteEditorWindow.js

@@ -3,26 +3,27 @@
 Ext.ns('dradis.notes');
 
 /********************************************************************* Panel */
-dradis.notes.NoteEditorPanel=Ext.extend(Ext.Panel, {
+dradis.notes.NoteEditorPanel=Ext.extend(Ext.TabPanel, {
   //props (overridable by caller)
   fields: {},
 
   initComponent: function(){
     // Called during component initialization
     var config ={
       //props (non-overridable)
-      layout: 'border',
+      deferredRender: false,
+      activeTab: 0,
       border: false,
       items:[
         this.fields.editor = new Ext.form.TextArea({
-          region: 'north',
-          height: 240,
-          split: true,
+          title: 'Write',
           autoScroll: true,
           border: true,
           enableKeyEvents: true
         }),
-        this.fields.preview = new dradis.notes.NotePreviewPanel()
+        this.fields.preview = new dradis.notes.NotePreviewPanel({
+          title: 'Preview'
+        })
       ],
       buttons:[
         {
@@ -54,9 +55,12 @@ dradis.notes.NoteEditorPanel=Ext.extend(Ext.Panel, {
 
     // After parent code
     // e.g. install event handlers on rendered component
-    this.fields.editor.on( 'keypress', function(field, evt){
-      this.fields.preview.update(field.getValue());
-    }, this, {buffer: 500});
+    this.on( 'beforetabchange', function(panel, newTab, currentTab){
+      if (newTab == this.fields.preview)
+      {
+        this.fields.preview.update(this.fields.editor.getValue());
+      }
+    });
   },
 
   // other methods/actions