extjs-mvc 0.3.10 → 0.4.0.a

data/lib/js/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/lib/js/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);

data/lib/js/view/scaffold/Edit.js

@@ -0,0 +1,46 @@
+/**
+ * @class ExtMVC.view.scaffold.Edit
+ * @extends ExtMVC.view.scaffold.ScaffoldFormPanel
+ * Shows a generic edit form for a given model
+ */
+ExtMVC.registerView('scaffold', 'edit', {
+  xtype        : 'scaffold_form',
+  registerXType: 'scaffold_edit',
+  
+  /**
+   * Sets the panel's title, if not already set
+   */
+  initComponent: function() {
+    Ext.applyIf(this, {
+      title: 'Edit ' + this.model.prototype.singularHumanName
+    });
+    
+    ExtMVC.getView('scaffold', 'form').prototype.initComponent.apply(this, arguments);
+  },
+  
+  /**
+   * Loads the given record into the form and maintains a reference to it so that it can be returned
+   * when the 'save' event is fired
+   * @param {ExtMVC.Model.Base} instance The model instance to load into this form
+   */
+  loadRecord: function(instance) {
+    this.instance = instance;
+    this.getForm().loadRecord(instance);
+  },
+  
+  /**
+   * Called when the save button is clicked or CTRL + s pressed.  By default this simply fires
+   * the 'save' event, passing this.getForm().getValues() as the sole argument
+   */
+  onSave: function() {
+    this.fireEvent('save', this.instance, this.getFormValues(), this);
+  }
+  
+  /**
+   * @event save
+   * Fired when the user clicks the save button, or presses ctrl + s
+   * @param {ExtMVC.model.Base} instance The existing instance that is to be updated
+   * @param {Object} values The values entered into the form
+   * @param {ExtMVC.view.scaffold.ScaffoldFormPanel} this The form panel
+   */
+});