extjs-rails 4.1.0.alpha5 → 4.1.0.alpha6

data/app/assets/javascripts/src/panel/Tool.js

@@ -1,304 +0,0 @@
-/**
- * This class is used to display small visual icons in the header of a panel. There are a set of
- * 25 icons that can be specified by using the {@link #type} config. The {@link #handler} config
- * can be used to provide a function that will respond to any click events. In general, this class
- * will not be instantiated directly, rather it will be created by specifying the {@link Ext.panel.Panel#tools}
- * configuration on the Panel itself.
- *
- *     @example
- *     Ext.create('Ext.panel.Panel', {
- *         width: 200,
- *         height: 200,
- *         renderTo: document.body,
- *         title: 'A Panel',
- *         tools: [{
- *             type: 'help',
- *             handler: function(){
- *                 // show help here
- *             }
- *         }, {
- *             itemId: 'refresh',
- *             type: 'refresh',
- *             hidden: true,
- *             handler: function(){
- *                 // do refresh
- *             }
- *         }, {
- *             type: 'search',
- *             handler: function(event, target, owner, tool){
- *                 // do search
- *                 owner.child('#refresh').show();
- *             }
- *         }]
- *     });
- */
-Ext.define('Ext.panel.Tool', {
-    extend: 'Ext.Component',
-    requires: ['Ext.tip.QuickTipManager'],
-    alias: 'widget.tool',
-
-    baseCls: Ext.baseCSSPrefix + 'tool',
-    disabledCls: Ext.baseCSSPrefix + 'tool-disabled',
-    toolPressedCls: Ext.baseCSSPrefix + 'tool-pressed',
-    toolOverCls: Ext.baseCSSPrefix + 'tool-over',
-    ariaRole: 'button',
-
-    childEls: [
-        'toolEl'
-    ],
-
-    renderTpl: [
-        '<img id="{id}-toolEl" src="{blank}" class="{baseCls}-{type}" role="presentation"/>'
-    ],
-
-    /**
-     * @cfg {Function} handler
-     * A function to execute when the tool is clicked. Arguments passed are:
-     *
-     * - **event** : Ext.EventObject - The click event.
-     * - **toolEl** : Ext.Element - The tool Element.
-     * - **owner** : Ext.panel.Header - The host panel header.
-     * - **tool** : Ext.panel.Tool - The tool object
-     */
-
-    /**
-     * @cfg {Object} scope
-     * The scope to execute the {@link #handler} function. Defaults to the tool.
-     */
-
-    /**
-     * @cfg {String} type
-     * The type of tool to render. The following types are available:
-     *
-     * - <span class="x-tool"><img src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" class="x-tool-close"></span> close
-     * - <span class="x-tool"><img src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" class="x-tool-minimize"></span> minimize
-     * - <span class="x-tool"><img src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" class="x-tool-maximize"></span> maximize
-     * - <span class="x-tool"><img src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" class="x-tool-restore"></span> restore
-     * - <span class="x-tool"><img src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" class="x-tool-toggle"></span> toggle
-     * - <span class="x-tool"><img src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" class="x-tool-gear"></span> gear
-     * - <span class="x-tool"><img src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" class="x-tool-prev"></span> prev
-     * - <span class="x-tool"><img src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" class="x-tool-next"></span> next
-     * - <span class="x-tool"><img src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" class="x-tool-pin"></span> pin
-     * - <span class="x-tool"><img src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" class="x-tool-unpin"></span> unpin
-     * - <span class="x-tool"><img src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" class="x-tool-right"></span> right
-     * - <span class="x-tool"><img src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" class="x-tool-left"></span> left
-     * - <span class="x-tool"><img src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" class="x-tool-down"></span> down
-     * - <span class="x-tool"><img src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" class="x-tool-up"></span> up
-     * - <span class="x-tool"><img src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" class="x-tool-refresh"></span> refresh
-     * - <span class="x-tool"><img src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" class="x-tool-plus"></span> plus
-     * - <span class="x-tool"><img src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" class="x-tool-minus"></span> minus
-     * - <span class="x-tool"><img src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" class="x-tool-search"></span> search
-     * - <span class="x-tool"><img src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" class="x-tool-save"></span> save
-     * - <span class="x-tool"><img src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" class="x-tool-help"></span> help
-     * - <span class="x-tool"><img src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" class="x-tool-print"></span> print
-     * - <span class="x-tool"><img src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" class="x-tool-expand"></span> expand
-     * - <span class="x-tool"><img src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" class="x-tool-collapse"></span> collapse
-     */
-
-    /**
-     * @cfg {String/Object} tooltip
-     * The tooltip for the tool - can be a string to be used as innerHTML (html tags are accepted) or QuickTips config
-     * object
-     */
-
-     /**
-     * @cfg {String} tooltipType
-     * The type of tooltip to use. Either 'qtip' (default) for QuickTips or 'title' for title attribute.
-     */
-    tooltipType: 'qtip',
-
-    /**
-     * @cfg {Boolean} stopEvent
-     * Specify as false to allow click event to propagate.
-     */
-    stopEvent: true,
-    
-    height: 15,
-    width: 15,
-
-    //<debug>
-    _toolTypes: {
-        close:1,
-        collapse:1,
-        down:1,
-        expand:1,
-        gear:1,
-        help:1,
-        left:1,
-        maximize:1,
-        minimize:1,
-        minus:1,
-        //move:1,
-        next:1,
-        pin:1,
-        plus:1,
-        prev:1,
-        print:1,
-        refresh:1,
-        //resize:1,
-        restore:1,
-        right:1,
-        save:1,
-        search:1,
-        toggle:1,
-        unpin:1,
-        up:1
-    },
-    //</debug>
-
-    initComponent: function() {
-        var me = this;
-        me.addEvents(
-            /**
-             * @event click
-             * Fires when the tool is clicked
-             * @param {Ext.panel.Tool} this
-             * @param {Ext.EventObject} e The event object
-             */
-            'click'
-        );
-
-        //<debug>
-        if (me.id && me._toolTypes[me.id] && Ext.global.console) {
-            Ext.global.console.warn('When specifying a tool you should use the type option, the id can conflict now that tool is a Component');
-        }
-        //</debug>
-
-        me.type = me.type || me.id;
-
-        Ext.applyIf(me.renderData, {
-            baseCls: me.baseCls,
-            blank: Ext.BLANK_IMAGE_URL,
-            type: me.type
-        });
-
-        // alias qtip, should use tooltip since it's what we have in the docs
-        me.tooltip = me.tooltip || me.qtip;
-        me.callParent();
-        me.on({
-            element: 'toolEl',
-            click: me.onClick,
-            mousedown: me.onMouseDown,
-            mouseover: me.onMouseOver,
-            mouseout: me.onMouseOut,
-            scope: me
-        });
-    },
-
-    // inherit docs
-    afterRender: function() {
-        var me = this,
-            attr;
-
-        me.callParent(arguments);
-        if (me.tooltip) {
-            if (Ext.isObject(me.tooltip)) {
-                Ext.tip.QuickTipManager.register(Ext.apply({
-                    target: me.id
-                }, me.tooltip));
-            }
-            else {
-                attr = me.tooltipType == 'qtip' ? 'data-qtip' : 'title';
-                me.toolEl.dom.setAttribute(attr, me.tooltip);
-            }
-        }
-    },
-
-    getFocusEl: function() {
-        return this.el;
-    },
-
-    /**
-     * Sets the type of the tool. Allows the icon to be changed.
-     * @param {String} type The new type. See the {@link #type} config.
-     * @return {Ext.panel.Tool} this
-     */
-    setType: function(type) {
-        var me = this;
-
-        me.type = type;
-        if (me.rendered) {
-            me.toolEl.dom.className = me.baseCls + '-' + type;
-        }
-        return me;
-    },
-
-    /**
-     * Binds this tool to a component.
-     * @private
-     * @param {Ext.Component} component The component
-     */
-    bindTo: function(component) {
-        this.owner = component;
-    },
-
-    /**
-     * Called when the tool element is clicked
-     * @private
-     * @param {Ext.EventObject} e
-     * @param {HTMLElement} target The target element
-     */
-    onClick: function(e, target) {
-        var me = this,
-            owner;
-
-        if (me.disabled) {
-            return false;
-        }
-        owner = me.owner || me.ownerCt;
-
-        //remove the pressed + over class
-        me.el.removeCls(me.toolPressedCls);
-        me.el.removeCls(me.toolOverCls);
-
-        if (me.stopEvent !== false) {
-            e.stopEvent();
-        }
-
-        Ext.callback(me.handler, me.scope || me, [e, target, owner, me]);
-        me.fireEvent('click', me, e);
-        return true;
-    },
-
-    // inherit docs
-    onDestroy: function(){
-        if (Ext.isObject(this.tooltip)) {
-            Ext.tip.QuickTipManager.unregister(this.id);
-        }
-        this.callParent();
-    },
-
-    /**
-     * Called when the user presses their mouse button down on a tool
-     * Adds the press class ({@link #toolPressedCls})
-     * @private
-     */
-    onMouseDown: function() {
-        if (this.disabled) {
-            return false;
-        }
-
-        this.el.addCls(this.toolPressedCls);
-    },
-
-    /**
-     * Called when the user rolls over a tool
-     * Adds the over class ({@link #toolOverCls})
-     * @private
-     */
-    onMouseOver: function() {
-        if (this.disabled) {
-            return false;
-        }
-        this.el.addCls(this.toolOverCls);
-    },
-
-    /**
-     * Called when the user rolls out from a tool.
-     * Removes the over class ({@link #toolOverCls})
-     * @private
-     */
-    onMouseOut: function() {
-        this.el.removeCls(this.toolOverCls);
-    }
-});

data/app/assets/javascripts/src/picker/Color.js

@@ -1,219 +0,0 @@
-/**
- * Color picker provides a simple color palette for choosing colors. The picker can be rendered to any container. The
- * available default to a standard 40-color palette; this can be customized with the {@link #colors} config.
- *
- * Typically you will need to implement a handler function to be notified when the user chooses a color from the picker;
- * you can register the handler using the {@link #event-select} event, or by implementing the {@link #handler} method.
- *
- *     @example
- *     Ext.create('Ext.picker.Color', {
- *         value: '993300',  // initial selected color
- *         renderTo: Ext.getBody(),
- *         listeners: {
- *             select: function(picker, selColor) {
- *                 alert(selColor);
- *             }
- *         }
- *     });
- */
-Ext.define('Ext.picker.Color', {
-    extend: 'Ext.Component',
-    requires: 'Ext.XTemplate',
-    alias: 'widget.colorpicker',
-    alternateClassName: 'Ext.ColorPalette',
-
-    /**
-     * @cfg {String} [componentCls='x-color-picker']
-     * The CSS class to apply to the containing element.
-     */
-    componentCls : Ext.baseCSSPrefix + 'color-picker',
-
-    /**
-     * @cfg {String} [selectedCls='x-color-picker-selected']
-     * The CSS class to apply to the selected element
-     */
-    selectedCls: Ext.baseCSSPrefix + 'color-picker-selected',
-
-    /**
-     * @cfg {String} value
-     * The initial color to highlight (should be a valid 6-digit color hex code without the # symbol). Note that the hex
-     * codes are case-sensitive.
-     */
-    value : null,
-
-    /**
-     * @cfg {String} clickEvent
-     * The DOM event that will cause a color to be selected. This can be any valid event name (dblclick, contextmenu).
-     */
-    clickEvent :'click',
-
-    /**
-     * @cfg {Boolean} allowReselect
-     * If set to true then reselecting a color that is already selected fires the {@link #event-select} event
-     */
-    allowReselect : false,
-
-    /**
-     * @property {String[]} colors
-     * An array of 6-digit color hex code strings (without the # symbol). This array can contain any number of colors,
-     * and each hex code should be unique. The width of the picker is controlled via CSS by adjusting the width property
-     * of the 'x-color-picker' class (or assigning a custom class), so you can balance the number of colors with the
-     * width setting until the box is symmetrical.
-     *
-     * You can override individual colors if needed:
-     *
-     *     var cp = new Ext.picker.Color();
-     *     cp.colors[0] = 'FF0000';  // change the first box to red
-     *
-     * Or you can provide a custom array of your own for complete control:
-     *
-     *     var cp = new Ext.picker.Color();
-     *     cp.colors = ['000000', '993300', '333300'];
-     */
-    colors : [
-        '000000', '993300', '333300', '003300', '003366', '000080', '333399', '333333',
-        '800000', 'FF6600', '808000', '008000', '008080', '0000FF', '666699', '808080',
-        'FF0000', 'FF9900', '99CC00', '339966', '33CCCC', '3366FF', '800080', '969696',
-        'FF00FF', 'FFCC00', 'FFFF00', '00FF00', '00FFFF', '00CCFF', '993366', 'C0C0C0',
-        'FF99CC', 'FFCC99', 'FFFF99', 'CCFFCC', 'CCFFFF', '99CCFF', 'CC99FF', 'FFFFFF'
-    ],
-
-    /**
-     * @cfg {Function} handler
-     * A function that will handle the select event of this picker. The handler is passed the following parameters:
-     *
-     * - `picker` : ColorPicker
-     *
-     *   The {@link Ext.picker.Color picker}.
-     *
-     * - `color` : String
-     *
-     *   The 6-digit color hex code (without the # symbol).
-     */
-
-    /**
-     * @cfg {Object} scope
-     * The scope (`this` reference) in which the `{@link #handler}` function will be called.
-     *
-     * Defaults to this Color picker instance.
-     */
-
-    colorRe: /(?:^|\s)color-(.{6})(?:\s|$)/,
-    
-    renderTpl: [
-        '<tpl for="colors">',
-            '<a href="#" class="color-{.}" hidefocus="on">',
-                '<em><span style="background:#{.}" unselectable="on">&#160;</span></em>',
-            '</a>',
-        '</tpl>'
-    ],
-
-    // private
-    initComponent : function(){
-        var me = this;
-
-        me.callParent(arguments);
-        me.addEvents(
-            /**
-             * @event select
-             * Fires when a color is selected
-             * @param {Ext.picker.Color} this
-             * @param {String} color The 6-digit color hex code (without the # symbol)
-             */
-            'select'
-        );
-
-        if (me.handler) {
-            me.on('select', me.handler, me.scope, true);
-        }
-    },
-
-
-    // private
-    initRenderData : function(){
-        var me = this;
-        return Ext.apply(me.callParent(), {
-            itemCls: me.itemCls,
-            colors: me.colors
-        });
-    },
-
-    onRender : function(){
-        var me = this,
-            clickEvent = me.clickEvent;
-
-        me.callParent(arguments);
-
-        me.mon(me.el, clickEvent, me.handleClick, me, {delegate: 'a'});
-        // always stop following the anchors
-        if(clickEvent != 'click'){
-            me.mon(me.el, 'click', Ext.emptyFn, me, {delegate: 'a', stopEvent: true});
-        }
-    },
-
-    // private
-    afterRender : function(){
-        var me = this,
-            value;
-
-        me.callParent(arguments);
-        if (me.value) {
-            value = me.value;
-            me.value = null;
-            me.select(value, true);
-        }
-    },
-
-    // private
-    handleClick : function(event, target){
-        var me = this,
-            color;
-
-        event.stopEvent();
-        if (!me.disabled) {
-            color = target.className.match(me.colorRe)[1];
-            me.select(color.toUpperCase());
-        }
-    },
-
-    /**
-     * Selects the specified color in the picker (fires the {@link #event-select} event)
-     * @param {String} color A valid 6-digit color hex code (# will be stripped if included)
-     * @param {Boolean} [suppressEvent=false] True to stop the select event from firing.
-     */
-    select : function(color, suppressEvent){
-
-        var me = this,
-            selectedCls = me.selectedCls,
-            value = me.value,
-            el;
-
-        color = color.replace('#', '');
-        if (!me.rendered) {
-            me.value = color;
-            return;
-        }
-
-
-        if (color != value || me.allowReselect) {
-            el = me.el;
-
-            if (me.value) {
-                el.down('a.color-' + value).removeCls(selectedCls);
-            }
-            el.down('a.color-' + color).addCls(selectedCls);
-            me.value = color;
-            if (suppressEvent !== true) {
-                me.fireEvent('select', me, color);
-            }
-        }
-    },
-
-    /**
-     * Get the currently selected color value.
-     * @return {String} value The selected value. Null if nothing is selected.
-     */
-    getValue: function(){
-        return this.value || null;
-    }
-});