From 676a1ffcebf5a0651e71cf16c3a414c930043153 Mon Sep 17 00:00:00 2001 From: Chris Cornutt Date: Sun, 3 Jun 2012 21:15:41 -0500 Subject: [PATCH] updating example5 with comments/structure --- zfapp/public/js/examples/example5/app.js | 10 ++++++++++ .../js/examples/example5/app/controller/Index.js | 12 ++++++++++++ zfapp/public/js/examples/example5/app/model/Users.js | 6 ++++++ .../js/examples/example5/app/store/Usergrid.js | 10 ++++++++++ .../js/examples/example5/app/view/index/Grid.js | 11 ++++++++++- .../js/examples/example5/app/view/index/Helperbar.js | 11 +++++++++++ .../public/js/examples/example5/app/view/user/Add.js | 12 ++++++++++++ .../js/examples/example5/app/view/user/Delete.js | 9 ++++++++- .../js/examples/example5/app/view/user/Edit.js | 9 +++++++++ 9 files changed, 88 insertions(+), 2 deletions(-) diff --git a/zfapp/public/js/examples/example5/app.js b/zfapp/public/js/examples/example5/app.js index df73b7e..b77a93f 100644 --- a/zfapp/public/js/examples/example5/app.js +++ b/zfapp/public/js/examples/example5/app.js @@ -1,12 +1,20 @@ +/** + * 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"'); @@ -14,10 +22,12 @@ Ext.application({ 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, diff --git a/zfapp/public/js/examples/example5/app/controller/Index.js b/zfapp/public/js/examples/example5/app/controller/Index.js index 8d7a1dc..cc4d6d9 100644 --- a/zfapp/public/js/examples/example5/app/controller/Index.js +++ b/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!'); diff --git a/zfapp/public/js/examples/example5/app/model/Users.js b/zfapp/public/js/examples/example5/app/model/Users.js index c72acdf..81bb6be 100644 --- a/zfapp/public/js/examples/example5/app/model/Users.js +++ b/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'] }); \ No newline at end of file diff --git a/zfapp/public/js/examples/example5/app/store/Usergrid.js b/zfapp/public/js/examples/example5/app/store/Usergrid.js index 90de5e5..e656179 100644 --- a/zfapp/public/js/examples/example5/app/store/Usergrid.js +++ b/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 diff --git a/zfapp/public/js/examples/example5/app/view/index/Grid.js b/zfapp/public/js/examples/example5/app/view/index/Grid.js index ec4e7b6..ba44082 100644 --- a/zfapp/public/js/examples/example5/app/view/index/Grid.js +++ b/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} ]; diff --git a/zfapp/public/js/examples/example5/app/view/index/Helperbar.js b/zfapp/public/js/examples/example5/app/view/index/Helperbar.js index 96958c9..abf85e1 100644 --- a/zfapp/public/js/examples/example5/app/view/index/Helperbar.js +++ b/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', diff --git a/zfapp/public/js/examples/example5/app/view/user/Add.js b/zfapp/public/js/examples/example5/app/view/user/Add.js index a9c2044..5af980e 100644 --- a/zfapp/public/js/examples/example5/app/view/user/Add.js +++ b/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', diff --git a/zfapp/public/js/examples/example5/app/view/user/Delete.js b/zfapp/public/js/examples/example5/app/view/user/Delete.js index dfeffff..90e3778 100644 --- a/zfapp/public/js/examples/example5/app/view/user/Delete.js +++ b/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 ?' } ], + /** Initialize the component */ initComponent: function() { this.buttons = [ diff --git a/zfapp/public/js/examples/example5/app/view/user/Edit.js b/zfapp/public/js/examples/example5/app/view/user/Edit.js index 85389d2..5e59f24 100644 --- a/zfapp/public/js/examples/example5/app/view/user/Edit.js +++ b/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',