extjs-rails 4.1.0.alpha1

data/app/assets/javascripts/extjs-rails/src/tab/Tab.js

@@ -0,0 +1,358 @@
+/**
+ * @author Ed Spencer
+ * 
+ * Represents a single Tab in a {@link Ext.tab.Panel TabPanel}. A Tab is simply a slightly customized {@link Ext.button.Button Button}, 
+ * styled to look like a tab. Tabs are optionally closable, and can also be disabled. 99% of the time you will not
+ * need to create Tabs manually as the framework does so automatically when you use a {@link Ext.tab.Panel TabPanel}
+ */
+Ext.define('Ext.tab.Tab', {
+    extend: 'Ext.button.Button',
+    alias: 'widget.tab',
+
+    requires: [
+        'Ext.layout.component.Tab',
+        'Ext.util.KeyNav'
+    ],
+
+    componentLayout: 'tab',
+
+    /**
+     * @property {Boolean} isTab
+     * `true` in this class to identify an object as an instantiated Tab, or subclass thereof.
+     */
+    isTab: true,
+
+    baseCls: Ext.baseCSSPrefix + 'tab',
+
+    /**
+     * @cfg {String} activeCls
+     * The CSS class to be applied to a Tab when it is active.
+     * Providing your own CSS for this class enables you to customize the active state.
+     */
+    activeCls: 'active',
+
+    /**
+     * @cfg {String} [disabledCls='x-tab-disabled']
+     * The CSS class to be applied to a Tab when it is disabled.
+     */
+
+    /**
+     * @cfg {String} closableCls
+     * The CSS class which is added to the tab when it is closable
+     */
+    closableCls: 'closable',
+
+    /**
+     * @cfg {Boolean} closable
+     * True to make the Tab start closable (the close icon will be visible).
+     */
+    closable: true,
+
+    /**
+     * @cfg {String} closeText
+     * The accessible text label for the close button link; only used when {@link #cfg-closable} = true.
+     */
+    //<locale>
+    closeText: 'Close Tab',
+    //</locale>
+
+    /**
+     * @property {Boolean} active
+     * Indicates that this tab is currently active. This is NOT a public configuration.
+     * @readonly
+     */
+    active: false,
+
+    /**
+     * @property {Boolean} closable
+     * True if the tab is currently closable
+     */
+
+    childEls: [
+        'closeEl'
+    ],
+
+    scale: false,
+
+    position: 'top',
+
+    initComponent: function() {
+        var me = this;
+
+        me.addEvents(
+            /**
+             * @event activate
+             * Fired when the tab is activated.
+             * @param {Ext.tab.Tab} this
+             */
+            'activate',
+
+            /**
+             * @event deactivate
+             * Fired when the tab is deactivated.
+             * @param {Ext.tab.Tab} this
+             */
+            'deactivate',
+
+            /**
+             * @event beforeclose
+             * Fires if the user clicks on the Tab's close button, but before the {@link #close} event is fired. Return
+             * false from any listener to stop the close event being fired
+             * @param {Ext.tab.Tab} tab The Tab object
+             */
+            'beforeclose',
+
+            /**
+             * @event close
+             * Fires to indicate that the tab is to be closed, usually because the user has clicked the close button.
+             * @param {Ext.tab.Tab} tab The Tab object
+             */
+            'close'
+        );
+
+        me.callParent(arguments);
+
+        if (me.card) {
+            me.setCard(me.card);
+        }
+    },
+
+    getTemplateArgs: function() {
+        var me = this,
+            result = me.callParent();
+
+        result.closable = me.closable;
+        result.closeText = me.closeText;
+
+        return result;
+    },
+
+    beforeRender: function() {
+        var me = this,
+            tabBar = me.up('tabbar'),
+            tabPanel = me.up('tabpanel');
+        
+        me.callParent();
+        
+        me.addClsWithUI(me.position);
+
+        // Set all the state classNames, as they need to include the UI
+        // me.disabledCls = me.getClsWithUIs('disabled');
+
+        me.syncClosableUI();
+
+        // Propagate minTabWidth and maxTabWidth settings from the owning TabBar then TabPanel
+        if (!me.minWidth) {
+            me.minWidth = (tabBar) ? tabBar.minTabWidth : me.minWidth;
+            if (!me.minWidth && tabPanel) {
+                me.minWidth = tabPanel.minTabWidth;
+            }
+            if (me.minWidth && me.iconCls) {
+                me.minWidth += 25;
+            }
+        }
+        if (!me.maxWidth) {
+            me.maxWidth = (tabBar) ? tabBar.maxTabWidth : me.maxWidth;
+            if (!me.maxWidth && tabPanel) {
+                me.maxWidth = tabPanel.maxTabWidth;
+            }
+        }
+    },
+
+    onRender: function() {
+        var me = this;
+
+        me.callParent(arguments);
+
+        me.keyNav = new Ext.util.KeyNav(me.el, {
+            enter: me.onEnterKey,
+            del: me.onDeleteKey,
+            scope: me
+        });
+    },
+
+    // inherit docs
+    enable : function(silent) {
+        var me = this;
+
+        me.callParent(arguments);
+
+        me.removeClsWithUI(me.position + '-disabled');
+
+        return me;
+    },
+
+    // inherit docs
+    disable : function(silent) {
+        var me = this;
+
+        me.callParent(arguments);
+
+        me.addClsWithUI(me.position + '-disabled');
+
+        return me;
+    },
+
+    onDestroy: function() {
+        var me = this;
+
+        Ext.destroy(me.keyNav);
+        delete me.keyNav;
+
+        me.callParent(arguments);
+    },
+
+    /**
+     * Sets the tab as either closable or not.
+     * @param {Boolean} closable Pass false to make the tab not closable. Otherwise the tab will be made closable (eg a
+     * close button will appear on the tab)
+     */
+    setClosable: function(closable) {
+        var me = this;
+
+        // Closable must be true if no args
+        closable = (!arguments.length || !!closable);
+
+        if (me.closable != closable) {
+            me.closable = closable;
+
+            // set property on the user-facing item ('card'):
+            if (me.card) {
+                me.card.closable = closable;
+            }
+
+            me.syncClosableUI();
+
+            if (me.rendered) {
+                me.syncClosableElements();
+
+                // Tab will change width to accommodate close icon
+                me.updateLayout();
+            }
+        }
+    },
+
+    /**
+     * This method ensures that the closeBtn element exists or not based on 'closable'.
+     * @private
+     */
+    syncClosableElements: function () {
+        var me = this,
+            closeEl = me.closeEl;
+
+        if (me.closable) {
+            if (!closeEl) {
+                me.closeEl = me.btnWrap.insertSibling({
+                    tag: 'a',
+                    cls: me.baseCls + '-close-btn',
+                    href: '#',
+                    title: me.closeText
+                }, 'after');
+            }
+        } else if (closeEl) {
+            closeEl.remove();
+            delete me.closeEl;
+        }
+    },
+
+    /**
+     * This method ensures that the UI classes are added or removed based on 'closable'.
+     * @private
+     */
+    syncClosableUI: function () {
+        var me = this,
+            classes = [me.closableCls, me.closableCls + '-' + me.position];
+
+        if (me.closable) {
+            me.addClsWithUI(classes);
+        } else {
+            me.removeClsWithUI(classes);
+        }
+    },
+
+    /**
+     * Sets this tab's attached card. Usually this is handled automatically by the {@link Ext.tab.Panel} that this Tab
+     * belongs to and would not need to be done by the developer
+     * @param {Ext.Component} card The card to set
+     */
+    setCard: function(card) {
+        var me = this;
+
+        me.card = card;
+        me.setText(me.title || card.title);
+        me.setIconCls(me.iconCls || card.iconCls);
+        me.setIcon(me.icon || card.icon);
+    },
+
+    /**
+     * @private
+     * Listener attached to click events on the Tab's close button
+     */
+    onCloseClick: function() {
+        var me = this;
+
+        if (me.fireEvent('beforeclose', me) !== false) {
+            if (me.tabBar) {
+                if (me.tabBar.closeTab(me) === false) {
+                    // beforeclose on the panel vetoed the event, stop here
+                    return;
+                }
+            } else {
+                // if there's no tabbar, fire the close event
+                me.fireClose();
+            }
+        }
+    },
+
+    /**
+     * Fires the close event on the tab.
+     * @private
+     */
+    fireClose: function(){
+        this.fireEvent('close', this);
+    },
+
+    /**
+     * @private
+     */
+    onEnterKey: function(e) {
+        var me = this;
+
+        if (me.tabBar) {
+            me.tabBar.onClick(e, me.el);
+        }
+    },
+
+   /**
+     * @private
+     */
+    onDeleteKey: function(e) {
+        if (this.closable) {
+            this.onCloseClick();
+        }
+    },
+
+    // @private
+    activate : function(supressEvent) {
+        var me = this;
+
+        me.active = true;
+        me.addClsWithUI([me.activeCls, me.position + '-' + me.activeCls]);
+
+        if (supressEvent !== true) {
+            me.fireEvent('activate', me);
+        }
+    },
+
+    // @private
+    deactivate : function(supressEvent) {
+        var me = this;
+
+        me.active = false;
+        me.removeClsWithUI([me.activeCls, me.position + '-' + me.activeCls]);
+
+        if (supressEvent !== true) {
+            me.fireEvent('deactivate', me);
+        }
+    }
+});

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

@@ -0,0 +1,10 @@
+/*
+ * This file represents the very last stage of the Ext definition process and is ensured
+ * to be included at the end of the build via the 'tail' package of extjs.jsb3.
+ *
+ */
+
+Ext._endTime = new Date().getTime();
+if (Ext._beforereadyhandler){
+    Ext._beforereadyhandler();
+}

data/app/assets/javascripts/extjs-rails/src/tip/QuickTip.js

@@ -0,0 +1,335 @@
+/**
+ * A specialized tooltip class for tooltips that can be specified in markup and automatically managed
+ * by the global {@link Ext.tip.QuickTipManager} instance.  See the QuickTipManager documentation for
+ * additional usage details and examples.
+ */
+Ext.define('Ext.tip.QuickTip', {
+    extend: 'Ext.tip.ToolTip',
+    alias: 'widget.quicktip',
+    alternateClassName: 'Ext.QuickTip',
+
+    /**
+     * @cfg {String/HTMLElement/Ext.Element} target
+     * The target HTMLElement, Ext.Element or id to associate with this Quicktip.
+     * 
+     * Defaults to the document.
+     */
+
+    /**
+     * @cfg {Boolean} interceptTitles
+     * True to automatically use the element's DOM title value if available.
+     */
+    interceptTitles : false,
+
+    // Force creation of header Component
+    title: ' ',
+
+    // private
+    tagConfig : {
+        namespace : "data-",
+        attribute : "qtip",
+        width : "qwidth",
+        target : "target",
+        title : "qtitle",
+        hide : "hide",
+        cls : "qclass",
+        align : "qalign",
+        anchor : "anchor"
+    },
+
+    // private
+    initComponent : function(){
+        var me = this;
+
+        me.target = me.target || Ext.getDoc();
+        me.targets = me.targets || {};
+        me.callParent();
+    },
+
+    /**
+     * Configures a new quick tip instance and assigns it to a target element.
+     *
+     * For example usage, see the {@link Ext.tip.QuickTipManager} class header.
+     *
+     * @param {Object} config The config object with the following properties:
+     * @param config.autoHide
+     * @param config.cls
+     * @param config.dismissDelay overrides the singleton value
+     * @param config.target required
+     * @param config.text required
+     * @param config.title
+     * @param config.width
+     */
+    register : function(config){
+        var configs = Ext.isArray(config) ? config : arguments,
+            i = 0,
+            len = configs.length,
+            target, j, targetLen;
+
+        for (; i < len; i++) {
+            config = configs[i];
+            target = config.target;
+            if (target) {
+                if (Ext.isArray(target)) {
+                    for (j = 0, targetLen = target.length; j < targetLen; j++) {
+                        this.targets[Ext.id(target[j])] = config;
+                    }
+                } else{
+                    this.targets[Ext.id(target)] = config;
+                }
+            }
+        }
+    },
+
+    /**
+     * Removes this quick tip from its element and destroys it.
+     * @param {String/HTMLElement/Ext.Element} el The element from which the quick tip
+     * is to be removed or ID of the element.
+     */
+    unregister : function(el){
+        delete this.targets[Ext.id(el)];
+    },
+
+    /**
+     * Hides a visible tip or cancels an impending show for a particular element.
+     * @param {String/HTMLElement/Ext.Element} el The element that is the target of
+     * the tip or ID of the element.
+     */
+    cancelShow: function(el){
+        var me = this,
+            activeTarget = me.activeTarget;
+
+        el = Ext.get(el).dom;
+        if (me.isVisible()) {
+            if (activeTarget && activeTarget.el == el) {
+                me.hide();
+            }
+        } else if (activeTarget && activeTarget.el == el) {
+            me.clearTimer('show');
+        }
+    },
+
+    /**
+     * @private
+     * Reads the tip text from the closest node to the event target which contains the
+     * attribute we are configured to look for. Returns an object containing the text
+     * from the attribute, and the target element from which the text was read.
+     */
+    getTipCfg: function(e) {
+        var t = e.getTarget(),
+            titleText = t.title,
+            cfg;
+
+        if (this.interceptTitles && titleText && Ext.isString(titleText)) {
+            t.qtip = titleText;
+            t.removeAttribute("title");
+            e.preventDefault();
+            return {
+                text: titleText
+            };
+        }
+        else {
+            cfg = this.tagConfig;
+            t = e.getTarget('[' + cfg.namespace + cfg.attribute + ']');
+            if (t) {
+                return {
+                    target: t,
+                    text: t.getAttribute(cfg.namespace + cfg.attribute)
+                };
+            }
+        }
+    },
+
+    // private
+    onTargetOver : function(e){
+        var me = this,
+            target = e.getTarget(me.delegate),
+            hasShowDelay,
+            delay,
+            elTarget,
+            cfg,
+            ns,
+            tipConfig,
+            autoHide,
+            targets, targetEl, value, key;
+
+        if (me.disabled) {
+            return;
+        }
+
+        // TODO - this causes "e" to be recycled in IE6/7 (EXTJSIV-1608) so ToolTip#setTarget
+        // was changed to include freezeEvent. The issue seems to be a nested 'resize' event
+        // that smashed Ext.EventObject.
+        me.targetXY = e.getXY();
+
+        // If the over target was filtered out by the delegate selector, or is not an HTMLElement, or is the <html> or the <body>, then return
+        if(!target || target.nodeType !== 1 || target == document.documentElement || target == document.body){
+            return;
+        }
+
+        if (me.activeTarget && ((target == me.activeTarget.el) || Ext.fly(me.activeTarget.el).contains(target))) {
+            me.clearTimer('hide');
+            me.show();
+            return;
+        }
+
+        if (target) {
+            targets = me.targets;
+
+            for (key in targets) {
+                if (targets.hasOwnProperty(key)) {
+                    value = targets[key];
+
+                    targetEl = Ext.fly(value.target);
+                    if (targetEl && (targetEl.dom === target || targetEl.contains(target))) {
+                        elTarget = targetEl.dom;
+                        break;
+                    }
+                }
+            }
+
+            if (elTarget) {
+                me.activeTarget = me.targets[elTarget.id];
+                me.activeTarget.el = target;
+                me.anchor = me.activeTarget.anchor;
+                if (me.anchor) {
+                    me.anchorTarget = target;
+                }
+                hasShowDelay = Ext.isDefined(me.activeTarget.showDelay);
+                if (hasShowDelay) {
+                    delay = me.showDelay;
+                    me.showDelay = me.activeTarget.showDelay;
+                }
+                me.delayShow();
+                if (hasShowDelay) {
+                    me.showDelay = delay;
+                }
+                return;
+            }
+        }
+
+        // Should be a fly.
+        elTarget = Ext.fly(target, '_quicktip-target');
+        cfg = me.tagConfig;
+        ns = cfg.namespace;
+        tipConfig = me.getTipCfg(e);
+
+        if (tipConfig) {
+
+            // getTipCfg may look up the parentNode axis for a tip text attribute and will return the new target node.
+            // Change our target element to match that from which the tip text attribute was read.
+            if (tipConfig.target) {
+                target = tipConfig.target;
+                elTarget = Ext.fly(target, '_quicktip-target');
+            }
+            autoHide = elTarget.getAttribute(ns + cfg.hide);
+
+            me.activeTarget = {
+                el: target,
+                text: tipConfig.text,
+                width: +elTarget.getAttribute(ns + cfg.width) || null,
+                autoHide: autoHide != "user" && autoHide !== 'false',
+                title: elTarget.getAttribute(ns + cfg.title),
+                cls: elTarget.getAttribute(ns + cfg.cls),
+                align: elTarget.getAttribute(ns + cfg.align)
+
+            };
+            me.anchor = elTarget.getAttribute(ns + cfg.anchor);
+            if (me.anchor) {
+                me.anchorTarget = target;
+            }
+            hasShowDelay = Ext.isDefined(me.activeTarget.showDelay);
+            if (hasShowDelay) {
+                delay = me.showDelay;
+                me.showDelay = me.activeTarget.showDelay;
+            }
+            me.delayShow();
+            if (hasShowDelay) {
+                me.showDelay = delay;
+            }
+        }
+    },
+
+    // private
+    onTargetOut : function(e){
+        var me = this,
+            active = me.activeTarget,
+            hasHideDelay,
+            delay;
+
+        // If moving within the current target, and it does not have a new tip, ignore the mouseout
+        // EventObject.within is the only correct way to determine this.
+        if (active && e.within(me.activeTarget.el) && !me.getTipCfg(e)) {
+            return;
+        }
+
+        me.clearTimer('show');
+        delete me.activeTarget;
+        if (me.autoHide !== false) {
+            hasHideDelay = active && Ext.isDefined(active.hideDelay);
+            if (hasHideDelay) {
+                delay = me.hideDelay;
+                me.hideDelay = active.hideDelay;
+            }
+            me.delayHide();
+            if (hasHideDelay) {
+                me.hideDelay = delay;
+            }
+        }
+    },
+
+    // inherit docs
+    showAt : function(xy){
+        var me = this,
+            target = me.activeTarget,
+            cls;
+
+        if (target) {
+            if (!me.rendered) {
+                me.render(Ext.getBody());
+                me.activeTarget = target;
+            }
+            me.suspendLayouts();
+            if (target.title) {
+                me.setTitle(target.title);
+                me.header.show();
+            } else {
+                me.header.hide();
+            }
+            me.update(target.text);
+            me.autoHide = target.autoHide;
+            me.dismissDelay = target.dismissDelay || me.dismissDelay;
+            
+            cls = me.lastCls;
+            if (cls) {
+                me.removeCls(cls);
+                delete me.lastCls;
+            }
+            
+            cls = target.cls;
+            if (cls) {
+                me.addCls(cls);
+                me.lastCls = cls;
+            }
+
+            me.setWidth(target.width);
+
+            if (me.anchor) {
+                me.constrainPosition = false;
+            } else if (target.align) { // TODO: this doesn't seem to work consistently
+                xy = me.el.getAlignToXY(target.el, target.align);
+                me.constrainPosition = false;
+            }else{
+                me.constrainPosition = true;
+            }
+            me.resumeLayouts(true);
+        }
+        me.callParent([xy]);
+    },
+
+    // inherit docs
+    hide: function(){
+        delete this.activeTarget;
+        this.callParent();
+    }
+});