extjs-rails 4.1.0.alpha1

data/app/assets/javascripts/extjs-rails/src/LoadMask.js

@@ -0,0 +1,432 @@
+/**
+ * A modal, floating Component which may be shown above a specified {@link Ext.Component Component} while loading data.
+ * When shown, the configured owning Component will be covered with a modality mask, and the LoadMask's {@link #msg} will be
+ * displayed centered, accompanied by a spinner image.
+ *
+ * If the {@link #store} config option is specified, the masking will be automatically shown and then hidden synchronized with
+ * the Store's loading process.
+ *
+ * Because this is a floating Component, its z-index will be managed by the global {@link Ext.WindowManager ZIndexManager}
+ * object, and upon show, it will place itsef at the top of the hierarchy.
+ *
+ * Example usage:
+ *
+ *     // Basic mask:
+ *     var myMask = new Ext.LoadMask(myPanel, {msg:"Please wait..."});
+ *     myMask.show();
+ */
+Ext.define('Ext.LoadMask', {
+
+    extend: 'Ext.Component',
+
+    alias: 'widget.loadmask',
+
+    /* Begin Definitions */
+
+    mixins: {
+        floating: 'Ext.util.Floating',
+        bindable: 'Ext.util.Bindable'
+    },
+
+    uses: ['Ext.data.StoreManager'],
+
+    /* End Definitions */
+
+    /**
+     * @cfg {Ext.data.Store} store
+     * Optional Store to which the mask is bound. The mask is displayed when a load request is issued, and
+     * hidden on either load success, or load fail.
+     */
+
+    /**
+     * @cfg {String} [msg="Loading..."]
+     * The text to display in a centered loading message box.
+     */
+    //<locale>
+    msg : 'Loading...',
+    //</locale>
+
+    /**
+     * @cfg {String} [msgCls="x-mask-loading"]
+     * The CSS class to apply to the loading message element.
+     */
+    msgCls : Ext.baseCSSPrefix + 'mask-loading',
+
+    /**
+     * @cfg {String} [maskCls="x-mask"]
+     * The CSS class to apply to the mask element
+     */
+    maskCls: Ext.baseCSSPrefix + 'mask',
+
+    /**
+     * @cfg {Boolean} [useMsg=true]
+     * Whether or not to use a loading message class or simply mask the bound element.
+     */
+    useMsg: true,
+
+    /**
+     * @cfg {Boolean} [useTargetEl=false]
+     * True to mask the {@link Ext.Component#getTargetEl targetEl} of the bound Component. By default,
+     * the {@link Ext.Component#getEl el} will be masked.
+     */
+    useTargetEl: false,
+
+    baseCls: Ext.baseCSSPrefix + 'mask-msg',
+
+    childEls: [
+        'msgEl'
+    ],
+
+    renderTpl: '<div id="{id}-msgEl" style="position:relative" class="{[values.$comp.msgCls]}"></div>',
+
+    // Private. Obviously, it's floating.
+    floating: {
+        shadow: 'frame'
+    },
+
+    // Private. Masks are not focusable
+    focusOnToFront: false,
+
+    // When we put the load mask to the front of it's owner, we generally don't want to also bring the owning
+    // component to the front.
+    bringParentToFront: false,
+
+    /**
+     * Creates new LoadMask.
+     * @param {Ext.Component} comp The Component you wish to mask. The the mask will be automatically sized
+     * upon Component resize, and the message box will be kept centered.</p>
+     * @param {Object} [config] The config object
+     */
+    constructor : function(comp, config) {
+        var me = this;
+
+        // Element support to be deprecated
+        if (!comp.isComponent) {
+            //<debug>
+            if (Ext.isDefined(Ext.global.console)) {
+                Ext.global.console.warn('Ext.LoadMask: LoadMask for elements has been deprecated, use Ext.dom.Element.mask & Ext.dom.Element.unmask');
+            }
+            //</debug>
+            comp = Ext.get(comp);
+            this.isElement = true;
+        }
+
+        me.ownerCt = comp;
+        if (!this.isElement) {
+            me.bindComponent(comp);
+        }
+        me.callParent([config]);
+
+        if (me.store) {
+            me.bindStore(me.store, true);
+        }
+    },
+
+    bindComponent: function(comp){
+        var me = this,
+            listeners = {
+                scope: this,
+                resize: me.sizeMask,
+                added: me.onComponentAdded,
+                removed: me.onComponentRemoved
+            },
+            hierarchyEventSource = Ext.container.Container.hierarchyEventSource;
+            
+        if (comp.floating) {
+            listeners.move = me.sizeMask;
+            /*
+             *  if floating, set to restack and bind the component to the mask if it's
+             *  determined that the owning component isn't at the front of the stack
+             *
+             *  if there are multiple floating components, each could have its own zIndexManager,
+             *  so it's necessary to have a ref to the owning component to be able
+             *  to look up it's z-index and then adjust accordingly in me.setZIndex
+             *  - the restack simply acts as a flag to know to adjust the z-index in me.setZIndex
+             */
+            if (comp.zIndexManager.front !== comp) {
+                me.restack = true;
+                me.activeOwner = comp;
+            }
+        } else if (comp.ownerCt) {
+            me.onComponentAdded(comp.ownerCt);
+        } else {
+            // if the target comp is non-floating and under a floating comp don't bring the load mask to the front of the stack
+            me.preventBringToFront = true;
+        }
+
+        me.mon(comp, listeners);
+        
+        // subscribe to the observer that manages the hierarchy
+        me.mon(hierarchyEventSource, {
+            show: me.onContainerShow,
+            hide: me.onContainerHide,
+            expand: me.onContainerExpand,
+            collapse: me.onContainerCollapse,
+            scope: me
+        });
+    },
+
+    onComponentAdded: function(owner){
+        var me = this;
+        delete me.activeOwner;
+        me.floatParent = owner;
+        if (!owner.floating) {
+            owner = owner.up('[floating]');
+        }
+        if (owner) {
+            me.activeOwner = owner;
+            me.mon(owner, 'move', me.sizeMask, me);
+        }
+        owner = me.floatParent.ownerCt;
+        if (me.rendered && me.isVisible() && owner) {
+            me.floatOwner = owner;
+            me.mon(owner, 'afterlayout', me.sizeMask, me, {single: true});
+        }
+    },
+
+    onComponentRemoved: function(owner){
+        var me = this,
+            activeOwner = me.activeOwner,
+            floatOwner = me.floatOwner;
+
+        if (activeOwner) {
+            me.mun(activeOwner, 'move', me.sizeMask, me);
+        }
+        if (floatOwner) {
+            me.mun(floatOwner, 'afterlayout', me.sizeMask, me);
+        }
+        delete me.activeOwner;
+        delete me.floatOwner;
+    },
+
+    afterRender: function() {
+        this.callParent(arguments);
+        this.container = this.floatParent.getContentTarget();
+    },
+
+    onContainerShow: function(container){
+        if (this.isActiveContainer(container)) {
+            this.onComponentShow();
+        }
+    },
+
+    onContainerHide: function(container){
+        if (this.isActiveContainer(container)) {
+            this.onComponentHide();
+        }
+    },
+
+    onContainerExpand: function(container){
+        if (this.isActiveContainer(container)) {
+            this.onComponentShow();
+        }
+    },
+
+    onContainerCollapse: function(container){
+        if (this.isActiveContainer(container)) {
+            this.onComponentHide();
+        }
+    },
+
+    isActiveContainer: function(container){
+        return this.isDescendantOf(container);
+    },
+
+    onComponentHide: function(){
+        var me = this;
+
+        if (me.rendered && me.isVisible()) {
+            me.hide();
+            me.showNext = true;
+        }
+    },
+
+    onComponentShow: function(){
+        if (this.showNext) {
+            this.show();
+        }
+        delete this.showNext;
+    },
+
+    /**
+     * @private
+     * Called when this LoadMask's Component is resized. The toFront method rebases and resizes the modal mask.
+     */
+    sizeMask: function() {
+        var me = this,
+            target;
+
+        if (me.rendered && me.isVisible()) {
+            me.center();
+
+            target = me.getMaskTarget();
+            me.getMaskEl().show().setSize(target.getSize()).alignTo(target, 'tl-tl');
+
+        }
+    },
+
+    /**
+     * Changes the data store bound to this LoadMask.
+     * @param {Ext.data.Store} store The store to bind to this LoadMask
+     */
+    bindStore : function(store, initial) {
+        var me = this;
+        me.mixins.bindable.bindStore.apply(me, arguments);
+        store = me.store;
+        if (store && store.isLoading()) {
+            me.onBeforeLoad();
+        }
+    },
+
+    getStoreListeners: function(){
+        return {
+            beforeload: this.onBeforeLoad,
+            load: this.onLoad,
+            exception: this.onLoad,
+
+            // Fired when a range is requested for rendering that is not in the cache
+            cachemiss: this.onBeforeLoad,
+
+            // Fired when a range for rendering which was previously missing from the cache is loaded
+            cachefilled: this.onLoad
+        };
+    },
+
+    onDisable : function() {
+        this.callParent(arguments);
+        if (this.loading) {
+            this.onLoad();
+        }
+    },
+
+    getOwner: function(){
+        return this.ownerCt || this.floatParent;
+    },
+
+    getMaskTarget: function(){
+        var owner = this.getOwner();
+        return this.useTargetEl ? owner.getTargetEl() : owner.getEl();
+    },
+
+    // private
+    onBeforeLoad : function() {
+        var me = this,
+            owner = me.getOwner(),
+            origin;
+
+        if (!me.disabled) {
+            me.loading = true;
+            // If the owning Component has not been layed out, defer so that the ZIndexManager
+            // gets to read its layed out size when sizing the modal mask
+            if (owner.componentLayoutCounter) {
+                me.maybeShow();
+            } else {
+                // The code below is a 'run-once' interceptor.
+                origin = owner.afterComponentLayout;
+                owner.afterComponentLayout = function() {
+                    owner.afterComponentLayout = origin;
+                    origin.apply(owner, arguments);
+                    me.maybeShow();
+                };
+            }
+        }
+    },
+
+    maybeShow: function(){
+        var me = this,
+            owner = me.getOwner();
+
+        if (!owner.isVisible(true)) {
+            me.showNext = true;
+        }
+        else if (me.loading && owner.rendered) {
+            me.show();
+        }
+    },
+
+    getMaskEl: function(){
+        var me = this;
+        return me.maskEl || (me.maskEl = me.el.insertSibling({
+            cls: me.maskCls,
+            style: {
+                zIndex: me.el.getStyle('zIndex') - 2
+            }
+        }, 'before'));
+    },
+
+    onShow: function() {
+        var me = this,
+            msgEl = me.msgEl;
+
+        me.callParent(arguments);
+        me.loading = true;
+
+        if (me.useMsg) {
+            msgEl.show().update(me.msg);
+        } else {
+            msgEl.parent().hide();
+        }
+    },
+
+    hide: function(){
+        // Element support to be deprecated
+        if (this.isElement) {
+            this.ownerCt.unmask();
+            this.fireEvent('hide', this);
+            return;
+        }
+        delete this.showNext;
+        return this.callParent(arguments);
+    },
+
+    onHide: function(){
+        this.callParent();
+        this.getMaskEl().hide();
+    },
+
+    show: function(){
+        // Element support to be deprecated
+        if (this.isElement) {
+            this.ownerCt.mask(this.useMsg ? this.msg : '', this.msgCls);
+            this.fireEvent('show', this);
+            return;
+        }
+        return this.callParent(arguments);
+    },
+
+    afterShow: function() {
+        this.callParent(arguments);
+        this.sizeMask();
+    },
+
+    setZIndex: function(index) {
+        var me = this;
+            
+        if (me.restack) {
+            // it seems silly to add 1 to have it subtracted in the call below,
+            // but this allows the x-mask el to have the correct z-index (same as the component)
+            // so instead of directly changing the zIndexStack just get the z-index of the owner comp
+            index = parseInt(me.activeOwner.el.getStyle('zIndex'), 10) + 1;
+        }
+
+        me.getMaskEl().setStyle('zIndex', index - 1);
+        return me.mixins.floating.setZIndex.apply(me, arguments);
+    },
+
+    // private
+    onLoad : function() {
+        this.loading = false;
+        this.hide();
+    },
+
+    onDestroy: function(){
+        var me = this;
+
+        if (me.isElement) {
+            me.ownerCt.unmask();
+        }
+
+        Ext.destroy(me.maskEl);
+        me.callParent();
+    }
+});

data/app/assets/javascripts/extjs-rails/src/ModelManager.js

@@ -0,0 +1,186 @@
+/**
+ * @author Ed Spencer
+ * @class Ext.ModelManager
+
+The ModelManager keeps track of all {@link Ext.data.Model} types defined in your application.
+
+__Creating Model Instances__
+
+Model instances can be created by using the {@link Ext#create Ext.create} method. Ext.create replaces
+the deprecated {@link #create Ext.ModelManager.create} method. It is also possible to create a model instance
+this by using the Model type directly. The following 3 snippets are equivalent:
+
+    Ext.define('User', {
+        extend: 'Ext.data.Model',
+        fields: ['first', 'last']
+    });
+
+    // method 1, create using Ext.create (recommended)
+    Ext.create('User', {
+        first: 'Ed',
+        last: 'Spencer'
+    });
+
+    // method 2, create through the manager (deprecated)
+    Ext.ModelManager.create({
+        first: 'Ed',
+        last: 'Spencer'
+    }, 'User');
+
+    // method 3, create on the type directly
+    new User({
+        first: 'Ed',
+        last: 'Spencer'
+    });
+
+__Accessing Model Types__
+
+A reference to a Model type can be obtained by using the {@link #getModel} function. Since models types
+are normal classes, you can access the type directly. The following snippets are equivalent:
+
+    Ext.define('User', {
+        extend: 'Ext.data.Model',
+        fields: ['first', 'last']
+    });
+
+    // method 1, access model type through the manager
+    var UserType = Ext.ModelManager.getModel('User');
+
+    // method 2, reference the type directly
+    var UserType = User;
+
+ * @markdown
+ * @singleton
+ */
+Ext.define('Ext.ModelManager', {
+    extend: 'Ext.AbstractManager',
+    alternateClassName: 'Ext.ModelMgr',
+    requires: ['Ext.data.association.Association'],
+    
+    singleton: true,
+
+    typeName: 'mtype',
+
+    /**
+     * Private stack of associations that must be created once their associated model has been defined
+     * @property {Ext.data.association.Association[]} associationStack
+     */
+    associationStack: [],
+
+    /**
+     * Registers a model definition. All model plugins marked with isDefault: true are bootstrapped
+     * immediately, as are any addition plugins defined in the model config.
+     * @private
+     */
+    registerType: function(name, config) {
+        var proto = config.prototype,
+            model;
+        if (proto && proto.isModel) {
+            // registering an already defined model
+            model = config;
+        } else {
+            // passing in a configuration
+            if (!config.extend) {
+                config.extend = 'Ext.data.Model';
+            }
+            model = Ext.define(name, config);
+        }
+        this.types[name] = model;
+        return model;
+    },
+
+    /**
+     * @private
+     * Private callback called whenever a model has just been defined. This sets up any associations
+     * that were waiting for the given model to be defined
+     * @param {Function} model The model that was just created
+     */
+    onModelDefined: function(model) {
+        var stack  = this.associationStack,
+            length = stack.length,
+            create = [],
+            association, i, created;
+
+        for (i = 0; i < length; i++) {
+            association = stack[i];
+
+            if (association.associatedModel == model.modelName) {
+                create.push(association);
+            }
+        }
+
+        for (i = 0, length = create.length; i < length; i++) {
+            created = create[i];
+            this.types[created.ownerModel].prototype.associations.add(Ext.data.association.Association.create(created));
+            Ext.Array.remove(stack, created);
+        }
+    },
+
+    /**
+     * Registers an association where one of the models defined doesn't exist yet.
+     * The ModelManager will check when new models are registered if it can link them
+     * together
+     * @private
+     * @param {Ext.data.association.Association} association The association
+     */
+    registerDeferredAssociation: function(association){
+        this.associationStack.push(association);
+    },
+
+    /**
+     * Returns the {@link Ext.data.Model} for a given model name
+     * @param {String/Object} id The id of the model or the model instance.
+     * @return {Ext.data.Model} a model class.
+     */
+    getModel: function(id) {
+        var model = id;
+        if (typeof model == 'string') {
+            model = this.types[model];
+        }
+        return model;
+    },
+
+    /**
+     * Creates a new instance of a Model using the given data.
+     *
+     * This method is deprecated.  Use {@link Ext#create Ext.create} instead.  For example:
+     *
+     *     Ext.create('User', {
+     *         first: 'Ed',
+     *         last: 'Spencer'
+     *     });
+     *
+     * @param {Object} data Data to initialize the Model's fields with
+     * @param {String} name The name of the model to create
+     * @param {Number} id (Optional) unique id of the Model instance (see {@link Ext.data.Model})
+     */
+    create: function(config, name, id) {
+        var Con = typeof name == 'function' ? name : this.types[name || config.name];
+
+        return new Con(config, id);
+    }
+}, function() {
+
+    /**
+     * Old way for creating Model classes.  Instead use:
+     *
+     *     Ext.define("MyModel", {
+     *         extend: "Ext.data.Model",
+     *         fields: []
+     *     });
+     *
+     * @param {String} name Name of the Model class.
+     * @param {Object} config A configuration object for the Model you wish to create.
+     * @return {Ext.data.Model} The newly registered Model
+     * @member Ext
+     * @deprecated 4.0.0 Use {@link Ext#define} instead.
+     */
+    Ext.regModel = function() {
+        //<debug>
+        if (Ext.isDefined(Ext.global.console)) {
+            Ext.global.console.warn('Ext.regModel has been deprecated. Models can now be created by extending Ext.data.Model: Ext.define("MyModel", {extend: "Ext.data.Model", fields: []});.');
+        }
+        //</debug>
+        return this.ModelManager.registerType.apply(this.ModelManager, arguments);
+    };
+});