extjs-mvc 0.4.0.j → 0.4.0.k

data/test/app/vendor/extjs-mvc/MVC.js

@@ -0,0 +1,260 @@
+/**
+ * @class ExtMVC
+ * ExtMVC 
+ * @singleton
+ */
+ExtMVC = Ext.extend(Ext.util.Observable, {
+  version: "0.7a",
+  
+  constructor: function() {
+    ExtMVC.superclass.constructor.apply(this, arguments);
+    
+    /**
+     * @property dispatcher
+     * @type Ext.lib.Dispatcher
+     * The dispatcher object which finds the right controller and action when ExtMVC.dispatch is called
+     */
+    // this.dispatcher = new Ext.lib.Dispatcher({
+    //   
+    // });
+  },
+  
+  dispatch: function() {
+    var dispatcher = this.dispatcher;
+    
+    return dispatcher.dispatch.apply(dispatcher, arguments);
+  },
+  
+  /**
+   * Sets the Ext.Application instance currently in use. This is currently required :/
+   * @param {Ext.Application} app The application currently in use
+   */
+  setApplication: function(app) {
+    this.app = app;
+    this.name = app.name;
+    
+    ExtMVC.model.modelNamespace = window[app.name].models;
+  },
+  
+  fields: {
+    
+  },
+  
+  registerFields: function(name, fields) {
+    this.fields[name] = fields;
+  },
+  
+  getFields: function(name) {
+    return this.fields[name];
+  },
+  
+  
+  
+  /**
+   * Registers a model class with Ext MVC
+   * @param {String} name The name to give this model
+   * @param {Object} config Model definition configuration
+   */
+  registerModel: function(name, config) {
+    this.registerClass('model', arguments);
+  },
+  
+  /**
+   * Registers a controller class with Ext MVC
+   * @param {String} name The name to give this controller
+   * @param {Object} config Controller definition configuration
+   */
+  registerController: function(name, config) {
+    this.registerClass('controller', arguments);
+  },
+  
+  /**
+   * Registers a view class with Ext MVC.
+   * @param {String} namesapce The namespace to add this view to
+   * @param {String} name The name to give this view
+   * @param {Object} config View definition configuration
+   */
+  registerView: function(namespace, name, config) {
+    this.registerClass('view', arguments);
+  },
+  
+  /**
+   * Abstraction for registering views, models and controllers
+   * @param {String} managerName The name of the class manager to register with
+   * @param {Array} args The args to pass to the manager's register method
+   */
+  registerClass: function(managerName, args) {
+    var manager = this.getClassManager(managerName);
+    
+    manager.register.apply(manager, args);
+  },
+  
+  /**
+   * @property classManagers
+   * @type Object
+   * {name: classManager} mappings used by this.getClassManager and this.registerClassManager
+   */
+  classManagers: {},
+  
+  /**
+   * @private
+   * Sets up model, view and controller class managers
+   */
+  initializeClassManagers: function() {
+    this.registerClassManager('model',      new ExtMVC.lib.ModelClassManager());
+    this.registerClassManager('view',       new ExtMVC.lib.ViewClassManager());
+    this.registerClassManager('controller', new ExtMVC.lib.ControllerClassManager());
+  },
+  
+  /**
+   * Returns the class manager for the given name
+   * @param {String} name The name of the manager (model, view or controller)
+   * @return {ExtMVC.lib.ClassManager} The class manager instance
+   */
+  getClassManager: function(name) {
+    return this.classManagers[name];
+  },
+  
+  /**
+   * Registers a class manager instance under a given name
+   * @param {String} name The name of the class manager
+   * @param {ExtMVC.lib.ClassManager} manager The ClassManager instance to register
+   */
+  registerClassManager: function(name, manager) {
+    this.classManagers[name] = manager;
+  },
+  
+  /**
+   * Returns the canonical controller instance for the given controller name
+   * @return {ExtMVC.Controller} The controller instance
+   */
+  getController: function(name) {
+    return this.getClassManager('controller').getInstance(name);
+  },
+  
+  /**
+   * Returns the constructor for a given model name
+   * @param {String} name The name of the model
+   * @return {Function} The model constructor
+   */
+  getModel: function(name) {
+    return this.getClassManager('model').getConstructor(name);
+  },
+  
+  /**
+   * Instantiates a model of the given name with the data supplied
+   * @param {String} modelName The name of the model to instantiate
+   * @param {Object} data Data object to instantiate the instance with
+   * @return {ExtMVC.Model} The new model instance
+   */
+  buildModel: function(modelName, data) {
+    return new (this.getModel(modelName))(data);
+  },
+  
+  /**
+   * Returns the constructor for a given view namespace/name combination
+   * @param {String} namespace The view namespace to look in
+   * @param {String} name The name of the view within the view namespace
+   * @return {Function} The view constructor
+   */
+  getView: function getView(namespace, name) {
+    return this.getClassManager('view').getConstructor(namespace, name);
+  },
+  
+  /**
+   * Returns a new view instance for the given namespace/name combo, using the supplied config
+   * @param {String} namespace The namespace to find the view from
+   * @param {String} name The view name
+   * @param {Object} config Optional config object
+   * @return {Ext.Component} The new view instance
+   */
+  buildView: function buildView(namespace, name, config) {
+    var constructor = this.getView(namespace, name);
+    
+    return new (constructor)(config);
+  },
+  
+  /**
+   * Loads packaged classes from a given url, calling a callback when they have been registered. Sample return:
+  <pre>
+  {
+    controllers: [
+      {
+        name: 'comments',
+        superclass: 'crud',
+        config: {
+          index: function() {
+            this.render('index', {
+              title: "Loaded on demand!"
+            });
+          }
+        }
+      }
+    ],
+    views: [
+      {
+        name: 'new',
+        namespace: 'comments',
+        config: {
+          xtype: 'scaffoldnew',
+          title: "New Comment"
+        }
+      }
+    ],
+    models: [
+      {
+        name  : 'Comment',
+        config: {
+          fields: [
+            {name: 'id',      type: 'int'},
+            {name: 'title',   type: 'string'},
+            {name: 'message', type: 'string'}
+          ]
+        }
+      }
+    ]
+  }
+  </pre>
+   * @param {String} url The url to retrieve the package from
+   * @param {Function} callback Optional callback function, called after the package has been read and registered
+   * @param {Object} scope The scope to execute the callback function in
+   */
+  loadOnDemand: function(url, callback, scope) {
+    Ext.Ajax.request({
+      url     : url,
+      scope   : scope    || this,
+      success: function(response) {
+        var pkg = Ext.decode(response.responseText);
+
+        Ext.each(pkg.controllers || [], function(config) {
+          this.registerController(config.name, config);
+        }, this);
+
+        Ext.each(pkg.models || [], function(config) {
+          this.registerModel(config.name, config);
+        }, this);
+
+        Ext.each(pkg.views || [], function(config) {
+          this.registerView(config.namespace, config.name, config);
+        }, this);
+
+        if (Ext.isFunction(callback)) callback.call(scope, pkg);
+      }
+    });
+  }
+});
+
+ExtMVC = new ExtMVC();
+
+// ExtMVC.initializeClassManagers();
+
+Ext.onReady(function() {
+  /**
+   * @property dispatcher
+   * @type Ext.lib.Dispatcher
+   * The dispatcher object which finds the right controller and action when ExtMVC.dispatch is called
+   */
+  ExtMVC.dispatcher = new ExtMVC.lib.Dispatcher();
+});
+
+Ext.ns('ExtMVC.router', 'ExtMVC.plugin', 'ExtMVC.controller', 'ExtMVC.view', 'ExtMVC.view.scaffold', 'ExtMVC.lib', 'ExtMVC.test');

data/test/app/vendor/extjs-mvc/Presenter.js

@@ -0,0 +1,52 @@
+/**
+ * @class ExtMVC.Presenter
+ * @extends Ext.util.Observable
+ * Used as an interface between a controller and its views
+ */
+ExtMVC.Presenter = Ext.extend(Ext.util.Observable, {
+
+  constructor: function(config) {
+    ExtMVC.Presenter.superclass.constructor.apply(this, arguments);
+    
+    this.addEvents(
+      /**
+       * @event load
+       * Fires when all items in the Presenter have been loaded
+       */
+      'load'
+    );
+    
+    /**
+     * @property loaded
+     * @type Boolean
+     * True if all items that must be loaded before rendering have been
+     */
+    this.loaded = false;
+    
+    /**
+     * @property loading
+     * @type Boolean
+     * True while the loader is loading
+     */
+    this.loading = false;
+  },
+  
+  load: function() {
+    if (this.loaded || this.loading) return;
+    
+    this.each(function(item, index, length) {
+      var callback = function(index) {
+        return function() {
+          if (index == length) {
+            this.loaded = true;
+            this.loading = false;
+            
+            this.fireEvent('load');
+          }
+        };
+      }(index);
+      
+      item.on('load', callback, this, {single: true});
+    }, this);
+  }
+});

data/test/app/vendor/extjs-mvc/README.rdoc

@@ -0,0 +1,69 @@
+= Ext MVC
+
+EXT MVC is a complete MVC stack on top of Ext JS (http://extjs.com).
+
+== Base App
+
+You are advised to use the base app to get up and running with Ext MVC as it sets everything up for you.
+
+If you're comfortable with git:
+
+1. git clone git://github.com/extmvc/baseapp.git myapp
+2. cd myapp
+3. rm -rf .git/
+4. git init
+
+If not:
+
+1. Download the latest zip file from Github at http://github.com/extmvc/baseapp/zipball/master and unzip.
+
+== Getting started
+
+Read the readme file inside the base app and refer to http://extmvc.com
+
+== Building
+
+Ext MVC comes with a set of build tools for itself and your applications, written in Ruby.  You need to be using
+the Baseapp or a structure similar to it for these to work effectively.
+
+=== Building your Ext MVC application
+
+Build any app started from the base app by running this from the app's root directory:
+
+ruby script/build all
+
+This will examine the contents of index.html, pull out all of the javascript includes and concatenate them into
+public/application-all.js.  If you have the yui-compressor in your vendor directory (this is included by default)
+and you have java installed, the build process will also minify your application-all.js into application-all-min.js.
+
+Building your app also concatenates any CSS includes in index.html into public/application-all.css.
+
+*NOTE*: Building looks at your index.html, NOT public/index.html.  index.html is your development version, 
+public/index.html should simply include those concatenated/minified files.
+
+=== Autobuild
+
+If you need your app to be built every time you change any of the source files for whatever reason, use:
+
+ruby script/build auto
+
+This will again look at index.html and will force a rebuild any time any of those files are changed.
+
+=== Other app build options
+
+There are several other build commands, most of which are used by the two above:
+
+- ruby script/build css            - only build CSS files, no JS concatenation or minification
+- ruby script/build js             - only builds JS files, not CSS
+- ruby script/build concatenate_js - concatenates but does not attempt to minify your JS
+- ruby script/build minify_js      - minifies an already concatenated public/application-all.js file
+
+=== Building Ext MVC
+
+If you are changing Ext MVC files and need to build Ext MVC itself, use:
+
+- ruby script/build mvc
+- ruby script/build mvc_auto
+
+Again run from the app root directory.  Like with ruby script/build auto, mvc_auto automatically rebuilds whenever
+any Ext MVC file is changed.

data/test/app/vendor/extjs-mvc/controller/Controller.js

@@ -0,0 +1,278 @@
+/**
+ * @class ExtMVC.controller.Controller
+ * @extends Ext.util.Observable
+ * <h1>Controllers in Ext MVC</h1>
+ * <p>Controllers are the glue that stick applications together. They listen to events emitted by the UI as the user
+ * clicks interface elements, and take actions as appropriate. The relevant action may be to create or save a model
+ * instance, to render another view, to perform AJAX requests, or any other action.</p>
+ * 
+ * <p>Controllers should be kept skinny as far as possible - receive an event, then hand any processing off to the 
+ * appropriate model. This ensures we can keep the code as DRY as possible and makes refactoring easier.</p>
+ * 
+ * <h2>Example Controller</h2>
+ * Here is a simple example controller which renders a couple of views and listens to events:
+<pre><code>
+//simple controller which manages the Page model within our application
+MyApp.controllers.PagesController = Ext.extend(ExtMVC.controller.Controller, {
+  name: 'pages',
+
+  //renders the 'Index' template and sets up listeners
+  index: function() {
+    this.render('Index', {
+      listeners: {
+        scope   : this,
+        'edit'  : this.edit,
+        'delete': this.destroy
+      }
+    });
+  },
+
+  //renders the 'Edit' template (let's say it's a FormPanel), and loads the instance
+  edit: function(instance) {
+    this.render('Edit', {
+      listeners: {
+        scope  : this,
+        save   : this.update,
+        cancel : function() {
+          alert("You cancelled the update!");
+        }
+      }
+    }).loadRecord(instance);
+  },
+
+  //when the 'delete' event is fired by our 'Index' template (see the index action), this method is called.
+  //In this fictional example, we assume that the templates 'delete' event was called with the single argument
+  //of the Page instance the user wishes to destroy
+  destroy: function(instance) {
+    instance.destroy({
+      success: function() {
+        alert("The Page was deleted");
+        //at this point we might render another page for the user to look at
+      },
+      failure: function() {
+        alert('Curses! The Page could not be deleted');
+      }
+    });
+  },
+
+  //when the 'save' event is fired by our 'Edit' template, this method is called.
+  //Again, we assume that our template fired the event with the Page instance, and also an object with updates
+  update: function(instance, updates) {
+    //this applies the updates to the model instance and saves
+    instance.update(updates, {
+      success: function(updatedInstance) {
+        alert('Success! It saved');
+        //at this point we might render another page for the user to look at
+      },
+      failure: function(updatedInstance) {
+        alert('Darn it. Did not save');
+
+        //here we're firing the controller's update-failed event, which the view can pick up on
+        //The view can simply listen to our Pages controller and add errors from this instance to the form
+        //using form.markInvalid(instance.errors.forForm())
+        this.fireEvent('update-failed', instance);
+      };
+    });
+  },
+
+   //Sets up events emitted by this controller. Controllers are expected to fire events, so this method is called
+   //automatically when a controller is instantiated. Don't forget to call super here
+  initEvents: function() {
+    this.addEvents(
+      //this event will be fired when the controller can't update a Page instance
+      'update-failed'
+    );
+
+    MyApp.controllers.PagesController.superclass.initEvents.apply(this, arguments);
+  }
+})
+</code></pre>
+ * Note that many of the methods above are provided by the {@link ExtMVC.controller.CrudController CrudController}
+ * 
+ * <h2>Rendering Views</h2>
+ * Each controller can automatically render view classes inside its views package. In the Pages controller above the
+ * views package is MyApp.views.pages - the application itself is called MyApp, and the 'pages' segment comes from the
+ * controller's 'name' property
+ * <br />
+ * <br />
+ * In the example above, the line: <pre><code>this.render('Edit', {})</code></pre> will automatically find the
+ * MyApp.views.pages.Edit class, with the second argument to this.render being a config argument passed to the view's constructor.
+ * 
+ * <br />
+ * <h4>Rendering strategies</h4>
+ * Not all applications will render views in the same way
+ */
+// ExtMVC.controller.Controller = Ext.extend(Ext.util.Observable,
+ExtMVC.registerController('controller', {
+
+  constructor: function(config) {
+    Ext.util.Observable.prototype.constructor.apply(this, arguments);
+    
+    Ext.apply(this, {
+      /**
+       * @property renderStrategies
+       * @type Object
+       * An object of the form {xtype: function} which keys a container's xtype to the function to use
+       * when rendering a view to that container (see registerRenderStrategy)
+       */
+      renderStrategies: {}
+    }, config || {});
+    
+    this.registerDefaultRenderStrategies();
+    
+    this.initEvents();
+    this.initListeners();
+  },
+  
+  /**
+   * Registers a rendering function for a given container xtype. When a view is rendered via this.render,
+   * the xtype of the container it is being rendered to is compared to the registered strategy xtypes, and
+   * the most specific match will be used to perform the rendering.
+   * @param {String} xtype The container xtype to register
+   * @param {Function} strategy The function to call when rendering to a container of the given xtype
+   */
+  registerRenderStrategy: function(xtype, strategy) {
+    this.renderStrategies[xtype] = strategy;
+  },
+  
+  /**
+   * Returns the strategy function to use when rendering to the given container instance.
+   * @param {Ext.Container} container The container to add to
+   * @return {Function} The rendering strategy to use
+   */
+  getRenderStrategy: function(container) {
+    var xtypes = container.getXTypes().split("/");
+    
+    for (var i = xtypes.length - 1; i >= 0; i--){
+      var strategy = this.renderStrategies[xtypes[i]];
+      
+      if (strategy != undefined) return strategy;
+    };
+    
+    throw new Ext.Error("No render strategy could be found for the container you specified");
+  },
+  
+  /**
+   * @private
+   * Adds the default strategies for panel and tabpanel
+   */
+  registerDefaultRenderStrategies: function() {
+    this.registerRenderStrategy('panel', this.panelRenderStrategy);
+    this.registerRenderStrategy('tabpanel', this.tabPanelRenderStrategy);
+  },
+  
+  /**
+   * Sets up events emitted by this controller. This defaults to an empty function and is
+   * called automatically when the controller is constructed so can simply be overridden
+   */
+  initEvents: function() {},
+  
+  /**
+   * Sets up events this controller listens to, and the actions the controller should take
+   * when each event is received.  This defaults to an empty function and is called when
+   * the controller is constructed so can simply be overridden
+   */
+  initListeners: function() {},
+  
+  /**
+   * Shows the user a notification message. Usually used to inform user of a successful save, deletion, etc
+   * This is an empty function which you must implement yourself
+   * @param {String} notice The string notice to display
+   */
+  showNotice: function(notice) {},
+  
+  /**
+   * @property addTo
+   * @type Ext.Container
+   * The container to add views to using the 'add' renderMethod.  Usually set to an Ext.TabPanel instance or similar
+   */
+  addTo: null,
+  
+  /**
+   * Renders a given view name in the way set up by the controller.  For this to work you must have passed a 
+   * 'name' property when creating the controller, which is automatically used to find the view namespace for
+   * this controller.  For example, in an application called MyApp, and a controller with a name of 'users',
+   * the view namespace would be MyApp.views.users, and render('Index') would search for a class called
+   * MyApp.views.users.Index and instantiate it with the passed config.
+   * An error is thrown if the view could not be found.
+   * @param {String} viewName The name of the view class within the view namespace used by this controller
+   * @param {Object} config Configuration options passed through to the view class' constructor
+   * @return {Ext.Component} The view object that was just created
+   */
+  render: function render() {
+    //handle both method signatures
+    switch(arguments.length) {
+      case 1:
+        //this just falls through into case 2, which provides a config {} if one is not supplied
+      case 2:
+        var namespace = this.name,
+            viewName  = arguments[0],
+            config    = arguments[1] || {};
+        break;
+      case 3:
+        var namespace = arguments[0],
+            viewName  = arguments[1],
+            config    = arguments[2] || {};
+        break;
+    }
+    
+    //we also use this constructor object to define whether or not the view should be added to the default
+    //container or not
+    Ext.applyIf(config, { 
+      autoAdd: true,
+      addTo  : ExtMVC.app.main
+    });
+    
+    //NOTE: ExtMVC.getView will throw an error if the view hasn't been defined anywhere yet. At the moment this
+    //error will just propagate up as it's probably pretty clear, but we could provide a custom Error message here instead
+    var view = new (this.getView(namespace, viewName))(config);
+    
+    if (config.autoAdd === true) {
+      if (view.isXType('window')) {
+        view.show();
+      } else {
+        this.getRenderStrategy(config.addTo)(config.addTo, view);
+      }
+    }
+
+    return view;
+  },
+  
+  /**
+   * Just calls ExtMVC.getView and returns. This is here because we override it in Crud Controller
+   * @param {String} namespace The view namespace
+   * @param {String} name The view name
+   * @return {Function} The view constructor function
+   */
+  getView: function(namespace, name) {
+    return ExtMVC.getView(namespace, name);
+  },
+  
+  /**
+   * @private
+   * The tabpanel render strategy
+   */
+  tabPanelRenderStrategy: function(container, view) {
+    var existing = container.getItem(view.id);
+    
+    //don't add a tab with the same id as an existing one
+    if (existing == undefined) {
+      container.add(view);
+      container.doLayout();
+      container.activate(view);      
+    } else {
+      container.setActiveTab(view.id);
+      view.destroy();
+    }
+  },
+  
+  /**
+   * @private
+   * The panel render strategy
+   */
+  panelRenderStrategy: function(container, view) {
+    container.removeAll();
+    container.add(view);
+    container.doLayout();
+  }
+});