extjs-mvc 0.4.0.j → 0.4.0.k

data/Rakefile

@@ -14,7 +14,7 @@ begin
     gem.add_dependency "extjs", ">= 0.1.1"
     gem.add_dependency "git"
     gem.add_dependency "thor", ">= 0.13.4"
-    gem.add_development_dependency "thoughtbot-shoulda", ">= 0"
+    gem.add_development_dependency "shoulda", ">= 0"
     gem.files =  FileList["[A-Z]*", "{bin,lib,test,config}/**/*"]
     
     # gem is a Gem::Specification... see http://www.rubygems.org/read/chapter/20 for additional settings

data/VERSION

@@ -1 +1 @@
-0.4.0.j
+0.4.0.k

data/lib/extjs-mvc.rb

@@ -3,7 +3,6 @@ require 'thor'
 require 'xmvc'
 require 'xmvc/cli'
 require 'extjs'
-require 'extjs-mvc/api'
 
 ##
 # This is the extjs-mvc Thor task which install the extjs-mvc-js javascript source via Github
@@ -12,21 +11,8 @@ module ExtJS
   module MVC
     
     VERSION       = "0.4.0.a"
-     
-    ROOT          = File.dirname(__FILE__)
-
-    VENDOR_NAME   = 'extjs-mvc'
-
-    CONFIG_PATH   = File.join(ROOT, "vendor.yml")
-    
-    GIT_URL       = 'http://github.com/christocracy/extjs-mvc-src.git'
     
     autoload :API, 'extjs-mvc/api'
     
-    class << self
-      def config
-        @config ||= YAML.load(File.read(CONFIG_PATH)).to_mash
-      end
-    end
   end
 end

data/lib/extjs-mvc/api.rb

@@ -1,32 +1,15 @@
 module ExtJS
   module MVC 
     
-    VENDOR_NAME = "extjs-mvc"
+    GIT_URL = 'http://github.com/christocracy/extjs-mvc-src.git'
     
-    class API < Thor
+    class API < Xmvc::Vendor
       include Thor::Actions
       
-      desc "secretary", "Returns vendor assets; css, js, images, sass, haml, html...whatever.  Returns a Sprockets::Secretary"
-      def secretary
-        say_status "ExtJS::MVC", "secretary"
-        Sprockets::Secretary.new({
-          :source_files => config["javascripts"],
-          :root => root
-        })
-      end
+      vendor_name "extjs-mvc"
       
-      desc "config", "Returns config from vendor.yml"
-      def config
-        config = {}
-        root = File.expand_path(File.join(options[:root], ExtJS::MVC::VENDOR_NAME))
-        path = File.join(root, "vendor.yml")
-        if File.exists?(path)
-          config = YAML.load_file(path)
-        else
-          #raise Xmvc::VendorFileNotFound.new("Failed to load vendor file 'vendor/extjs-mvc/vendor.yml'")
-          puts "failed to load ExtJS::MVC config #{path}"
-        end
-        config
+      def self.source_root
+        File.dirname(__FILE__)
       end
       
       ##
@@ -35,17 +18,21 @@ module ExtJS
       #
       desc "install", "Install extjs-mvc framework"
       def install
-        fancy_name = File.join(File.basename(options[:root]), VENDOR_NAME)
+        fancy_name = File.join(File.basename(options[:root]), self.class.vendor_name)
         say_status "git clone", "#{GIT_URL} -> #{fancy_name}"
-      
+        
+        ##
+        # static extjs-mvc-src
+        #
+        #directory("src", ".")
+        
         # Clone the extjs-mvc-js repo!
-        path = File.join(options[:root], VENDOR_NAME)
         ##
         # UNCOMMENT THIS TO INSTALL FROM GIT
         #
-        Git.clone(GIT_URL, path)  
+        Git.clone(GIT_URL, ".")  
         # report to console which files were created.
-        Dir["#{path}/**/*.*"].each do |f|
+        Dir["./**/*.*"].each do |f|
           say_status :create, File.join(fancy_name, File.basename(f))
         end
       end

data/lib/extjs-mvc/src/App.js

@@ -0,0 +1,219 @@
+/**
+ * @class ExtMVC.App
+ * @extends Ext.util.Observable
+ * @cfg {Boolean} usesHistory True to automatically create required DOM elements for Ext.History,
+ * sets up a listener on Ext.History's change event to fire this.onHistoryChange. False by default
+ */
+ExtMVC.App = Ext.extend(Ext.util.Observable, {
+  /**
+   * @constructor
+   * Sets up the Application - adds events, sets up namespaces, optionally sets up history.
+   * Fires the 'before-launch' event before initializing router, viewport and history.
+   * Calls this.launch() once everything else is set up (override the 'launch' method to provide your own logic).
+   * Fires the 'launched' event after calling this.launch()
+   */
+  constructor: function(config) {
+    ExtMVC.App.superclass.constructor.apply(this, arguments);
+    
+    //apply configuration object and set up namespaces
+    Ext.apply(this, config || {});
+    window[this.name] = this;
+    
+    this.initializeNamespaces();
+    
+    // Ext.onReady(this.onReady, this);
+    
+    this.on('launched', function() {
+      /**
+       * TODO: This used to reside in initializeHistory but this.launch() needs to be
+       * called before this dispatches so it is temporarily here... ugly though
+       */
+      if (this.usesHistory) {
+        if (this.dispatchHistoryOnLoad === true) {
+          Ext.History.init(function(history) {
+            var hash   = document.location.hash.replace("#", "");
+            var params = this.router.recognise(hash);
+            
+            if (params) {this.dispatch(params);}
+          }, this);
+        } else {
+          Ext.History.init();
+        }
+      }      
+    }, this);
+  },
+  
+  /**
+   * @private
+   * Called when Ext.onReady fires
+   */
+  onReady: function() {    
+    if (this.fireEvent('before-launch', this)) {
+      this.initializeRouter();
+      // this.initializeViewport();
+      this.initializeEvents();
+
+      if (this.usesHistory === true) this.initializeHistory();     
+
+      this.launch();
+    }
+  },
+    
+  /**
+   * @property name
+   * @type String
+   * The application's name.  This is used when creating namespaces for models, views and controllers,
+   * and automatically set up as a global variable reference to this application. Read only.
+   */
+  name: 'MyApp',
+    
+  /**
+   * @property usesHistory
+   * @type Boolean
+   * True to automatically create required DOM elements for Ext.History,
+   * sets up a listener on Ext.History's change event to fire this.onHistoryChange. 
+   * False by default
+   */
+  usesHistory: false,
+
+  /**
+   * @prop dispatchHistoryOnLoad
+   * @type Boolean
+   * If usesHistory is true and dispatchHistoryOnLoad is also true, the OS will attempt to match
+   * any string currently after the # in the url and dispatch to it
+   */
+  dispatchHistoryOnLoad: true,
+  
+  /**
+   * Called when the application is booted up. Override this to provide your own startup logic (defaults to Ext.emptyFn)
+   */
+  launch: function() {
+    this.fireEvent('launched', this);
+  },
+  
+  /**
+   * @property params
+   * @type Object
+   * An object containing the most current parameters (usually decoded from a url using this.router)
+   * e.g. {controller: 'index', action: 'welcome', id: 10}
+   */
+  params: {},
+  
+  /**
+   * Dispatches a request to a registered controller. 
+   * @param {Object} dispatchConfig A config object which should look something like this:
+   * {controller: 'MyController', action: 'index'}, where 'MyController' is the key for a controller
+   * which has been registered to the controller.  If action is not specified, it defaults to 'index'
+   * @param {Object} scope The scope in which to fire the event (defaults to the controller)
+   * @param {Array} args An array of arguments which are passed to the controller action.
+   */
+  dispatch: function dispatch(dispatchConfig, scope, args) {
+    var dispatchConfig = dispatchConfig || {};
+    Ext.applyIf(dispatchConfig, {
+      action: 'index'
+    });
+    
+    this.params = dispatchConfig;
+    
+    var c = ExtMVC.getController(dispatchConfig.controller);
+    if (c != undefined) {
+      var action = c[dispatchConfig.action];
+      
+      if (typeof action == "function") action.apply(scope || c, args || []);
+      else throw new Error(String.format("Action '{0}' not found on Controller '{1}'", dispatchConfig.action, dispatchConfig.controller));
+    }
+  },
+  
+  /**
+   * Sets up a Router instance.  This is called automatically before onLaunch()
+   * Add routes using this.router.connect
+   */
+  initializeRouter: function() {
+    if (this.router == undefined) {
+      this.router = new ExtMVC.router.Router();
+      ExtMVC.router.Router.defineRoutes(this.router);
+    }
+  },
+  
+  /**
+   * Uses Ext.namespace to create packages view controllers, models and views
+   * E.g. if name = 'Blog' or this.name = 'Blog', this is the same as:
+   * Ext.ns('Blog', 'Blog.controllers', 'Blog.models', 'Blog.views')
+   */
+  initializeNamespaces: function initializeNamespaces(name) {
+    var name = name || this.name;
+    if (name) {
+      Ext.ns(name, name + '.controllers', name + '.models', name + '.views');
+    };
+  },
+  
+  /**
+   * Creates the necessary DOM elements required for Ext.History to manage state
+   * Sets up listeners on Ext.History's change event to fire the dispatch() action in the normal way.
+   * This is not called automatically as not all applications will need it
+   */
+  initializeHistory: function initializeHistory() {
+    this.historyForm = Ext.getBody().createChild({
+      tag:    'form',
+      action: '#',
+      cls:    'x-hidden',
+      id:     'history-form',
+      children: [
+        {
+          tag: 'div',
+          children: [
+            {
+              tag:  'input',
+              id:   'x-history-field',
+              type: 'hidden'
+            },
+            {
+              tag: 'iframe',
+              id:  'x-history-frame'
+            }
+          ]
+        }
+      ]
+    });
+    
+    Ext.History.on('change', this.onHistoryChange, this);
+  },
+  
+  /**
+   * Takes a history token (anything after the # in the url), consults the router and dispatches
+   * to the appropriate controller and action if a match was found
+   * @param {String} token The url token (e.g. the token would be cont/act/id for a url like mydomain.com/#cont/act/id)
+   */
+  onHistoryChange: function onHistoryChange(token) {
+    var match = this.router.recognise(token);
+    
+    if (match) {
+      this.dispatch(match, null, [{url: token}]);
+    };
+  },
+  
+  /**
+   * Sets up events emitted by the Application
+   */
+  initializeEvents: function initializeEvents() {
+    this.addEvents(
+      /**
+       * @event before-launch
+       * Fires before this application launches
+       * @param {ExtMVC.App} this The application about to be launched
+       */
+      'before-launch',
+
+      /**
+       * @event launched
+       * Fires once the application has been launched
+       * @param {ExtMVC.App} this The application which has been launched
+       */
+      'launched'
+    );
+  }
+});
+
+ExtMVC.App.define = function(config) {
+  ExtMVC.app = new ExtMVC.App(config);
+};

data/lib/extjs-mvc/src/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');