extjs-rails 4.1.0.alpha1

data/app/assets/javascripts/extjs-rails/src/grid/LockingView.js

@@ -0,0 +1,169 @@
+/**
+ * This class is used internally to provide a single interface when using
+ * a locking grid. Internally, the locking grid creates two separate grids,
+ * so this class is used to map calls appropriately.
+ * @private
+ */
+Ext.define('Ext.grid.LockingView', {
+
+    mixins: {
+        observable: 'Ext.util.Observable'
+    },
+
+    eventRelayRe: /^(beforeitem|beforecontainer|item|container|cell)/,
+
+    constructor: function(config){
+        var me = this,
+            eventNames = [],
+            eventRe = me.eventRelayRe,
+            locked = config.locked.getView(),
+            normal = config.normal.getView(),
+            events,
+            event;
+
+        Ext.apply(me, {
+            lockedView: locked,
+            normalView: normal,
+            lockedGrid: config.locked,
+            normalGrid: config.normal,
+            panel: config.panel
+        });
+        me.mixins.observable.constructor.call(me, config);
+
+        // relay events
+        events = locked.events;
+        for (event in events) {
+            if (events.hasOwnProperty(event) && eventRe.test(event)) {
+                eventNames.push(event);
+            }
+        }
+        me.relayEvents(locked, eventNames);
+        me.relayEvents(normal, eventNames);
+
+        normal.on({
+            scope: me,
+            itemmouseleave: me.onItemMouseLeave,
+            itemmouseenter: me.onItemMouseEnter
+        });
+
+        locked.on({
+            scope: me,
+            itemmouseleave: me.onItemMouseLeave,
+            itemmouseenter: me.onItemMouseEnter
+        });
+    },
+
+    getGridColumns: function() {
+        var cols = this.lockedGrid.headerCt.getGridColumns();
+        return cols.concat(this.normalGrid.headerCt.getGridColumns());
+    },
+
+    getEl: function(column){
+        return this.getViewForColumn(column).getEl();
+    },
+
+    getViewForColumn: function(column) {
+        var view = this.lockedView,
+            inLocked;
+
+        view.headerCt.cascade(function(col){
+            if (col === column) {
+                inLocked = true;
+                return false;
+            }
+        });
+
+        return inLocked ? view : this.normalView;
+    },
+
+    onItemMouseEnter: function(view, record){
+        var me = this,
+            locked = me.lockedView,
+            other = me.normalView,
+            item;
+
+        if (view.trackOver) {
+            if (view !== locked) {
+                other = locked;
+            }
+            item = other.getNode(record);
+            other.highlightItem(item);
+        }
+    },
+
+    onItemMouseLeave: function(view, record){
+        var me = this,
+            locked = me.lockedView,
+            other = me.normalView;
+
+        if (view.trackOver) {
+            if (view !== locked) {
+                other = locked;
+            }
+            other.clearHighlight();
+        }
+    },
+
+    relayFn: function(name, args){
+        args = args || [];
+
+        var view = this.lockedView;
+        view[name].apply(view, args || []);
+        view = this.normalView;
+        view[name].apply(view, args || []);
+    },
+
+    getSelectionModel: function(){
+        return this.panel.getSelectionModel();
+    },
+
+    getStore: function(){
+        return this.panel.store;
+    },
+
+    getNode: function(nodeInfo){
+        // default to the normal view
+        return this.normalView.getNode(nodeInfo);
+    },
+
+    getCell: function(record, column){
+        var view = this.getViewForColumn(column),
+            row;
+
+        row = view.getNode(record);
+        return Ext.fly(row).down(column.getCellSelector());
+    },
+
+    getRecord: function(node){
+        var result = this.lockedView.getRecord(node);
+        if (!node) {
+            result = this.normalView.getRecord(node);
+        }
+        return result;
+    },
+
+    addElListener: function(eventName, fn, scope){
+        this.relayFn('addElListener', arguments);
+    },
+
+    refreshNode: function(){
+        this.relayFn('refreshNode', arguments);
+    },
+
+    refresh: function(){
+        this.relayFn('refresh', arguments);
+    },
+
+    bindStore: function(){
+        this.relayFn('bindStore', arguments);
+    },
+
+    addRowCls: function(){
+        this.relayFn('addRowCls', arguments);
+    },
+
+    removeRowCls: function(){
+        this.relayFn('removeRowCls', arguments);
+    }
+
+});

data/app/assets/javascripts/extjs-rails/src/grid/PagingScroller.js

@@ -0,0 +1,539 @@
+/**
+ * This class monitors scrolling of the {@link Ext.view.Table TableView} within a
+ * {@link Ext.grid.Panel GridPanel} which is using a buffered store to only cache
+ * and render a small section of a very large dataset.
+ *
+ * The GridPanel will instantiate this to perform monitoring, this class should
+ * never be instantiated by user code.
+ */
+Ext.define('Ext.grid.PagingScroller', {
+
+    /**
+     * @cfg
+     * @deprecated This config is now ignored.
+     */
+    percentageFromEdge: 0.35,
+
+    /**
+     * @cfg
+     * The zone which causes a refresh of the rendered viewport. As soon as the edge
+     * of the rendered grid is this number of rows from the edge of the viewport, the view is moved.
+     */
+    numFromEdge: 2,
+
+    /**
+     * @cfg
+     * The number of extra rows to render on the trailing side of scrolling
+     * **outside the {@link #numFromEdge}** buffer as scrolling proceeds.
+     */
+    trailingBufferZone: 5,
+
+    /**
+     * @cfg
+     * The number of extra rows to render on the leading side of scrolling
+     * **outside the {@link #numFromEdge}** buffer as scrolling proceeds.
+     */
+    leadingBufferZone: 15,
+
+    /**
+     * @cfg
+     * This is the time in milliseconds to buffer load requests when scrolling the PagingScrollbar.
+     */
+    scrollToLoadBuffer: 200,
+
+    // private. Initial value of zero.
+    viewSize: 0,
+    // private. Start at default value
+    rowHeight: 21,
+    // private. Table extent at startup time
+    tableStart: 0,
+    tableEnd: 0,
+
+    constructor: function(config) {
+        var me = this;
+        me.variableRowHeight = config.variableRowHeight;
+        me.bindView(config.view);
+        Ext.apply(me, config);
+        me.callParent(arguments);
+    },
+
+    bindView: function(view) {
+        var me = this,
+            viewListeners = {
+                scroll: {
+                    fn: me.onViewScroll,
+                    element: 'el',
+                    scope: me
+                },
+                render: me.onViewRender,
+                resize: me.onViewResize,
+                boxready: {
+                    fn: me.onViewResize,
+                    scope: me,
+                    single: true
+                },
+                refresh: me.onViewRefresh,
+                scope: me
+            },
+            storeListeners = {
+                guaranteedrange: me.onGuaranteedRange,
+                scope: me
+            },
+            gridListeners = {
+                reconfigure: me.onGridReconfigure,
+                scope: me
+            };
+
+        // If there are variable row heights, then in beforeRefresh, we have to find a common
+        // row so that we can synchronize the table's top position after the refresh
+        if (me.variableRowHeight) {
+            viewListeners.beforerefresh = me.beforeViewRefresh;
+        }
+
+        // If we need unbinding...
+        if (me.view) {
+            me.view.el.un('scroll', me.onViewScroll, me); // un does not understand the element options
+            me.view.un(viewListeners);
+            me.store.un(storeListeners);
+            if (me.grid) {
+                me.grid.un(gridListeners);
+            }
+            delete me.view.refreshSize; // Remove the injected refreshSize implementation
+        }
+
+        me.view = view;
+        me.grid = me.view.up('tablepanel');
+        me.store = view.store;
+        if (view.rendered) {
+            me.viewSize = me.store.viewSize = Math.ceil(view.getHeight() / me.rowHeight) + me.trailingBufferZone + (me.numFromEdge * 2) + me.leadingBufferZone;
+        }
+
+        // During scrolling we do not need to refresh the height - the Grid height must be set by config or layout in order to create a scrollable
+        // table just larger than that, so removing the layout call improves efficiency and removes the flicker when the
+        // HeaderContainer is reset to scrollLeft:0, and then resynced on the very next "scroll" event.
+        me.view.refreshSize = Ext.Function.createInterceptor(me.view.refreshSize, me.beforeViewrefreshSize, me);
+
+        /**
+         * @property {Number} position
+         * Current pixel scroll position of the associated {@link Ext.view.Table View}.
+         */
+        me.position = 0;
+
+        // We are created in View constructor. There won't be an ownerCt at this time.
+        if (me.grid) {
+            me.grid.on(gridListeners);
+        } else {
+            me.view.on({
+                added: function() {
+                    me.grid = me.view.up('tablepanel');
+                    me.grid.on(gridListeners);
+                },
+                single: true
+            });
+        }
+
+        me.view.on(me.viewListeners = viewListeners);
+        me.store.on(storeListeners);
+    },
+
+    onGridReconfigure: function (grid) {
+        this.bindView(grid.view);
+    },
+
+    // Ensure that the stretcher element is inserted into the View as the first element.
+    onViewRender: function() {
+        var me = this,
+            el = me.view.el;
+
+        el.setStyle('position', 'relative');
+        me.stretcher = el.createChild({
+            style:{
+                position: 'absolute',
+                width: '1px',
+                height: 0,
+                top: 0,
+                left: 0
+            }
+        }, el.dom.firstChild);
+    },
+
+    onViewResize: function(view, width, height) {
+        var me = this,
+            newViewSize;
+
+        newViewSize = Math.ceil(height / me.rowHeight) + me.trailingBufferZone + (me.numFromEdge * 2) + me.leadingBufferZone;
+        if (newViewSize > me.viewSize) {
+            me.viewSize = me.store.viewSize = newViewSize;
+            me.handleViewScroll(me.lastScrollDirection || 1);
+        }
+    },
+
+    // Used for variable row heights. Try to find the offset from scrollTop of a common row
+    beforeViewRefresh: function() {
+        var me = this,
+            view = me.view,
+            rows,
+            direction = me.lastScrollDirection;
+
+        me.commonRecordIndex = undefined;
+
+        // If we are refreshing in response to a scroll,
+        // And we know where the previous start was,
+        // and we're not teleporting out of visible range
+        if (direction && (me.previousStart !== undefined) && (me.scrollProportion === undefined)) {
+            rows = view.getNodes();
+
+            // We have scrolled downwards
+            if (direction === 1) {
+
+                // If the ranges overlap, we are going to be able to position the table exactly
+                if (me.tableStart <= me.previousEnd) {
+                    me.commonRecordIndex = rows.length - 1;
+
+                }
+            }
+            // We have scrolled upwards
+            else if (direction === -1) {
+
+                // If the ranges overlap, we are going to be able to position the table exactly
+                if (me.tableEnd >= me.previousStart) {
+                    me.commonRecordIndex = 0;
+                }
+            }
+            // Cache the old offset of the common row from the scrollTop
+            me.scrollOffset = -view.el.getOffsetsTo(rows[me.commonRecordIndex])[1];
+
+            // In the new table the common row is at a different index
+            me.commonRecordIndex -= (me.tableStart - me.previousStart);
+        } else {
+            me.scrollOffset = undefined;
+        }
+    },
+
+    // Used for variable row heights. Try to find the offset from scrollTop of a common row
+    // Ensure, upon each refresh, that the stretcher element is the correct height
+    onViewRefresh: function() {
+        var me = this,
+            store = me.store,
+            newScrollHeight,
+            view = me.view,
+            viewEl = view.el,
+            viewDom = viewEl.dom,
+            rows,
+            newScrollOffset,
+            scrollDelta,
+            table = viewEl.child('table', true),
+            tableTop,
+            scrollTop;
+
+        // Scroll events caused by processing in here must be ignored, so disable for the duration
+        me.disabled = true;
+
+        // No scroll monitoring is needed if
+        //    All data is in view OR
+        //  Store is filtered locally.
+        //    - scrolling a locally filtered page is obv a local operation within the context of a huge set of pages 
+        //      so local scrolling is appropriate.
+        if (store.getCount() === store.getTotalCount() || (store.isFiltered() && !store.remoteFilter)) {
+            me.stretcher.setHeight(0);
+            me.position = viewDom.scrollTop = 0;
+
+            // Chrome's scrolling went crazy upon zeroing of the stretcher, and left the view's scrollTop stuck at -15
+            // This is the only thing that fixes that
+            table.style.position = 'absolute';
+
+            // We remain disabled now because no scrolling is needed - we have the full dataset in the Store
+            return;
+        }
+
+        me.stretcher.setHeight(newScrollHeight = me.getScrollHeight());
+
+        scrollTop = viewDom.scrollTop;
+
+        // Flag to the refreshSize interceptor that regular refreshSize postprocessing should be vetoed.
+        me.isScrollRefresh = (scrollTop > 0);
+
+        // If we have had to calculate the store position from the pure scroll bar position,
+        // then we must calculate the table's vertical position from the scrollProportion
+        if (me.scrollProportion !== undefined) {
+            me.scrollProportion = scrollTop / (newScrollHeight - table.offsetHeight);
+            table.style.position = 'absolute';
+            table.style.top = (me.scrollProportion ? (newScrollHeight * me.scrollProportion) - (table.offsetHeight * me.scrollProportion) : 0) + 'px';
+        }
+        else {
+            table.style.position = 'absolute';
+            table.style.top = (tableTop = (me.tableStart||0) * me.rowHeight) + 'px';
+
+            // ScrollOffset to a common row was calculated in beforeViewRefresh, so we can synch table position with how it was before
+            if (me.scrollOffset) {
+                rows = view.getNodes();
+                newScrollOffset = -viewEl.getOffsetsTo(rows[me.commonRecordIndex])[1];
+                scrollDelta = newScrollOffset - me.scrollOffset;
+                me.position = (scrollTop += scrollDelta);
+            }
+
+            // If the table is not fully in view view, scroll to where it is in view.
+            // This will happen when the page goes out of view unexpectedly, outside the
+            // control of the PagingScroller. For example, a refresh caused by a remote sort or filter reverting
+            // back to page 1.
+            // Note that with buffered Stores, only remote sorting is allowed, otherwise the locally
+            // sorted page will be out of order with the whole dataset.
+            else if ((tableTop > scrollTop) || ((tableTop + table.offsetHeight) < scrollTop + viewDom.clientHeight)) {
+                me.lastScrollDirection = -1;
+                me.position = viewDom.scrollTop = tableTop;
+            }
+        }
+
+        // Re-enable upon function exit
+        me.disabled = false;
+    },
+
+    beforeViewrefreshSize: function() {
+        // Veto the refreshSize if the refresh is due to a scroll.
+        if (this.isScrollRefresh) {
+            return (this.isScrollRefresh = false);
+        }
+    },
+
+    onGuaranteedRange: function(range, start, end) {
+        var me = this,
+            ds = me.store;
+
+        // this should never happen
+        if (range.length && me.visibleStart < range[0].index) {
+            return;
+        }
+
+        // Cache last table position in dataset so that if we are using variableRowHeight,
+        // we can attempt to locate a common row to align the table on.
+        me.previousStart = me.tableStart;
+        me.previousEnd = me.tableEnd;
+
+        me.tableStart = start;
+        me.tableEnd = end;
+        ds.loadRecords(range);
+    },
+
+    onViewScroll: function(e, t) {
+        var me = this,
+            view = me.view,
+            lastPosition = me.position;
+
+        me.position = view.el.dom.scrollTop;
+
+        // Only check for nearing the edge if we are enabled.
+        // If there is no paging to be done (Store's dataset is all in memory) we will be disabled.
+        if (!me.disabled) {
+            me.lastScrollDirection = me.position > lastPosition ? 1 : -1;
+            // Check the position so we ignore horizontal scrolling
+            if (lastPosition !== me.position) {
+                me.handleViewScroll(me.lastScrollDirection);
+            }
+        }
+    },
+
+    handleViewScroll: function(direction) {
+        var me                = this,
+            store             = me.store,
+            view              = me.view,
+            viewSize          = me.viewSize,
+            totalCount        = store.getTotalCount(),
+            highestStartPoint = totalCount - viewSize,
+            visibleStart      = me.getFirstVisibleRowIndex(),
+            visibleEnd        = me.getLastVisibleRowIndex(),
+            requestStart,
+            requestEnd;
+
+        // Only process if the total rows is larger than the visible page size
+        if (totalCount >= viewSize) {
+
+            // This is only set if we are using variable row height, and the thumb is dragged so that
+            // There are no remaining visible rows to vertically anchor the new table to.
+            // In this case we use the scrollProprtion to anchor the table to the correct relative
+            // position on the vertical axis.
+            me.scrollProportion = undefined;
+
+            // We're scrolling up
+            if (direction == -1) {
+                if (visibleStart !== undefined) {
+                    if (visibleStart < (me.tableStart + me.numFromEdge)) {
+                        requestStart = Math.max(0, visibleEnd + me.trailingBufferZone - viewSize);
+                    }
+                }
+
+                // The only way we can end up without a visible start is if, in variableRowHeight mode, the user drags
+                // the thumb up out of the visible range. In this case, we have to estimate the start row index
+                else {
+                    // If we have no visible rows to orientate with, then use the scroll proportion
+                    me.scrollProportion = view.el.dom.scrollTop / (view.el.dom.scrollHeight - view.el.dom.clientHeight);
+                    requestStart = Math.max(0, totalCount * me.scrollProportion - (viewSize / 2) - me.numFromEdge - ((me.leadingBufferZone + me.trailingBufferZone) / 2));
+                }
+            }
+            // We're scrolling down
+            else {
+                if (visibleStart !== undefined) {
+                    if (visibleEnd > (me.tableEnd - me.numFromEdge)) {
+                        requestStart = Math.max(0, visibleStart - me.trailingBufferZone);
+                    }
+                }
+
+                // The only way we can end up without a visible end is if, in variableRowHeight mode, the user drags
+                // the thumb down out of the visible range. In this case, we have to estimate the start row index
+                else {
+                    // If we have no visible rows to orientate with, then use the scroll proportion
+                    me.scrollProportion = view.el.dom.scrollTop / (view.el.dom.scrollHeight - view.el.dom.clientHeight);
+                    requestStart = totalCount * me.scrollProportion - (viewSize / 2) - me.numFromEdge - ((me.leadingBufferZone + me.trailingBufferZone) / 2);
+                }
+            }
+
+            // We scrolled close to the edge and the Store needs reloading
+            if (requestStart !== undefined) {
+                // The calculation walked off the end; Request the highest possible chunk which starts on an even row count (Because of row striping)
+                if (requestStart > highestStartPoint) {
+                    requestStart = highestStartPoint & ~1;
+                    requestEnd = totalCount - 1;
+                }
+                // Make sure first row is even to ensure correct even/odd row striping
+                else {
+                    requestStart = requestStart & ~1;
+                    requestEnd = requestStart + viewSize - 1;
+                }
+
+                // If range is satsfied within the prefetch buffer, then just draw it from the prefetch buffer
+                if (store.rangeCached(requestStart, requestEnd)) {
+                    me.cancelLoad();
+                    store.guaranteeRange(requestStart, requestEnd);
+                }
+
+                // Required range is not in the prefetch buffer. Ask the store to prefetch it.
+                // We will recieve a guaranteedrange event when that is done.
+                else {
+                    me.attemptLoad(requestStart, requestEnd);
+                }
+            }
+        }
+    },
+
+    getFirstVisibleRowIndex: function() {
+        var me = this,
+            store = me.store,
+            view = me.view,
+            scrollTop = view.el.dom.scrollTop,
+            rows,
+            count,
+            i,
+            rowBottom;
+
+        if (me.variableRowHeight) {
+            rows = view.getNodes();
+            count = store.getCount();
+            for (i = 0; i < count; i++) {
+                rowBottom = Ext.fly(rows[i]).getOffsetsTo(view.el)[1] + rows[i].offsetHeight;
+
+                // Searching for the first visible row, and off the bottom of the clientArea, then there's no visible first row!
+                if (rowBottom > view.el.dom.clientHeight) {
+                    return;
+                }
+
+                if (rowBottom > 0) {
+                    return i + me.tableStart;
+                }
+            }
+        } else {
+            return Math.floor(scrollTop / me.rowHeight);
+        }
+    },
+
+    getLastVisibleRowIndex: function() {
+        var me = this,
+            store = me.store,
+            view = me.view,
+            clientHeight = view.el.dom.clientHeight,
+            rows,
+            count,
+            i,
+            rowTop;
+
+        if (me.variableRowHeight) {
+            rows = view.getNodes();
+            count = store.getCount();
+            for (i = count - 1; i >= 0; i--) {
+                rowTop = Ext.fly(rows[i]).getOffsetsTo(view.el)[1];
+
+                // Searching for the last visible row, and off the top of the clientArea, then there's no visible last row!
+                if (rowTop < 0) {
+                    return;
+                }
+                if (rowTop < clientHeight) {
+                    return i + me.tableStart;
+                }
+            }
+        } else {
+            return me.getFirstVisibleRowIndex() + Math.ceil(clientHeight / me.rowHeight) + 1;
+        }
+    },
+
+    getScrollHeight: function() {
+        var me = this,
+            view   = me.view,
+            table,
+            firstRow,
+            store  = me.store,
+            deltaHeight = 0,
+            doCalcHeight = !me.hasOwnProperty('rowHeight');
+
+        if (me.variableRowHeight) {
+            table = me.view.el.down('table', true);
+            if (doCalcHeight) {
+                me.initialTableHeight = table.offsetHeight;
+                me.rowHeight = me.initialTableHeight / me.store.getCount();
+            } else {
+                deltaHeight = table.offsetHeight - me.initialTableHeight;
+            }
+        } else if (doCalcHeight) {
+            firstRow = view.el.down(view.getItemSelector());
+            if (firstRow) {
+                me.rowHeight = firstRow.getHeight(false, true);
+            }
+        }
+
+        return Math.floor(store.getTotalCount() * me.rowHeight) + deltaHeight;
+    },
+
+    attemptLoad: function(start, end) {
+        var me = this;
+        if (me.scrollToLoadBuffer) {
+            if (!me.loadTask) {
+                me.loadTask = new Ext.util.DelayedTask(me.doAttemptLoad, me, []);
+            }
+            me.loadTask.delay(me.scrollToLoadBuffer, me.doAttemptLoad, me, [start, end]);
+        } else {
+            me.store.guaranteeRange(start, end);
+        }
+    },
+
+    cancelLoad: function() {
+        if (this.loadTask) {
+            this.loadTask.cancel();
+        }
+    },
+
+    doAttemptLoad:  function(start, end) {
+        this.store.guaranteeRange(start, end);
+    },
+
+    destroy: function() {
+        var me = this,
+            scrollListener = me.viewListeners.scroll;
+
+        me.store.un({
+            guaranteedrange: me.onGuaranteedRange,
+            scope: me
+        });
+        me.view.un(me.viewListeners);
+        if (me.view.rendered) {
+            me.stretcher.remove();
+            me.view.el.un('scroll', scrollListener.fn, scrollListener.scope);
+        }
+    }
+});