extjs-rails 4.1.0.alpha1

data/app/assets/javascripts/extjs-rails/src/view/BoundList.js

@@ -0,0 +1,207 @@
+/**
+ * An internally used DataView for {@link Ext.form.field.ComboBox ComboBox}.
+ */
+Ext.define('Ext.view.BoundList', {
+    extend: 'Ext.view.View',
+    alias: 'widget.boundlist',
+    alternateClassName: 'Ext.BoundList',
+    requires: ['Ext.layout.component.BoundList', 'Ext.toolbar.Paging'],
+
+    /**
+     * @cfg {Number} [pageSize=0]
+     * If greater than `0`, a {@link Ext.toolbar.Paging} is displayed at the bottom of the list and store
+     * queries will execute with page {@link Ext.data.Operation#start start} and
+     * {@link Ext.data.Operation#limit limit} parameters.
+     */
+    pageSize: 0,
+    
+    /**
+     * @cfg {String} [displayField=""]
+     * The field from the store to show in the view.
+     */
+
+    /**
+     * @property {Ext.toolbar.Paging} pagingToolbar
+     * A reference to the PagingToolbar instance in this view. Only populated if {@link #pageSize} is greater
+     * than zero and the BoundList has been rendered.
+     */
+
+    // private overrides
+    baseCls: Ext.baseCSSPrefix + 'boundlist',
+    itemCls: Ext.baseCSSPrefix + 'boundlist-item',
+    listItemCls: '',
+    shadow: false,
+    trackOver: true,
+    refreshed: 0,
+    
+    // This Component is used as a popup, not part of a complex layout. Display data immediately.
+    deferInitialRefresh: false,
+
+    componentLayout: 'boundlist',
+
+    childEls: [
+        'listEl'
+    ],
+
+    renderTpl: [
+        '<div id="{id}-listEl" class="{baseCls}-list-ct" style="overflow:auto"></div>',
+        '{%',
+            'var me=values.$comp, pagingToolbar=me.pagingToolbar;',
+            'if (pagingToolbar) {',
+                'pagingToolbar.ownerLayout = me.componentLayout;',
+                'Ext.DomHelper.generateMarkup(pagingToolbar.getRenderTree(), out);',
+            '}',
+        '%}',
+        {
+            disableFormats: true
+        }
+    ],
+
+    /**
+     * @cfg {String/Ext.XTemplate} tpl
+     * A String or Ext.XTemplate instance to apply to inner template.
+     *
+     * {@link Ext.view.BoundList} is used for the dropdown list of {@link Ext.form.field.ComboBox}.
+     * To customize the template you can do this:
+     *
+     *     Ext.create('Ext.form.field.ComboBox', {
+     *         fieldLabel   : 'State',
+     *         queryMode    : 'local',
+     *         displayField : 'text',
+     *         valueField   : 'abbr',
+     *         store        : Ext.create('StateStore', {
+     *             fields : ['abbr', 'text'],
+     *             data   : [
+     *                 {"abbr":"AL", "name":"Alabama"},
+     *                 {"abbr":"AK", "name":"Alaska"},
+     *                 {"abbr":"AZ", "name":"Arizona"}
+     *                 //...
+     *             ]
+     *         }),
+     *         listConfig : {
+     *             tpl : '<tpl for="."><div class="x-boundlist-item">{abbr}</div></tpl>'
+     *         }
+     *     });
+     *
+     * Defaults to:
+     *
+     *     Ext.create('Ext.XTemplate',
+     *         '<ul><tpl for=".">',
+     *             '<li role="option" class="' + itemCls + '">' + me.getInnerTpl(me.displayField) + '</li>',
+     *         '</tpl></ul>'
+     *     );
+     *
+     */
+
+    initComponent: function() {
+        var me = this,
+            baseCls = me.baseCls,
+            itemCls = me.itemCls;
+            
+        me.selectedItemCls = baseCls + '-selected';
+        me.overItemCls = baseCls + '-item-over';
+        me.itemSelector = "." + itemCls;
+
+        if (me.floating) {
+            me.addCls(baseCls + '-floating');
+        }
+
+        if (!me.tpl) {
+            // should be setting aria-posinset based on entire set of data
+            // not filtered set
+            me.tpl = new Ext.XTemplate(
+                '<ul><tpl for=".">',
+                    '<li role="option" class="' + itemCls + '">' + me.getInnerTpl(me.displayField) + '</li>',
+                '</tpl></ul>'
+            );
+        } else if (Ext.isString(me.tpl)) {
+            me.tpl = new Ext.XTemplate(me.tpl);
+        }
+
+        if (me.pageSize) {
+            me.pagingToolbar = me.createPagingToolbar();
+        }
+
+        me.callParent();
+    },
+
+    /**
+     * @private
+     * Boundlist-specific implementation of the up ComponentQuery method.
+     * This links first to the owning input field so that the FocusManager, when receiving notification of a hide event,
+     * can find a focusable parent.
+     */
+    up: function(selector) {
+        var result = this.pickerField;
+        if (selector) {
+            for (; result; result = result.ownerCt) {
+                if (Ext.ComponentQuery.is(result, selector)) {
+                    return result;
+                }
+            }
+        }
+        return result;
+    },
+
+    createPagingToolbar: function() {
+        return Ext.widget('pagingtoolbar', {
+            id: this.id + '-paging-toolbar',
+            pageSize: this.pageSize,
+            store: this.store,
+            border: false
+        });
+    },
+
+    // Do the job of a container layout at this point even though we are not a Container.
+    // TODO: Refactor as a Container.
+    finishRenderChildren: function () {
+        var toolbar = this.pagingToolbar;
+
+        this.callParent(arguments);
+
+        if (toolbar) {
+            toolbar.finishRender();
+        }
+    },
+    
+    refresh: function(){
+        var me = this,
+            toolbar = me.pagingToolbar;
+        
+        me.callParent();
+        // The view removes the targetEl from the DOM before updating the template
+        // Ensure the toolbar goes to the end
+        if (me.rendered && toolbar && !me.preserveScrollOnRefresh) {
+            me.el.appendChild(toolbar.el);
+        }  
+    },
+
+    bindStore : function(store, initial) {
+        var toolbar = this.pagingToolbar;
+            
+        this.callParent(arguments);
+        if (toolbar) {
+            toolbar.bindStore(this.store, initial);
+        }
+    },
+
+    getTargetEl: function() {
+        return this.listEl || this.el;
+    },
+
+    /**
+     * A method that returns the inner template for displaying items in the list.
+     * This method is useful to override when using a more complex display value, for example
+     * inserting an icon along with the text.
+     * @param {String} displayField The {@link #displayField} for the BoundList.
+     * @return {String} The inner template
+     */
+    getInnerTpl: function(displayField) {
+        return '{' + displayField + '}';
+    },
+
+    onDestroy: function() {
+        Ext.destroyMembers(this, 'pagingToolbar', 'listEl');
+        this.callParent();
+    }
+});

data/app/assets/javascripts/extjs-rails/src/view/BoundListKeyNav.js

@@ -0,0 +1,92 @@
+/**
+ * A specialized {@link Ext.util.KeyNav} implementation for navigating a {@link Ext.view.BoundList} using
+ * the keyboard. The up, down, pageup, pagedown, home, and end keys move the active highlight
+ * through the list. The enter key invokes the selection model's select action using the highlighted item.
+ */
+Ext.define('Ext.view.BoundListKeyNav', {
+    extend: 'Ext.util.KeyNav',
+    requires: 'Ext.view.BoundList',
+
+    /**
+     * @cfg {Ext.view.BoundList} boundList (required)
+     * The {@link Ext.view.BoundList} instance for which key navigation will be managed.
+     */
+
+    constructor: function(el, config) {
+        var me = this;
+        me.boundList = config.boundList;
+        me.callParent([el, Ext.apply({}, config, me.defaultHandlers)]);
+    },
+
+    defaultHandlers: {
+        up: function() {
+            var me = this,
+                boundList = me.boundList,
+                allItems = boundList.all,
+                oldItem = boundList.highlightedItem,
+                oldItemIdx = oldItem ? boundList.indexOf(oldItem) : -1,
+                newItemIdx = oldItemIdx > 0 ? oldItemIdx - 1 : allItems.getCount() - 1; //wraps around
+            me.highlightAt(newItemIdx);
+        },
+
+        down: function() {
+            var me = this,
+                boundList = me.boundList,
+                allItems = boundList.all,
+                oldItem = boundList.highlightedItem,
+                oldItemIdx = oldItem ? boundList.indexOf(oldItem) : -1,
+                newItemIdx = oldItemIdx < allItems.getCount() - 1 ? oldItemIdx + 1 : 0; //wraps around
+            me.highlightAt(newItemIdx);
+        },
+
+        pageup: function() {
+            //TODO
+        },
+
+        pagedown: function() {
+            //TODO
+        },
+
+        home: function() {
+            this.highlightAt(0);
+        },
+
+        end: function() {
+            var me = this;
+            me.highlightAt(me.boundList.all.getCount() - 1);
+        },
+
+        enter: function(e) {
+            this.selectHighlighted(e);
+        }
+    },
+
+    /**
+     * Highlights the item at the given index.
+     * @param {Number} index
+     */
+    highlightAt: function(index) {
+        var boundList = this.boundList,
+            item = boundList.all.item(index);
+        if (item) {
+            item = item.dom;
+            boundList.highlightItem(item);
+            boundList.getTargetEl().scrollChildIntoView(item, false);
+        }
+    },
+
+    /**
+     * Triggers selection of the currently highlighted item according to the behavior of
+     * the configured SelectionModel.
+     */
+    selectHighlighted: function(e) {
+        var me = this,
+            boundList = me.boundList,
+            highlighted = boundList.highlightedItem,
+            selModel = boundList.getSelectionModel();
+        if (highlighted) {
+            selModel.selectWithEvent(boundList.getRecord(highlighted), e);
+        }
+    }
+
+});

data/app/assets/javascripts/extjs-rails/src/view/DragZone.js

@@ -0,0 +1,106 @@
+/**
+ * @private
+ */
+Ext.define('Ext.view.DragZone', {
+    extend: 'Ext.dd.DragZone',
+    containerScroll: false,
+
+    constructor: function(config) {
+        var me = this;
+
+        Ext.apply(me, config);
+
+        // Create a ddGroup unless one has been configured.
+        // User configuration of ddGroups allows users to specify which
+        // DD instances can interact with each other. Using one
+        // based on the id of the View would isolate it and mean it can only
+        // interact with a DropZone on the same View also using a generated ID.
+        if (!me.ddGroup) {
+            me.ddGroup = 'view-dd-zone-' + me.view.id;
+        }
+
+        // Ext.dd.DragDrop instances are keyed by the ID of their encapsulating element.
+        // So a View's DragZone cannot use the View's main element because the DropZone must use that
+        // because the DropZone may need to scroll on hover at a scrolling boundary, and it is the View's
+        // main element which handles scrolling.
+        // We use the View's parent element to drag from. Ideally, we would use the internal structure, but that
+        // is transient; DataView's recreate the internal structure dynamically as data changes.
+        // TODO: Ext 5.0 DragDrop must allow multiple DD objects to share the same element.
+        me.callParent([me.view.el.dom.parentNode]);
+
+        me.ddel = Ext.get(document.createElement('div'));
+        me.ddel.addCls(Ext.baseCSSPrefix + 'grid-dd-wrap');
+    },
+
+    init: function(id, sGroup, config) {
+        this.initTarget(id, sGroup, config);
+        this.view.mon(this.view, {
+            itemmousedown: this.onItemMouseDown,
+            scope: this
+        });
+    },
+
+    onItemMouseDown: function(view, record, item, index, e) {
+        if (!this.isPreventDrag(e, record, item, index)) {
+            this.handleMouseDown(e);
+
+            // If we want to allow dragging of multi-selections, then veto the following handlers (which, in the absence of ctrlKey, would deselect)
+            // if the mousedowned record is selected
+            if (view.getSelectionModel().selectionMode == 'MULTI' && !e.ctrlKey && view.getSelectionModel().isSelected(record)) {
+                return false;
+            }
+        }
+    },
+
+    // private template method
+    isPreventDrag: function(e) {
+        return false;
+    },
+
+    getDragData: function(e) {
+        var view = this.view,
+            item = e.getTarget(view.getItemSelector());
+
+        if (item) {
+            return {
+                copy: view.copy || (view.allowCopy && e.ctrlKey),
+                event: new Ext.EventObjectImpl(e),
+                view: view,
+                ddel: this.ddel,
+                item: item,
+                records: view.getSelectionModel().getSelection(),
+                fromPosition: Ext.fly(item).getXY()
+            };
+        }
+    },
+
+    onInitDrag: function(x, y) {
+        var me = this,
+            data = me.dragData,
+            view = data.view,
+            selectionModel = view.getSelectionModel(),
+            record = view.getRecord(data.item),
+            e = data.event;
+
+        // Update the selection to match what would have been selected if the user had
+        // done a full click on the target node rather than starting a drag from it
+        if (!selectionModel.isSelected(record) || e.hasModifier()) {
+            selectionModel.selectWithEvent(record, e, true);
+        }
+        data.records = selectionModel.getSelection();
+
+        me.ddel.update(me.getDragText());
+        me.proxy.update(me.ddel.dom);
+        me.onStartDrag(x, y);
+        return true;
+    },
+
+    getDragText: function() {
+        var count = this.dragData.records.length;
+        return Ext.String.format(this.dragText, count, count == 1 ? '' : 's');
+    },
+
+    getRepairXY : function(e, data){
+        return data ? data.fromPosition : false;
+    }
+});

data/app/assets/javascripts/extjs-rails/src/view/DropZone.js

@@ -0,0 +1,240 @@
+/**
+ * @private
+ */
+Ext.define('Ext.view.DropZone', {
+    extend: 'Ext.dd.DropZone',
+
+    indicatorHtml: '<div class="' + Ext.baseCSSPrefix + 'grid-drop-indicator-left"></div><div class="' + Ext.baseCSSPrefix + 'grid-drop-indicator-right"></div>',
+    indicatorCls: Ext.baseCSSPrefix + 'grid-drop-indicator',
+
+    constructor: function(config) {
+        var me = this;
+        Ext.apply(me, config);
+
+        // Create a ddGroup unless one has been configured.
+        // User configuration of ddGroups allows users to specify which
+        // DD instances can interact with each other. Using one
+        // based on the id of the View would isolate it and mean it can only
+        // interact with a DragZone on the same View also using a generated ID.
+        if (!me.ddGroup) {
+            me.ddGroup = 'view-dd-zone-' + me.view.id;
+        }
+
+        // The DropZone's encapsulating element is the View's main element. It must be this because drop gestures
+        // may require scrolling on hover near a scrolling boundary. In Ext 4.x two DD instances may not use the
+        // same element, so a DragZone on this same View must use the View's parent element as its element.
+        me.callParent([me.view.el]);
+    },
+
+//  Fire an event through the client DataView. Lock this DropZone during the event processing so that
+//  its data does not become corrupted by processing mouse events.
+    fireViewEvent: function() {
+        var me = this,
+            result;
+
+        me.lock();
+        result = me.view.fireEvent.apply(me.view, arguments);
+        me.unlock();
+        return result;
+    },
+
+    getTargetFromEvent : function(e) {
+        var node = e.getTarget(this.view.getItemSelector()),
+            mouseY, nodeList, testNode, i, len, box;
+
+//      Not over a row node: The content may be narrower than the View's encapsulating element, so return the closest.
+//      If we fall through because the mouse is below the nodes (or there are no nodes), we'll get an onContainerOver call.
+        if (!node) {
+            mouseY = e.getPageY();
+            for (i = 0, nodeList = this.view.getNodes(), len = nodeList.length; i < len; i++) {
+                testNode = nodeList[i];
+                box = Ext.fly(testNode).getBox();
+                if (mouseY <= box.bottom) {
+                    return testNode;
+                }
+            }
+        }
+        return node;
+    },
+
+    getIndicator: function() {
+        var me = this;
+
+        if (!me.indicator) {
+            me.indicator = new Ext.Component({
+                html: me.indicatorHtml,
+                cls: me.indicatorCls,
+                ownerCt: me.view,
+                floating: true,
+                shadow: false
+            });
+        }
+        return me.indicator;
+    },
+
+    getPosition: function(e, node) {
+        var y      = e.getXY()[1],
+            region = Ext.fly(node).getRegion(),
+            pos;
+
+        if ((region.bottom - y) >= (region.bottom - region.top) / 2) {
+            pos = "before";
+        } else {
+            pos = "after";
+        }
+        return pos;
+    },
+
+    /**
+     * @private Determines whether the record at the specified offset from the passed record
+     * is in the drag payload.
+     * @param records
+     * @param record
+     * @param offset
+     * @returns {Boolean} True if the targeted record is in the drag payload
+     */
+    containsRecordAtOffset: function(records, record, offset) {
+        if (!record) {
+            return false;
+        }
+        var view = this.view,
+            recordIndex = view.indexOf(record),
+            nodeBefore = view.getNode(recordIndex + offset),
+            recordBefore = nodeBefore ? view.getRecord(nodeBefore) : null;
+
+        return recordBefore && Ext.Array.contains(records, recordBefore);
+    },
+
+    positionIndicator: function(node, data, e) {
+        var me = this,
+            view = me.view,
+            pos = me.getPosition(e, node),
+            overRecord = view.getRecord(node),
+            draggingRecords = data.records,
+            indicatorY;
+
+        if (!Ext.Array.contains(draggingRecords, overRecord) && (
+            pos == 'before' && !me.containsRecordAtOffset(draggingRecords, overRecord, -1) ||
+            pos == 'after' && !me.containsRecordAtOffset(draggingRecords, overRecord, 1)
+        )) {
+            me.valid = true;
+
+            if (me.overRecord != overRecord || me.currentPosition != pos) {
+
+                indicatorY = Ext.fly(node).getY() - view.el.getY() - 1;
+                if (pos == 'after') {
+                    indicatorY += Ext.fly(node).getHeight();
+                }
+                me.getIndicator().setWidth(Ext.fly(view.el).getWidth()).showAt(0, indicatorY);
+
+                // Cache the overRecord and the 'before' or 'after' indicator.
+                me.overRecord = overRecord;
+                me.currentPosition = pos;
+            }
+        } else {
+            me.invalidateDrop();
+        }
+    },
+
+    invalidateDrop: function() {
+        if (this.valid) {
+            this.valid = false;
+            this.getIndicator().hide();
+        }
+    },
+
+    // The mouse is over a View node
+    onNodeOver: function(node, dragZone, e, data) {
+        var me = this;
+
+        if (!Ext.Array.contains(data.records, me.view.getRecord(node))) {
+            me.positionIndicator(node, data, e);
+        }
+        return me.valid ? me.dropAllowed : me.dropNotAllowed;
+    },
+
+    // Moved out of the DropZone without dropping.
+    // Remove drop position indicator
+    notifyOut: function(node, dragZone, e, data) {
+        var me = this;
+
+        me.callParent(arguments);
+        delete me.overRecord;
+        delete me.currentPosition;
+        if (me.indicator) {
+            me.indicator.hide();
+        }
+    },
+
+    // The mouse is past the end of all nodes (or there are no nodes)
+    onContainerOver : function(dd, e, data) {
+        var me = this,
+            view = me.view,
+            count = view.store.getCount();
+
+        // There are records, so position after the last one
+        if (count) {
+            me.positionIndicator(view.getNode(count - 1), data, e);
+        }
+
+        // No records, position the indicator at the top
+        else {
+            delete me.overRecord;
+            delete me.currentPosition;
+            me.getIndicator().setWidth(Ext.fly(view.el).getWidth()).showAt(0, 0);
+            me.valid = true;
+        }
+        return me.dropAllowed;
+    },
+
+    onContainerDrop : function(dd, e, data) {
+        return this.onNodeDrop(dd, null, e, data);
+    },
+
+    onNodeDrop: function(node, dragZone, e, data) {
+        var me = this,
+            dropHandled = false,
+ 
+            // Create a closure to perform the operation which the event handler may use.
+            // Users may now set the wait parameter in the beforedrop handler, and perform any kind
+            // of asynchronous processing such as an Ext.Msg.confirm, or an Ajax request,
+            // and complete the drop gesture at some point in the future by calling either the
+            // processDrop or cancelDrop methods.
+            dropHandlers = {
+                wait: false,
+                processDrop: function () {
+                    me.invalidateDrop();
+                    me.handleNodeDrop(data, me.overRecord, me.currentPosition);
+                    dropHandled = true;
+                    me.fireViewEvent('drop', node, data, me.overRecord, me.currentPosition);
+                },
+ 
+                cancelDrop: function() {
+                    me.invalidateDrop();
+                    dropHandled = true;
+                }
+            },
+            performOperation = false;
+ 
+        if (me.valid) {
+            performOperation = me.fireViewEvent('beforedrop', node, data, me.overRecord, me.currentPosition, dropHandlers);
+            if (dropHandlers.wait) {
+                return;
+            }
+ 
+            if (performOperation !== false) {
+                // If either of the drop handlers were called in the event handler, do not do it again.
+                if (!dropHandled) {
+                    dropHandlers.processDrop();
+                }
+            }
+        }
+        return performOperation;
+    },
+    
+    destroy: function(){
+        Ext.destroy(this.indicator);
+        delete this.indicator;
+        this.callParent();
+    }
+});