extjs-rails 4.1.0.alpha5 → 4.1.0.alpha6

data/app/assets/javascripts/src/container/ButtonGroup.js

@@ -1,143 +0,0 @@
-/**
- * Provides a container for arranging a group of related Buttons in a tabular manner.
- *
- *     @example
- *     Ext.create('Ext.panel.Panel', {
- *         title: 'Panel with ButtonGroup',
- *         width: 300,
- *         height:200,
- *         renderTo: document.body,
- *         bodyPadding: 10,
- *         html: 'HTML Panel Content',
- *         tbar: [{
- *             xtype: 'buttongroup',
- *             columns: 3,
- *             title: 'Clipboard',
- *             items: [{
- *                 text: 'Paste',
- *                 scale: 'large',
- *                 rowspan: 3,
- *                 iconCls: 'add',
- *                 iconAlign: 'top',
- *                 cls: 'btn-as-arrow'
- *             },{
- *                 xtype:'splitbutton',
- *                 text: 'Menu Button',
- *                 scale: 'large',
- *                 rowspan: 3,
- *                 iconCls: 'add',
- *                 iconAlign: 'top',
- *                 arrowAlign:'bottom',
- *                 menu: [{ text: 'Menu Item 1' }]
- *             },{
- *                 xtype:'splitbutton', text: 'Cut', iconCls: 'add16', menu: [{text: 'Cut Menu Item'}]
- *             },{
- *                 text: 'Copy', iconCls: 'add16'
- *             },{
- *                 text: 'Format', iconCls: 'add16'
- *             }]
- *         }]
- *     });
- *
- */
-Ext.define('Ext.container.ButtonGroup', {
-    extend: 'Ext.panel.Panel',
-    alias: 'widget.buttongroup',
-    alternateClassName: 'Ext.ButtonGroup',
-
-    requires: ['Ext.layout.container.Table'],
-
-    /**
-     * @cfg {Number} columns
-     * The `columns` configuration property passed to the {@link #layout configured layout manager}.
-     * See {@link Ext.layout.container.Table#columns}.
-     */
-
-    /**
-     * @cfg {String} baseCls
-     * @inheritdoc
-     */
-    baseCls: Ext.baseCSSPrefix + 'btn-group',
-
-    /**
-     * @cfg {Object} layout
-     * @inheritdoc
-     */
-    layout: {
-        type: 'table'
-    },
-
-    defaultType: 'button',
-
-    /**
-     * @cfg {Boolean} frame
-     * @inheritdoc
-     */
-    frame: true,
-
-    frameHeader: false,
-
-    internalDefaults: {removeMode: 'container', hideParent: true},
-
-    titleAlign: 'center',
-
-    initComponent : function() {
-        // Copy the component's columns config to the layout if specified
-        var me = this,
-            cols = me.columns;
-
-        me.noTitleCls = me.baseCls + '-notitle';
-        if (cols) {
-            me.layout = Ext.apply({}, {columns: cols}, me.layout);
-        }
-
-        if (!me.title) {
-            me.addCls(me.noTitleCls);
-        }
-        me.callParent(arguments);
-    },
-
-    // private
-    onBeforeAdd: function(component) {
-        if (component.isButton) {
-            component.ui = component.ui + '-toolbar';
-        }
-        this.callParent(arguments);
-    },
-
-    //private
-    applyDefaults: function(c) {
-        if (!Ext.isString(c)) {
-            c = this.callParent(arguments);
-            var d = this.internalDefaults;
-            if (c.events) {
-                Ext.applyIf(c.initialConfig, d);
-                Ext.apply(c, d);
-            } else {
-                Ext.applyIf(c, d);
-            }
-        }
-        return c;
-    }
-
-    /**
-     * @cfg {Array} tools
-     * @private
-     */
-    /**
-     * @cfg {Boolean} collapsible
-     * @private
-     */
-    /**
-     * @cfg {Boolean} collapseMode
-     * @private
-     */
-    /**
-     * @cfg {Boolean} animCollapse
-     * @private
-     */
-    /**
-     * @cfg {Boolean} closable
-     * @private
-     */
-});

data/app/assets/javascripts/src/container/Container.js

@@ -1,212 +0,0 @@
-/**
- * Base class for any Ext.Component that may contain other Components. Containers handle the basic behavior of
- * containing items, namely adding, inserting and removing items.
- *
- * The most commonly used Container classes are Ext.panel.Panel, Ext.window.Window and
- * Ext.tab.Panel. If you do not need the capabilities offered by the aforementioned classes you can create a
- * lightweight Container to be encapsulated by an HTML element to your specifications by using the
- * {@link Ext.Component#autoEl autoEl} config option.
- *
- * The code below illustrates how to explicitly create a Container:
- *
- *     @example
- *     // Explicitly create a Container
- *     Ext.create('Ext.container.Container', {
- *         layout: {
- *             type: 'hbox'
- *         },
- *         width: 400,
- *         renderTo: Ext.getBody(),
- *         border: 1,
- *         style: {borderColor:'#000000', borderStyle:'solid', borderWidth:'1px'},
- *         defaults: {
- *             labelWidth: 80,
- *             // implicitly create Container by specifying xtype
- *             xtype: 'datefield',
- *             flex: 1,
- *             style: {
- *                 padding: '10px'
- *             }
- *         },
- *         items: [{
- *             xtype: 'datefield',
- *             name: 'startDate',
- *             fieldLabel: 'Start date'
- *         },{
- *             xtype: 'datefield',
- *             name: 'endDate',
- *             fieldLabel: 'End date'
- *         }]
- *     });
- *
- * ## Layout
- *
- * Container classes delegate the rendering of child Components to a layout manager class which must be configured into
- * the Container using the `{@link #layout}` configuration property.
- *
- * When either specifying child `{@link #cfg-items}` of a Container, or dynamically {@link #method-add adding} Components to a
- * Container, remember to consider how you wish the Container to arrange those child elements, and whether those child
- * elements need to be sized using one of Ext's built-in `{@link #layout}` schemes. By default, Containers use the
- * {@link Ext.layout.container.Auto Auto} scheme which only renders child components, appending them one after the other
- * inside the Container, and **does not apply any sizing** at all.
- *
- * A common mistake is when a developer neglects to specify a `{@link #layout}` (e.g. widgets like GridPanels or
- * TreePanels are added to Containers for which no `{@link #layout}` has been specified). If a Container is left to
- * use the default {@link Ext.layout.container.Auto Auto} scheme, none of its child components will be resized, or changed in
- * any way when the Container is resized.
- *
- * Certain layout managers allow dynamic addition of child components. Those that do include
- * Ext.layout.container.Card, Ext.layout.container.Anchor, Ext.layout.container.VBox,
- * Ext.layout.container.HBox, and Ext.layout.container.Table. For example:
- *
- *     //  Create the GridPanel.
- *     var myNewGrid = Ext.create('Ext.grid.Panel', {
- *         store: myStore,
- *         headers: myHeaders,
- *         title: 'Results', // the title becomes the title of the tab
- *     });
- *
- *     myTabPanel.add(myNewGrid); // {@link Ext.tab.Panel} implicitly uses {@link Ext.layout.container.Card Card}
- *     myTabPanel.{@link Ext.tab.Panel#setActiveTab setActiveTab}(myNewGrid);
- *
- * The example above adds a newly created GridPanel to a TabPanel. Note that a TabPanel uses {@link
- * Ext.layout.container.Card} as its layout manager which means all its child items are sized to {@link
- * Ext.layout.container.Fit fit} exactly into its client area.
- *
- * **_Overnesting is a common problem_**. An example of overnesting occurs when a GridPanel is added to a TabPanel by
- * wrapping the GridPanel _inside_ a wrapping Panel (that has no `{@link #layout}` specified) and then add that
- * wrapping Panel to the TabPanel. The point to realize is that a GridPanel **is** a Component which can be added
- * directly to a Container. If the wrapping Panel has no `{@link #layout}` configuration, then the overnested
- * GridPanel will not be sized as expected.
- *
- * ## Adding via remote configuration
- *
- * A server side script can be used to add Components which are generated dynamically on the server. An example of
- * adding a GridPanel to a TabPanel where the GridPanel is generated by the server based on certain parameters:
- *
- *     // execute an Ajax request to invoke server side script:
- *     Ext.Ajax.request({
- *         url: 'gen-invoice-grid.php',
- *         // send additional parameters to instruct server script
- *         params: {
- *             startDate: Ext.getCmp('start-date').getValue(),
- *             endDate: Ext.getCmp('end-date').getValue()
- *         },
- *         // process the response object to add it to the TabPanel:
- *         success: function(xhr) {
- *             var newComponent = eval(xhr.responseText); // see discussion below
- *             myTabPanel.add(newComponent); // add the component to the TabPanel
- *             myTabPanel.setActiveTab(newComponent);
- *         },
- *         failure: function() {
- *             Ext.Msg.alert("Grid create failed", "Server communication failure");
- *         }
- *     });
- *
- * The server script needs to return a JSON representation of a configuration object, which, when decoded will return a
- * config object with an {@link Ext.Component#xtype xtype}. The server might return the following JSON:
- *
- *     {
- *         "xtype": 'grid',
- *         "title": 'Invoice Report',
- *         "store": {
- *             "model": 'Invoice',
- *             "proxy": {
- *                 "type": 'ajax',
- *                 "url": 'get-invoice-data.php',
- *                 "reader": {
- *                     "type": 'json'
- *                     "record": 'transaction',
- *                     "idProperty": 'id',
- *                     "totalRecords": 'total'
- *                 })
- *             },
- *             "autoLoad": {
- *                 "params": {
- *                     "startDate": '01/01/2008',
- *                     "endDate": '01/31/2008'
- *                 }
- *             }
- *         },
- *         "headers": [
- *             {"header": "Customer", "width": 250, "dataIndex": 'customer', "sortable": true},
- *             {"header": "Invoice Number", "width": 120, "dataIndex": 'invNo', "sortable": true},
- *             {"header": "Invoice Date", "width": 100, "dataIndex": 'date', "renderer": Ext.util.Format.dateRenderer('M d, y'), "sortable": true},
- *             {"header": "Value", "width": 120, "dataIndex": 'value', "renderer": 'usMoney', "sortable": true}
- *         ]
- *     }
- *
- * When the above code fragment is passed through the `eval` function in the success handler of the Ajax request, the
- * result will be a config object which, when added to a Container, will cause instantiation of a GridPanel. **Be sure
- * that the Container is configured with a layout which sizes and positions the child items to your requirements.**
- *
- * **Note:** since the code above is _generated_ by a server script, the `autoLoad` params for the Store, the user's
- * preferred date format, the metadata to allow generation of the Model layout, and the ColumnModel can all be generated
- * into the code since these are all known on the server.
- */
-Ext.define('Ext.container.Container', {
-    extend: 'Ext.container.AbstractContainer',
-    alias: 'widget.container',
-    alternateClassName: 'Ext.Container',
-    
-    /*
-     * For more information on the following methods, see the note for the
-     * hierarchyEventSource observer defined in the class' callback
-     */
-    fireHierarchyEvent: function (ename) {
-        this.hierarchyEventSource.fireEvent(ename, this);
-    },
-
-    // note that the collapse and expand events are fired explicitly from Panel.js
-    afterHide: function() {
-        this.callParent(arguments);
-        this.fireHierarchyEvent('hide');
-    },
-    
-    afterShow: function(){
-        this.callParent(arguments);
-        this.fireHierarchyEvent('show');
-    },
-
-    /**
-     * Return the immediate child Component in which the passed element is located.
-     * @param {Ext.Element/HTMLElement/String} el The element to test (or ID of element).
-     * @param {Boolean} deep If `true`, returns the deepest descendant Component which contains the passed element.
-     * @return {Ext.Component} The child item which contains the passed element.
-     */
-    getChildByElement: function(el, deep) {
-        var item,
-            itemEl,
-            i = 0,
-            it = this.getRefItems(),
-            ln = it.length;
-
-        el = Ext.getDom(el);
-        for (; i < ln; i++) {
-            item = it[i];
-            itemEl = item.getEl();
-            if (itemEl && ((itemEl.dom === el) || itemEl.contains(el))) {
-                return (deep && item.getChildByElement) ? item.getChildByElement(el, deep) : item;
-            }
-        }
-        return null;
-    }
-}, function () {
-    /*
-     * The observer below is used to be able to detect showing/hiding at various levels
-     * in the hierarchy. While it's not particularly expensive to bubble an event up,
-     * cascading an event down can be quite costly.
-     * 
-     * The main usage for this is to do with floating components. For example, the load mask
-     * is a floating component. The component it is masking may be inside several containers.
-     * As such, we need to know when component is hidden, either directly, or via a parent
-     * container being hidden. We can subscribe to these events and filter out the appropriate
-     * container.
-     */
-    this.hierarchyEventSource = this.prototype.hierarchyEventSource = new Ext.util.Observable({ events: {
-        hide: true,
-        show: true,
-        collapse: true,
-        expand: true
-    }});
-});

data/app/assets/javascripts/src/container/DockingContainer.js

@@ -1,265 +0,0 @@
-/**
- *
- */
-Ext.define('Ext.container.DockingContainer', {
-
-    /* Begin Definitions */
-
-    requires: ['Ext.util.MixedCollection', 'Ext.Element' ],
-
-    /* End Definitions */
-
-    isDockingContainer: true,
-
-    /**
-     * @cfg {Object} defaultDockWeights
-     * This object holds the default weights applied to dockedItems that have no weight. These start with a
-     * weight of 1, to allow negative weights to insert before top items and are odd numbers
-     * so that even weights can be used to get between different dock orders.
-     *
-     * To make default docking order match border layout, do this:
-     *
-     *      Ext.panel.AbstractPanel.prototype.defaultDockWeights = { top: 1, bottom: 3, left: 5, right: 7 };
-     *
-     * Changing these defaults as above or individually on this object will effect all Panels.
-     * To change the defaults on a single panel, you should replace the entire object:
-     *
-     *      initComponent: function () {
-     *          // NOTE: Don't change members of defaultDockWeights since the object is shared.
-     *          this.defaultDockWeights = { top: 1, bottom: 3, left: 5, right: 7 };
-     *
-     *          this.callParent();
-     *      }
-     *
-     * To change only one of the default values, you do this:
-     *
-     *      initComponent: function () {
-     *          // NOTE: Don't change members of defaultDockWeights since the object is shared.
-     *          this.defaultDockWeights = Ext.applyIf({ top: 10 }, this.defaultDockWeights);
-     * 
-     *          this.callParent();
-     *      }
-     */
-    defaultDockWeights: {
-        top:    { render: 1, visual: 1 },
-        left:   { render: 3, visual: 5 },
-        right:  { render: 5, visual: 7 },
-        bottom: { render: 7, visual: 3 }
-    },
-
-    // @private
-    // Values to decide which side of the body element docked items must go
-    // This overides any weight. A left/top will *always* sort before a right/bottom
-    // regardless of any weight value. Weights sort at either side of the "body" dividing point.
-    dockOrder: {
-        top: -1,
-        left: -1,
-        right: 1,
-        bottom: 1
-    },
-
-/**
-     * Adds docked item(s) to the container.
-     * @param {Object/Object[]} component The Component or array of components to add. The components
-     * must include a 'dock' parameter on each component to indicate where it should be docked ('top', 'right',
-     * 'bottom', 'left').
-     * @param {Number} pos (optional) The index at which the Component will be added
-     */
-    addDocked : function(items, pos) {
-        var me = this,
-            i = 0,
-            item, length;
-
-        items = me.prepareItems(items);
-        length = items.length;
-
-        for (; i < length; i++) {
-            item = items[i];
-            item.dock = item.dock || 'top';
-
-            if (pos !== undefined) {
-                me.dockedItems.insert(pos + i, item);
-            } else {
-                me.dockedItems.add(item);
-            }
-            if (item.onAdded !== Ext.emptyFn) {
-                item.onAdded(me, i);
-            }
-            if (me.onDockedAdd !== Ext.emptyFn) {
-                me.onDockedAdd(item);
-            }
-        }
-
-        if (me.rendered && !me.suspendLayout) {
-            me.updateLayout();
-        }
-        return items;
-    },
-
-    destroyDockedItems: function(){
-        var dockedItems = this.dockedItems,
-            c;
-
-        if (dockedItems) {
-            while ((c = dockedItems.first())) {
-                this.removeDocked(c, true);
-            }
-        }
-    },
-
-    doRenderDockedItems: function (out, renderData, after) {
-        // Careful! This method is bolted on to the frameTpl and renderTpl so all we get for
-        // context is the renderData! The "this" pointer is either the frameTpl or the
-        // renderTpl instance!
-
-        // Due to framing, we will be called in two different ways: in the frameTpl or in
-        // the renderTpl. The frameTpl version enters via doRenderFramingDockedItems which
-        // sets "$skipDockedItems" on the renderTpl's renderData.
-        //
-        var me = renderData.$comp,
-            layout = me.componentLayout,
-            items,
-            tree;
-
-        if (layout.getDockedItems && !renderData.$skipDockedItems) {
-            items = layout.getDockedItems('render', !after);
-            tree = items && layout.getItemsRenderTree(items);
-
-            if (tree) {
-                Ext.DomHelper.generateMarkup(tree, out);
-            }
-        }
-    },
-
-    /**
-     * Finds a docked component by id, itemId or position. Also see {@link #getDockedItems}
-     * @param {String/Number} comp The id, itemId or position of the docked component (see {@link #getComponent} for details)
-     * @return {Ext.Component} The docked component (if found)
-     */
-    getDockedComponent: function(comp) {
-        if (Ext.isObject(comp)) {
-            comp = comp.getItemId();
-        }
-        return this.dockedItems.get(comp);
-    },
-
-    /**
-     * Retrieves an array of all currently docked Components.
-     *
-     * For example to find a toolbar that has been docked at top:
-     *
-     *     panel.getDockedItems('toolbar[dock="top"]');
-     *
-     * @param {String} selector A {@link Ext.ComponentQuery ComponentQuery} selector string to filter the returned items.
-     * @param {Boolean} beforeBody An optional flag to limit the set of items to only those
-     *  before the body (true) or after the body (false). All components are returned by
-     *  default.
-     * @return {Ext.Component[]} The array of docked components meeting the specified criteria.
-     */
-    getDockedItems : function(selector, beforeBody) {
-        var dockedItems = this.getComponentLayout().getDockedItems('render', beforeBody);
-
-        if (selector && dockedItems.length) {
-            dockedItems = Ext.ComponentQuery.query(selector, dockedItems);
-        }
-
-        return dockedItems;
-    },
-
-    getDockingRefItems: function(deep, containerItems) {
-        // deep fetches the docked items and their descendants using '*' and then '* *'
-        var selector = deep && '*,* *',
-            // start with only the top/left docked items (and maybe their children)
-            dockedItems = this.getDockedItems(selector, true),
-            items;
-
-        // push container items (and maybe their children) after top/left docked items:
-        dockedItems.push.apply(dockedItems, containerItems);
-
-        // push right/bottom docked items (and maybe their children) after container items:
-        items = this.getDockedItems(selector, false);
-        dockedItems.push.apply(dockedItems, items);
-
-        return dockedItems;
-    },
-
-    initDockingItems: function() {
-        var me = this,
-            items = me.dockedItems;
-
-        me.dockedItems = new Ext.util.AbstractMixedCollection(false, me.getComponentId);
-        if (items) {
-            me.addDocked(items);
-        }
-    },
-
-    /**
-     * Inserts docked item(s) to the panel at the indicated position.
-     * @param {Number} pos The index at which the Component will be inserted
-     * @param {Object/Object[]} component. The Component or array of components to add. The components
-     * must include a 'dock' paramater on each component to indicate where it should be docked ('top', 'right',
-     * 'bottom', 'left').
-     */
-    insertDocked : function(pos, items) {
-        this.addDocked(items, pos);
-    },
-
-    // Placeholder empty functions
-    /**
-     * Invoked after a docked item is added to the Panel.
-     * @param {Ext.Component} component
-     * @template
-     * @protected
-     */
-    onDockedAdd : Ext.emptyFn,
-    /**
-     * Invoked after a docked item is removed from the Panel.
-     * @param {Ext.Component} component
-     * @template
-     * @protected
-     */
-    onDockedRemove : Ext.emptyFn,
-
-    /**
-     * Removes the docked item from the panel.
-     * @param {Ext.Component} item. The Component to remove.
-     * @param {Boolean} autoDestroy (optional) Destroy the component after removal.
-     */
-    removeDocked : function(item, autoDestroy) {
-        var me = this,
-            layout,
-            hasLayout;
-
-        if (!me.dockedItems.contains(item)) {
-            return item;
-        }
-
-        layout = me.componentLayout;
-        hasLayout = layout && me.rendered;
-
-        if (hasLayout) {
-            layout.onRemove(item);
-        }
-
-        me.dockedItems.remove(item);
-        item.onRemoved();
-        me.onDockedRemove(item);
-
-        if (autoDestroy === true || (autoDestroy !== false && me.autoDestroy)) {
-            item.destroy();
-        } else if (hasLayout) {
-            // not destroying, make any layout related removals
-            layout.afterRemove(item);
-        }
-
-        if (!me.destroying && !me.suspendLayout) {
-            me.updateLayout();
-        }
-
-        return item;
-    },
-
-    setupDockingRenderTpl: function (renderTpl) {
-        renderTpl.renderDockedItems = this.doRenderDockedItems;
-    }
-});