extjs-mvc 0.4.0.j → 0.4.0.k

data/test/app/vendor/extjs-mvc/testrunner/TestViewport.js

@@ -0,0 +1,94 @@
+/**
+ * @class ExtMVC.test.TestViewport
+ * @extends Ext.Viewport
+ * Specialised Viewport which manages the running and reporting of tests
+ */
+ExtMVC.test.TestViewport = Ext.extend(Ext.Viewport, {
+
+  constructor: function(config) {
+    config = config || {};
+    
+    /**
+     * @property header
+     * @type Ext.Panel
+     * Ext MVC test suite banner Panel
+     */
+    this.header = new Ext.Panel({
+      html  : 'Ext MVC Application Test suite',
+      region: 'north'
+    });
+    
+    /**
+     * @property statusText
+     * @type Ext.Toolbar.TextItem
+     * Displays the current status of the test suite in the bottom toolbar
+     */
+    this.statusText = new Ext.Toolbar.TextItem({
+      text: "Ready"
+    });
+    
+    /**
+     * @property rerunButton
+     * @type Ext.Button
+     * Button attached to the toolbar which re-runs the whole suite
+     */
+    this.rerunButton = new Ext.Button({
+      text    : 'Rerun all tests',
+      iconCls : 'all',
+      scope   : this,
+      handler : function() {
+        this.client.runner.runTests();
+      }
+    });
+    
+    /**
+     * @property main
+     * @type Ext.Panel
+     * The main Ext.grid.GridPanel that shows results from browsers as they come in
+     */
+    this.main = new ExtMVC.test.TestGrid({
+      region: 'center',
+      tbar  : [this.rerunButton],
+      bbar  : [this.statusText]
+    });
+          
+    Ext.applyIf(config, {
+      layout: 'border',
+      items: [
+        this.header,
+        this.main
+      ]
+    });
+    
+    ExtMVC.test.TestViewport.superclass.constructor.call(this, config);
+    
+    this.initListeners();
+  },
+  
+  /**
+   * Initialises listeners on the Test Client
+   */
+  initListeners: function() {
+    if (this.client != undefined) {
+      //used in calculating run time
+      var startTime;
+      
+      this.client.runner.on({
+        scope: this,
+        starting: function() {
+          startTime = new Date();
+          this.statusText.setText("Running specs");
+        },
+        finished: function(stats) {
+          Ext.apply(stats, {
+            time        : new Date() - startTime,
+            failingSpecs: new ExtMVC.test.JSpecFormatter(JSpec, JSpec.options).getFailingSpecs()
+          });
+          
+          this.main.store.loadData([stats], true);
+          this.statusText.setText("Ready");
+        }
+      });
+    }
+  }
+});

data/test/app/vendor/extjs-mvc/vendor.yml

@@ -0,0 +1,30 @@
+# Defines the build order of Ext MVC. Comments indicated with a hash.
+# Each line denotes either a single file, or a directory glob. If a glob, all matching files are included
+# (unless they have already been defined)
+name: extjs-mvc
+
+version:
+
+dependencies:
+- ext-3.1.1
+
+javascripts:
+- MVC.js
+- App.js
+- lib/ClassManager.js
+- lib/*.js
+- overrides/*.js
+- controller/*.js
+- model/Model.js
+- model/Base.js
+- model/adapters/AbstractAdapter.js
+- model/adapters/*.js
+- model/validations/Validations.js
+- model/validations/*.js
+- view/*.js
+- view/scaffold/ScaffoldFormPanel.js
+- view/scaffold/*.js
+- testrunner/TestRunner.js
+- testrunner/*.js
+stylesheets:
+- extjs-mvc-all.css

data/test/app/vendor/extjs-mvc/vendor/ext-3.1.1/vendor.yml

@@ -0,0 +1,16 @@
+# Defines the build order of Ext MVC. Comments indicated with a hash.
+# Each line denotes either a single file, or a directory glob. If a glob, all matching files are included
+# (unless they have already been defined)
+name: ext
+
+version: 3.1.1
+
+dependencies:
+
+host: http://extjs.cachefly.net
+  
+javascripts:
+- adapter/ext/ext-base.js
+- ext-all.js
+
+stylesheets:

data/test/app/vendor/extjs-mvc/view/FormWindow.js

@@ -0,0 +1,184 @@
+/**
+ * @class ExtMVC.view.FormWindow
+ * @extends Ext.Window
+ * Convenience class for creating a window with a default form.  Example:
+ * 
+<pre>
+MyApp.views.MyFormWindow = Ext.extend(ExtMVC.view.FormWindow, {
+
+ height: 200,
+
+ width : 400,
+
+ 
+  buildForm: function() {
+    //return your Ext.form.FormPanel here
+  }
+});
+</pre>
+ * 
+ */
+ExtMVC.registerView('extmvc', 'formwindow', {
+  xtype        : 'window',
+  registerXType: 'formwindow',
+
+  modal  : true,
+  height : 230,
+  width  : 400,
+  
+  initComponent: function() {
+    /**
+     * @property form
+     * @type Ext.form.FormPanel
+     * The new POLN form
+     */
+    this.form = this.buildForm();
+    
+    Ext.apply(this, {
+      items : [
+        this.form
+      ],
+      layout: 'fit',
+      closeAction: 'hide',
+      
+      /**
+       * @property maskOnSave
+       * @type Boolean
+       * True to add a mask to the field while saving (defaults to true)
+       */
+      maskOnSave: true,
+      
+      /**
+       * @property saveMaskMessage
+       * @type String
+       * The message to show in the saving mask (defaults to "Saving...")
+       */
+      saveMaskMessage: "Saving...",
+      
+     /**
+       * @property hasSaveButton
+       * @type Boolean
+       * True to include a save button (defaults to true)
+       */
+      hasSaveButton: true,
+
+      /**
+       * @property hasCancelButton
+       * @type Boolean
+       * True to include a cancel button (defaults to true)
+       */
+      hasCancelButton: true
+    });
+    
+    //applyIf applies when buttons: [] is passed, which meant there was no way to
+    //specify any empty set of buttons before
+    if (!Ext.isArray(this.buttons)) {
+      Ext.apply(this, {
+        buttons: this.buildButtons()
+      });
+    };
+    
+    Ext.Window.prototype.initComponent.apply(this, arguments);
+  },
+  
+  /**
+   * Builds the buttons added to this form.  By default this returns an array containing
+   * a Save button and a Cancel button, which fire the 'save' and 'cancel' events respectively
+   * @return {Array} An array of Ext.Button objects or configs
+   */
+  buildButtons: function() {
+    var buttons = [];
+    
+    if (this.hasSaveButton   === true) buttons.push(this.buildSaveButton());
+    if (this.hasCancelButton === true) buttons.push(this.buildCancelButton());
+    
+    return buttons;
+  },
+  
+  /**
+   * Builds the Save button config. Override this to provide your own
+   * @return {Object/Ext.Button} The button config or object
+   */
+  buildSaveButton: function() {
+    return {
+      text   : 'Save',
+      iconCls: 'save',
+      scope  : this,
+      handler: this.onSave
+    };
+  },
+  
+  /**
+   * Builds the Cancel button config. Override this to provide your own
+   * @return {Object/Ext.Button} The button config or object
+   */
+  buildCancelButton: function() {
+    return {
+      text:     'Cancel',
+      scope:    this,
+      iconCls:  'cancel',
+      handler:  this.onCancel
+    };
+  },
+  
+  /**
+   * Creates and returns a FormPanel instance to go inside the window. Override this yourself
+   * @return {Ext.form.FormPanel} The form panel
+   */
+  buildForm: function() {
+    return new Ext.form.FormPanel({});
+  },
+  
+  /**
+   * Loads an instance into the form
+   * @param {GetIt.models.PurchaseOrderLineNote} instance The POLN instance to load
+   */
+  loadRecord: function(instance) {
+    /**
+     * @property instance
+     * @type ExtMVC.model.Base
+     * The instance currently loaded into the form
+     */
+    this.instance = instance;
+    
+    this.form.form.loadRecord(instance);
+  },
+  
+  /**
+   * Called when the user clicks the save button
+   */
+  onSave: function() {
+    if (this.maskOnSave === true) this.el.mask(this.saveMaskMessage);
+    
+    if (this.instance == undefined || this.instance.newRecord()) {
+      this.fireEvent('save', this.getFormValues(), this);
+    } else {
+      this.fireEvent('save', this.instance, this.getFormValues(), this);
+    }
+  },
+  
+  /**
+   * Called when the usre clicks the cancel button. By default this just hides the window
+   */
+  onCancel: function() {
+    this.close();
+  },
+  
+  /**
+   * Gets form values in a nicer way than getForm.getValues() does - calls getValue on each field.
+   * See http://www.diloc.de/blog/2008/03/05/how-to-submit-ext-forms-the-right-way/
+   * @return {Object} key: value pairings of form values
+   */
+  getFormValues: function() {
+    var form   = this.form.getForm(),
+        values = {};
+    
+    form.items.each(function(item) {
+      var func = (typeof item.getSubmitValue == "function") ? 'getSubmitValue' : 'getValue';
+      
+      values[item.getName()] = item[func]();
+    }, this);
+    
+    return values;
+  }
+});

data/test/app/vendor/extjs-mvc/view/HasManyEditorGridPanel.js

@@ -0,0 +1,211 @@
+/**
+ * @class ExtMVC.view.HasManyEditorGridPanel
+ * @extends Ext.grid.EditorGridPanel
+ * Provides some sensible defaults for a HasMany editor grid.  For example, given the following models:
+ * ExtMVC.model.define("MyApp.models.User", {
+ *   ...
+ *   hasMany: "Post"
+ * });
+ *
+ * ExtMVC.model.define("MyApp.models.Post", {
+ *   ...
+ *   belongsTo: "User"
+ * });
+ *
+ * Inside the edit User view, if we wanted to be able to quickly edit any of that User's Posts, we can insert
+ * a HasManyEditorGridPanel like this:
+ *
+ * items: [
+ *   {
+ *     xtype:       'hasmany_editorgrid',
+ *     modelObj:    userObj,
+ *     association: userObj.posts,
+ *     columns:     [... set up editor columns as per a normal EditorGridPanel]
+ *   }
+ * ]
+ *
+ * In the example above, userObj refers to the loaded User instance tied to the edit form.  The HasMany editor grid
+ * automatically listens to afteredit events and saves the HasMany model (Post in this case).
+ */
+ExtMVC.view.HasManyEditorGridPanel = Ext.extend(Ext.grid.EditorGridPanel, {
+  
+  initComponent: function() {
+    Ext.applyIf(this, {
+      autoScroll: true,
+      store:      this.association.findAll(),
+      viewConfig: { forceFit: true }
+    });
+    
+    if (this.hasTopToolbar) { this.addTopToolbar(); }
+    
+    ExtMVC.view.HasManyEditorGridPanel.superclass.initComponent.apply(this, arguments);
+    
+    /**
+     * Set up listening on the afteredit event.  Simply saves the model instance
+     */
+    this.on('afteredit', function(args) {
+      args.record.save({
+        success: function() {
+          args.record.commit();
+        }
+      });
+    }, this);
+    
+    /**
+     * Set up listening to selection change to activate the Remove button
+     */
+    this.getSelectionModel().on('selectionchange', function(selModel, selection) {
+      if (this.deleteButton) {
+        this.deleteButton.enable();
+      };
+    }, this);
+  },
+  
+  /**
+   * @property hasTopToolbar
+   * @type Boolean
+   * True to automatically show a toolbar at the top of the grid with Add and Delete buttons (defaults to true)
+   */
+  hasTopToolbar: true,
+  
+  /**
+   * @property hasNewButton
+   * @type Boolean
+   * True to add a 'New' button to the top toolbar if the top toolbar is present (defaults to true)
+   */
+  hasNewButton: true,
+  
+  /**
+   * @property hasDeleteButton
+   * @type Boolean
+   * True to add a 'Delete' button to the top toolbar if the top toolbar is present (defaults to true)
+   */
+  hasDeleteButton: true,
+  
+  /**
+   * Private.
+   * Creates a top toolbar and applies it to 'this'.  Should only be called from inside initComponent
+   */
+  addTopToolbar: function(paramName) {
+    var items = [];
+    
+    if (this.hasNewButton) {
+      this.newButton = new Ext.Toolbar.Button({
+        iconCls: 'add',
+        text:    'Add',
+        scope:   this,
+        handler: this.onAdd
+      });
+      
+      items.push(this.newButton);
+      items.push('-');
+    };
+    
+    if (this.hasDeleteButton) {
+      this.deleteButton = new Ext.Toolbar.Button({
+        text:     'Remove selected',
+        disabled: true,
+        iconCls:  'delete',
+        scope:    this,
+        handler:  this.onDelete
+      });
+      
+      items.push(this.deleteButton);
+    };
+    
+    Ext.applyIf(this, {
+      tbar: items
+    });
+  },
+  
+  /**
+   * @property windowConfig
+   * @type Object
+   * Config object passed when creating the New Association window.  Override this to customise
+   * the window that appears
+   */
+  windowConfig: {},
+  
+  /**
+   * Called when the Add button is clicked on the top toolbar
+   */
+  onAdd: function(btn) {
+    if (!this.addWindow) {
+      this.addWindow = new Ext.Window(
+        Ext.applyIf(this.windowConfig, {
+          title:  'New',
+          layout: 'fit',
+          modal:  true,
+          height: 300,
+          width:  400,
+          items:  [this.form],
+          closeAction: 'hide',
+          buttons: [
+            {
+              text:    'Save',
+              iconCls: 'save',
+              scope:   this,
+              handler: this.onSaveNew
+            },
+            {
+              text:    'Cancel',
+              iconCls: 'cancel',
+              scope:   this,
+              handler: this.onCancelNew
+            }
+          ]
+        })
+      );
+    }
+    
+    this.addWindow.show();
+  },
+  
+  /**
+   * Called when a row is selected and the delete button is clicked
+   */
+  onDelete: function(btn) {
+    var record = this.getSelectionModel().selection.record;
+    
+    if (record) {
+      record.destroy({
+        scope:   this,
+        success: function() {
+          this.store.reload();
+        },
+        failure: function() {
+          Ext.Msg.alert('Delete failed', "Something went wrong while trying to delete - please try again");
+          this.store.reload();
+        }
+      });
+    };
+    
+    this.deleteButton.disable();
+  },
+  
+  /**
+   * Called when the user clicks the save button to create a new record
+   */
+  onSaveNew: function() {
+    this.association.create(this.form.getForm().getValues(), {
+      scope:   this,
+      success: function(modelObj, response) {
+        this.store.reload();
+        this.addWindow.hide();
+      },
+      failure: function(modelObj, response) {
+        this.form.getForm().clearInvalid();
+        this.form.getForm().markInvalid(modelObj.errors.forForm());
+      }
+    });
+  },
+  
+  /**
+   * Called when the user cancels adding a new association model
+   */
+  onCancelNew: function(paramName) {
+    this.addWindow.hide();
+  }
+});
+
+Ext.reg('hasmany_editorgrid', ExtMVC.view.HasManyEditorGridPanel);