Update examples

Author: Jay Garcia

.DS_Store

@@ -0,0 +1,7 @@
+.idea
+*DS_Store
+
+.idea/workspace.xml
+*.iml
+examples/ch14/build
+

.gitignore

@@ -22,11 +22,12 @@
 
     var childPnl2 = {
        xtype  : 'panel',
+        width : 150,
        html   : 'Second child',
        title  : 'Second children have all the fun!'
     };
 
-    var myWin = Ext.create("Ext.Window", ({
+    var myWin = Ext.create("Ext.Window", {
        height     : 300,
        width      : 300,
        title      : 'A window with a container layout',
@@ -53,7 +54,7 @@
              }
           }
        ]
-    }));
+    });
 
     myWin.show();
 

examples.zip

@@ -52,7 +52,7 @@
             dock        : 'bottom',
             displayInfo : true
         };
-
+                                                                                                  f
 
         var grid = Ext.create('Ext.grid.Panel', {
             columns      : columns,

examples/.DS_Store

@@ -8,61 +8,92 @@
 <script type="text/javascript" src="../../ext4/ext-all-debug.js"></script>
 <script type='text/javascript'>
 
+/**
+ * Require dependencies
+ */
 Ext.require(['Ext.data.*', 'Ext.window.Window', 'Ext.tree.*']);
 
+
+/**
+ * Delete confirmation handler
+ */
 var onConfirmDelete = function(answer, value, cfg, button) {
-    if (answer != 'yes') {
+    if (answer !== 'yes') {
         return;
     }
 
     var menu = button.up(),
-            node = menu.treeNode;
+        node = menu.treeNode;
 
     node.remove(true);
 };
+
+/**
+ * Handler for delete menu item
+ */
 var onDelete = function(button) {
     var callback = Ext.bind(onConfirmDelete, undefined, [button], true);
     Ext.Msg.confirm(
-        'Approve deletion',
-        'Are you sure you want to delete this node?',
-        callback
+            'Approve deletion',
+            'Are you sure you want to delete this node?',
+            callback
     );
 };
+
+/**
+ * Edit handler
+ */
 var onEdit = function(button, node) {
     var menu = button.up(),
         node = node || menu.treeNode,
         view = menu.treeView,
         tree = view.ownerCt,
         selMdl = view.getSelectionModel(),
-        colHdr = tree.headerCt.getHeaderAtIndex(0);
+        colHdr = tree.headerCt.getHeaderAtIndex(0),
+        pos;
 
     if (selMdl.getCurrentPosition) { //only in cellmodel selection model
         pos = selMdl.getCurrentPosition();
         colHdr = tree.headerCt.getHeaderAtIndex(pos.column);
     }
     treeEditor.startEdit(node, colHdr);
 };
+
+
+/**
+ * Create a new entry
+ */
+var doCreate = function(node, button) {
+    var newNode = node.appendChild({text : 'New employee', leaf : true});
+
+    // Turn on editing right away
+    onEdit(button, newNode);
+};
+
+
+/**
+ * Add item handler
+ */
 var onAdd = function(button) {
     var menu = button.up(),
-            node = menu.treeNode,
-            view = menu.treeView,
-            delay = view.expandDuration + 50,
-            newNode,
-            doCreate;
-
-    doCreate = function() {
-        newNode = node.appendChild({text : 'New employee', leaf : true});
-        onEdit(button, newNode);
-    };
+        node = menu.treeNode,
+        view = menu.treeView,
+        delay = view.expandDuration + 50;
 
     if (!node.isExpanded()) {
-        node.expand(false, Ext.callback(doCreate, this, [], delay));
+        // expand and wait for animation before appending a new node
+        node.expand(false, Ext.callback(doCreate, this, [node, button], delay));
     }
     else {
-        doCreate();
+        doCreate(node, button);
     }
 };
 
+
+/**
+ * Context menu
+ * @returns {Ext.menu.Menu}
+ */
 var buildCtxMenu = function() {
     return Ext.create('Ext.menu.Menu', {
         items : [
@@ -81,7 +112,11 @@
         ]
     });
 };
-//Configuring a context menu factory method
+
+/**
+ * Configuring a context menu factory method
+ */
+
 var onCtxMenu = function(view, record, element, index, evtObj) {
     view.select(record);
     evtObj.stopEvent();
@@ -90,14 +125,14 @@
         this.ctxMenu = buildCtxMenu();
     }
 
+    var ctxMenu = this.ctxMenu,
+        addItem = ctxMenu.getComponent('add'),
+        editItem = ctxMenu.getComponent('edit'),
+        deleteItem = ctxMenu.getComponent('delete');
+
     this.ctxMenu.treeNode = record;
     this.ctxMenu.treeView = view;
 
-    var ctxMenu = this.ctxMenu;
-    var addItem = ctxMenu.getComponent('add');
-    var editItem = ctxMenu.getComponent('edit');
-    var deleteItem = ctxMenu.getComponent('delete');
-
     if (record.getId() == 'mycompany') {
         addItem.setText('Add Department');
         editItem.setText('Nope, not changing the name');
@@ -142,21 +177,19 @@
 
     getEditingContext : function(record, columnHeader) {
         var me = this,
-                grid = me.
-
-        if (Ext.isNumber(record)) {
-            rowIdx = record;
-            //record = grid,
+                grid = me.grid,
                 store = grid.store,
                 rowIdx,
                 colIdx,
                 view = grid.getView(),
                 root = grid.getRootNode(),
-                value;store.getAt(rowIdx);
+                value;
+
+        if (Ext.isNumber(record)) {
+            rowIdx = record;
             record = root.getChildAt(rowIdx);
         }
         else {
-            //rowIdx = store.indexOf(record);
             rowIdx = root.indexOf(record);
         }
         if (Ext.isNumber(columnHeader)) {
@@ -178,7 +211,39 @@
             rowIdx : rowIdx,
             colIdx : colIdx
         };
+    },
+
+    onEditComplete : function(ed, value, startValue) {
+        var me = this,
+                activeColumn = me.getActiveColumn(),
+                context = me.context,
+                record;
+
+        if (activeColumn) {
+            record = context.record;
+
+            me.setActiveEditor(null);
+            me.setActiveColumn(null);
+            me.setActiveRecord(null);
+
+            context.value = value;
+            if (!me.validateEdit()) {
+                return;
+            }
+
+            if (!record.isEqual(value, startValue)) {
+                record.set(activeColumn.dataIndex, value);
+            }
+
+            if (Ext.isObject(context.view)) {
+                context.view.focus(false, true);
+            }
+
+            me.fireEvent('edit', me, context);
+            me.editing = false;
+        }
     }
+
 });
 
 var store = Ext.create('Ext.data.TreeStore', {
@@ -213,8 +278,6 @@
     }
 });
 
-//{ptype: 'treecellediting', clicksToEdit: 1}
-
 var treeEditor = Ext.create('TreeCellEditing', {clicksToEdit : 1});
 
 Ext.onReady(function() {