updating example5 with comments/structure

zfapp/public/js/examples/example5/app.js

@@ -1,23 +1,33 @@
+/**
+ * Define default application
+ */
 Ext.application({
+
+    /** Give the app a name */
 	name: 'example5',
 
+    /** Define the base folder */
 	appFolder: '/js/examples/example5/app',
 
+    /** Autoload these controllers */
 	controllers: [
 		'Index'
 	],
 
+    /** Launch the application */
 	launch: function() {
 		console.log('Launch application "example5"');
 
 		Ext.create('Ext.container.Viewport', {
             layout: 'border',
             items: [
                 {
+                    /** Reference to example5.view.index.Grid */
                 	xtype : 'usergrid',
                 	region: 'center'
                 },
                 {
+                    /** Reference to example5.view.index.Helperbar */
                 	xtype : 'helperbar',
                 	region: 'north',
                 	height: 30,

zfapp/public/js/examples/example5/app/controller/Index.js

@@ -1,7 +1,12 @@
+/**
+ * Define Index controller
+ */
 Ext.define('example5.controller.Index', {
 
+	/** Extend default Controller */
 	extend: 'Ext.app.Controller',
 
+	/** Autoload views, models & stores */
 	views:  [
 		'index.Grid',
 		'index.Helperbar',
@@ -14,11 +19,13 @@ Ext.define('example5.controller.Index', {
 		'Usergrid'
 	],
 
+	/** Define a default "current user" */
 	currentUser: {
 		name: 'enygma',
 		id: 1
 	},
 
+	/** Initialize the controller */
 	init: function() {
 		console.log('Index controller');
 
@@ -41,11 +48,13 @@ Ext.define('example5.controller.Index', {
 		});
 	},
 
+	/** Handles the editing of a user record in the grid */
 	editUser: function(grid,record) {
 		var widget = Ext.widget('useredit');
 		widget.down('form').loadRecord(record);
 	},
 
+	/** Handles the update of a user in the grid */
 	updateUser: function(button) {
 		// only fires if there's a change to the value!
 
@@ -58,10 +67,12 @@ Ext.define('example5.controller.Index', {
 		currentWin.close();
 	},
 
+	/** Fired when a new user is added to the grid */
 	addUser: function() {
 		var widget = Ext.widget('useradd');
 	},
 
+	/** Handles teh creation of a new user */
 	createUser: function(button) {
 		console.log('create user!');
 
@@ -73,6 +84,7 @@ Ext.define('example5.controller.Index', {
 		//this.getUsergridStore().sync();
 	},
 
+	/** Handles the deletion of a user */
 	deleteUser: function(button) {
 		console.log('deleting user!');
 

zfapp/public/js/examples/example5/app/model/Users.js

@@ -1,6 +1,12 @@
+/**
+ * Define the User model
+ */
 Ext.define('example5.model.Users', {
 
+	/** Extend the default Model */
 	extend: 'Ext.data.Model',
+
+	/** Define the model's structure */
 	fields: ['name','id']
 
 });

zfapp/public/js/examples/example5/app/store/Usergrid.js

@@ -1,12 +1,22 @@
+/**
+ * Define the store for the user list grid
+ */
 Ext.define('example5.store.Usergrid', {
 
+	/** Extend the default Store */
 	extend: 'Ext.data.Store',
 
+	/** Link to a model for structure */
 	model: 'example5.model.Users',
 
+	/** Set store to autoload & autsync */
 	autoLoad: true,
 	autoSync: true,
 
+	/** 
+	 * Set up the store's data source
+	 *     NOTE: The different URLs for CRUD
+	 */
 	proxy : {
 		type: 'ajax',
 		// default URL

zfapp/public/js/examples/example5/app/view/index/Grid.js

@@ -1,17 +1,26 @@
+/**
+ * Define the Grid view for the user list
+ */
 Ext.define('example5.view.index.Grid', {
 
+	/** Extend the default Grid panel */
 	extend: 'Ext.grid.Panel',
+
+	/** Give it an alias and ID */
 	alias: 'widget.usergrid',
 	id: 'usergrid',
 
+	/** Link it to a store */
 	store: 'Usergrid',
 
+	/** Give the grid a title */
 	title: 'User List',
 
+	/** Initialize the grid component */
 	initComponent: function() {
 		console.log('launching grid');
 
-		// column definition for the grid
+		/** Column definition for the grid */
 		this.columns = [
 			{header:'Name',dataIndex:'name',flex:1}
 		];

zfapp/public/js/examples/example5/app/view/index/Helperbar.js

@@ -1,12 +1,23 @@
+/**
+ * Create the view for the "Helper bar" in the example
+ */
 Ext.define('example5.view.index.Helperbar', {
 
+	/** Extend the default panel */
 	extend: 'Ext.panel.Panel',
+
+	/** Give it an alias */
 	alias: 'widget.helperbar',
+
+	/** Use the "hbox" horizontal layout */
 	layout: 'hbox',
+
+	/** Set some defaults for all child items */
 	defaults: {
 		margin: 2
 	},
 
+	/** Define the child items */
 	items: [
 		{
 			xtype: 'button',

zfapp/public/js/examples/example5/app/view/user/Add.js

@@ -1,11 +1,20 @@
+/**
+ * Create the "add user" view (window)
+ */
 Ext.define('example5.view.user.Add', {
 
+	/** Extend the default Window object */
 	extend   : 'Ext.window.Window',
+
+	/** Give it an alias, layout and title */
 	alias    : 'widget.adduser',
 	layout   : 'fit',
 	title    : 'Add New User',
+
+	/** Tell it to show as soon as created */
 	autoShow : true,
 
+	/** Initialize the component */
 	initComponent: function() {
 		this.items = [
 			{
@@ -16,6 +25,8 @@ Ext.define('example5.view.user.Add', {
 						name       : 'name',
 						fieldLabel : 'Name',
 						allowBlank : false,
+
+						/** Real-time validation on the object */
 						validator  : function(value) {
 							if (Ext.getCmp('createUserBtn')) {
 								if (value.length > 0) {
@@ -37,6 +48,7 @@ Ext.define('example5.view.user.Add', {
 			}
 		];
 
+		/** Create buttons for the window */
 		this.buttons = [
 			{
 				text     : 'Create User',

zfapp/public/js/examples/example5/app/view/user/Delete.js

@@ -1,17 +1,24 @@
+/**
+ * Create the "delete user" view
+ */
 Ext.define('example5.view.user.Delete', {
 
+	/** Extend the default Window */
 	extend   : 'Ext.window.Window',
-	alias    : 'widget.deleteuser',
 
+	/** Give the widget an alias, tell it to autoshow and set the width */
+	alias    : 'widget.deleteuser',
 	autoShow : true,
 	width    : 300,
 
+	/** Define the child items */
 	items: [
 		{
 			html: 'Are you sure you wish to delete user <foo>?'
 		}
 	],
 
+	/** Initialize the component */
 	initComponent: function() {
 
 		this.buttons = [

zfapp/public/js/examples/example5/app/view/user/Edit.js

@@ -1,15 +1,23 @@
+/**
+ * Create the "edit user" form
+ */
 Ext.define('example5.view.user.Edit', {
 
+	/** Extend default Window */
 	extend	 : 'Ext.window.Window',
+
+	/** Give window a title, alias, layout and tell it to show on create */
 	title	 : 'Edit User',
 	alias	 : 'widget.useredit',
 	layout	 : 'fit',
 	autoShow : true,
 
+	/** Initialize the component */
 	initComponent: function()
 	{
 		this.items = [
 			{
+				/** Define the form */
 				xtype: 'form',
 				items: [
 					{
@@ -31,6 +39,7 @@ Ext.define('example5.view.user.Edit', {
 			}
 		];
 
+		/** Set up window buttons */
 		this.buttons = [
 			{
 				text 	: 'Save User',