extjs-rails 4.1.0.alpha1

data/app/assets/javascripts/extjs-rails/src/fx/target/Target.js

@@ -0,0 +1,36 @@
+/**
+ * @class Ext.fx.target.Target
+
+This class specifies a generic target for an animation. It provides a wrapper around a
+series of different types of objects to allow for a generic animation API.
+A target can be a single object or a Composite object containing other objects that are 
+to be animated. This class and it's subclasses are generally not created directly, the 
+underlying animation will create the appropriate Ext.fx.target.Target object by passing 
+the instance to be animated.
+
+The following types of objects can be animated:
+
+- {@link Ext.fx.target.Component Components}
+- {@link Ext.fx.target.Element Elements}
+- {@link Ext.fx.target.Sprite Sprites}
+
+ * @markdown
+ * @abstract
+ */
+Ext.define('Ext.fx.target.Target', {
+
+    isAnimTarget: true,
+
+    /**
+     * Creates new Target.
+     * @param {Ext.Component/Ext.Element/Ext.draw.Sprite} target The object to be animated
+     */
+    constructor: function(target) {
+        this.target = target;
+        this.id = this.getId();
+    },
+    
+    getId: function() {
+        return this.target.id;
+    }
+});

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

@@ -0,0 +1,172 @@
+/**
+ * Internal utility class that provides default configuration for cell editing.
+ * @private
+ */
+Ext.define('Ext.grid.CellEditor', {
+    extend: 'Ext.Editor',
+    constructor: function(config) {
+        config = Ext.apply({}, config);
+        
+        if (config.field) {
+            config.field.monitorTab = false;
+        }
+        this.callParent([config]);
+    },
+    
+    /**
+     * @private
+     * Hide the grid cell text when editor is shown.
+     *
+     * There are 2 reasons this needs to happen:
+     *
+     * 1. checkbox editor does not take up enough space to hide the underlying text.
+     *
+     * 2. When columnLines are turned off in browsers that don't support text-overflow:
+     *    ellipsis (firefox 6 and below and IE quirks), the text extends to the last pixel
+     *    in the cell, however the right border of the cell editor is always positioned 1px
+     *    offset from the edge of the cell (to give it the appearance of being "inside" the
+     *    cell.  This results in 1px of the underlying cell text being visible to the right
+     *    of the cell editor if the text is not hidden.
+     * 
+     * We can't just hide the entire cell, because then treecolumn's icons would be hidden
+     * as well.  We also can't just set "color: transparent" to hide the text because it is
+     * not supported by IE8 and below.  The only remaining solution is to remove the text
+     * from the text node and then add it back when the editor is hidden.
+     */
+    onShow: function() {
+        var me = this,
+            innerCell = me.boundEl.first(),
+            lastChild,
+            textNode;
+
+        if (innerCell) {
+            lastChild = innerCell.dom.lastChild;
+            if(lastChild && lastChild.nodeType === 3) {
+                // if the cell has a text node, save a reference to it
+                textNode = me.cellTextNode = innerCell.dom.lastChild;
+                // save the cell text so we can add it back when we're done editing
+                me.cellTextValue = textNode.nodeValue;
+                // The text node has to have at least one character in it, or the cell borders
+                // in IE quirks mode will not show correctly, so let's use a non-breaking space.
+                textNode.nodeValue = '\u00a0';
+            }
+        }
+        me.callParent(arguments);
+    },
+
+    /**
+     * @private
+     * Show the grid cell text when the editor is hidden by adding the text back to the text node
+     */
+    onHide: function() {
+        var me = this,
+            innerCell = me.boundEl.first();
+
+        if (innerCell && me.cellTextNode) {
+            me.cellTextNode.nodeValue = me.cellTextValue;
+            delete me.cellTextNode;
+            delete me.cellTextValue;
+        }
+        me.callParent(arguments);
+    },
+
+    /**
+     * @private
+     * Fix checkbox blur when it is clicked.
+     */
+    afterRender: function() {
+        var me = this,
+            field = me.field;
+
+        me.callParent(arguments);
+        if (field.isXType('checkboxfield')) {
+            field.mon(field.inputEl, {
+                mousedown: me.onCheckBoxMouseDown,
+                click: me.onCheckBoxClick,
+                scope: me
+            });
+        }
+    },
+    
+    /**
+     * @private
+     * Because when checkbox is clicked it loses focus  completeEdit is bypassed.
+     */
+    onCheckBoxMouseDown: function() {
+        this.completeEdit = Ext.emptyFn;
+    },
+    
+    /**
+     * @private
+     * Restore checkbox focus and completeEdit method.
+     */
+    onCheckBoxClick: function() {
+        delete this.completeEdit;
+        this.field.focus(false, 10);
+    },
+    
+    /**
+     * @private
+     * Realigns the Editor to the grid cell, or to the text node in the grid inner cell
+     * if the inner cell contains multiple child nodes.
+     */
+    realign: function(autoSize) {
+        var me = this,
+            boundEl = me.boundEl,
+            innerCell = boundEl.first(),
+            children = innerCell.dom.childNodes,
+            childCount = children.length,
+            offsets = Ext.Array.clone(me.offsets),
+            inputEl = me.field.inputEl,
+            lastChild, leftBound, rightBound, width;
+
+        // If the inner cell has more than one child, or the first child node is not a text node,
+        // let's assume this cell contains additional elements before the text node.
+        // This is the case for tree cells, but could also be used to accomodate grid cells that
+        // have a custom renderer that render, say, an icon followed by some text for example
+        // For now however, this support will only be used for trees.
+        if(me.isForTree && (childCount > 1 || (childCount === 1 && children[0].nodeType !== 3))) {
+            // get the inner cell's last child
+            lastChild = innerCell.last();
+            // calculate the left bound of the text node
+            leftBound = lastChild.getOffsetsTo(innerCell)[0] + lastChild.getWidth();
+            // calculate the right bound of the text node (this is assumed to be the right edge of
+            // the inner cell, since we are assuming the text node is always the last node in the
+            // inner cell)
+            rightBound = innerCell.getWidth();
+            // difference between right and left bound is the text node's allowed "width",
+            // this will be used as the width for the editor.
+            width = rightBound - leftBound;
+            // adjust width for column lines - this ensures the editor will be the same width
+            // regardless of columLines config
+            if(!me.editingPlugin.grid.columnLines) {
+                width --;
+            }
+            // set the editor's x offset to the left bound position
+            offsets[0] += leftBound;
+
+            me.addCls(Ext.baseCSSPrefix + 'grid-editor-on-text-node');
+        } else {
+            width = boundEl.getWidth() - 1;
+        }
+
+        if (autoSize === true) {
+            me.field.setWidth(width);
+        }
+
+        me.alignTo(boundEl, me.alignment, offsets);
+    },
+    
+    onEditorTab: function(e){
+        var field = this.field;
+        if (field.onEditorTab) {
+            field.onEditorTab(e);
+        }
+    },
+
+    alignment: "tl-tl",
+    hideEl : false,
+    cls: Ext.baseCSSPrefix + "small-editor " + Ext.baseCSSPrefix + "grid-editor",
+    shim: false,
+    shadow: false
+});

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

@@ -0,0 +1,34 @@
+/**
+ * Component layout for grid column headers which have a title element at the top followed by content.
+ * @private
+ */
+Ext.define('Ext.grid.ColumnComponentLayout', {
+    extend: 'Ext.layout.component.Auto',
+    alias: 'layout.columncomponent',
+
+    type: 'columncomponent',
+
+    setWidthInDom: true,
+
+    getContentHeight : function(ownerContext) {
+        // If we are a group header return container layout's contentHeight, else default to AutoComponent's answer
+        return this.owner.isGroupHeader ? ownerContext.getProp('contentHeight') : this.callParent(arguments);
+    },
+
+    calculateOwnerHeightFromContentHeight: function (ownerContext, contentHeight) {
+        var result = this.callParent(arguments);
+        if (this.owner.isGroupHeader) {
+            result += this.owner.titleEl.dom.offsetHeight;
+        }
+        return result;
+    },
+    
+    getContentWidth : function(ownerContext) {
+        // If we are a group header return container layout's contentHeight, else default to AutoComponent's answer
+        return this.owner.isGroupHeader ? ownerContext.getProp('contentWidth') : this.callParent(arguments);
+    },
+
+    calculateOwnerWidthFromContentWidth: function (ownerContext, contentWidth) {
+        return contentWidth + ownerContext.getPaddingInfo().width;
+    }
+});

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

@@ -0,0 +1,201 @@
+/**
+ * @private
+ *
+ * This class is used only by the grid's HeaderContainer docked child.
+ *
+ * It adds the ability to shrink the vertical size of the inner container element back if a grouped
+ * column header has all its child columns dragged out, and the whole HeaderContainer needs to shrink back down.
+ *
+ * Also, after every layout, after all headers have attained their 'stretchmax' height, it goes through and calls
+ * `setPadding` on the columns so that they lay out correctly.
+ */
+Ext.define('Ext.grid.ColumnLayout', {
+    extend: 'Ext.layout.container.HBox',
+    alias: 'layout.gridcolumn',
+    type : 'gridcolumn',
+
+    reserveOffset: false,
+
+    firstHeaderCls: Ext.baseCSSPrefix + 'column-header-first',
+    lastHeaderCls: Ext.baseCSSPrefix + 'column-header-last',
+
+    // Collect the height of the table of data upon layout begin
+    beginLayout: function (ownerContext) {
+        var me = this,
+            owner = me.owner,
+            grid = owner.up('[scrollerOwner]'),
+            view = grid.view,
+            i = 0,
+            items = me.getVisibleItems(),
+            len = items.length,
+            item;
+
+        // If we are one side of a locking grid, then if we are on the "normal" side, we have to grab the normal view
+        // for use in determining whether to subtract scrollbar width from available width.
+        // The locked side does not have scrollbars, so it should not look at the view.
+        if (grid.lockable) {
+            if (me.owner.up('tablepanel') === view.normalGrid) {
+                view = view.normalGrid.getView();
+            } else {
+                view = null;
+            }
+        }
+
+        me.callParent(arguments);
+
+        // Unstretch child items before the layout which stretches them.
+        for (; i < len; i++) {
+            item = items[i];
+            item.removeCls([me.firstHeaderCls, me.lastHeaderCls]);
+            item.el.setStyle({
+                height: 'auto'
+            });
+            item.titleEl.setStyle({
+                height: 'auto',
+                paddingTop: ''  // reset back to default padding of the style
+            });
+        }
+
+        // Add special first/last classes
+        if (len > 0) {
+            items[0].addCls(me.firstHeaderCls);
+            items[len - 1].addCls(me.lastHeaderCls);
+        }
+
+        // If the owner is the grid's HeaderContainer, and the UI displays old fashioned scrollbars and there is a rendered View with data in it,
+        // collect the View context to interrogate it for overflow, and possibly invalidate it if there is overflow
+        if (!me.owner.isHeader && Ext.getScrollbarSize().width && !grid.collapsed && view &&
+                view.rendered && (ownerContext.viewTable = view.el.child('table', true))) {
+            ownerContext.viewContext = ownerContext.context.getCmp(view);
+        }
+    },
+
+    roundFlex: function(width) {
+        return Math.floor(width);
+    },
+    
+    /**
+     * @private
+     * Local getContainerSize implementation accounts for vertical scrollbar in the view.
+     */
+    getContainerSize: function(ownerContext) {
+        var me = this,
+            result = me.callParent(arguments),
+            viewContext = ownerContext.viewContext,
+            viewHeight;
+
+        // If we've collected a viewContext, we will also have the table height
+        // If there's overflow, the View must be narrower to accomodate the scrollbar
+        if (viewContext && !viewContext.heightModel.shrinkWrap &&
+                viewContext.target.componentLayout.ownerContext) { // if (its layout is running)
+            viewHeight = viewContext.getProp('height');
+            if (isNaN(viewHeight)) {
+                me.done = false;
+            } else if (ownerContext.state.tableHeight > viewHeight) {
+                result.width -= Ext.getScrollbarSize().width;
+                ownerContext.state.parallelDone = false;
+                viewContext.invalidate();
+            }
+        }
+
+// TODO - flip the initial assumption to "we have a vscroll" to avoid the invalidate in most
+// cases (and the expensive ones to boot)
+
+        return result;
+    },
+
+    calculate: function(ownerContext) {
+        var me = this,
+            viewContext = ownerContext.viewContext;
+
+        // Collect the height of the data table if we need it to determine overflow
+        if (viewContext && !ownerContext.state.tableHeight) {
+            ownerContext.state.tableHeight = ownerContext.viewTable.offsetHeight;
+        }
+        me.callParent(arguments);
+    },
+ 
+    completeLayout: function(ownerContext) {
+        var me = this,
+            owner = me.owner,
+            state = ownerContext.state,
+            needsInvalidate = false,
+            calculated = me.sizeModels.calculated,
+            childItems, len, i, childContext, item;
+
+        me.callParent(arguments);
+
+        // If we have not been through this already, and the owning Container is configured
+        // forceFit, is not a group column and and there is a valid width, then convert
+        // widths to flexes, and loop back.
+        if (!state.flexesCalculated && owner.forceFit && !owner.isHeader) {
+            childItems = ownerContext.childItems;
+            len = childItems.length;
+
+            for (i = 0; i < len; i++) {
+                childContext = childItems[i];
+                item = childContext.target;
+
+                // For forceFit, just use allocated width as the flex value, and the proportions
+                // will end up the same whatever HeaderContainer width they are being forced into.
+                if (item.width) {
+                    item.flex = ownerContext.childItems[i].flex = item.width;
+                    delete item.width;
+                    childContext.widthModel = calculated;
+                    needsInvalidate = true;
+                }
+            }
+
+            // Recalculate based upon all columns now being flexed instead of sized.
+            // Set flag, so that we do not do this infinitely
+            if (needsInvalidate) {
+                me.cacheFlexes(ownerContext);
+                ownerContext.invalidate({
+                    state: {
+                        flexesCalculated: true
+                    }
+                });
+            }
+        }
+    },
+
+    finalizeLayout: function() {
+        var me = this,
+            i = 0,
+            items,
+            len,
+            itemsHeight,
+            owner = me.owner,
+            titleEl = owner.titleEl;
+
+        // Set up padding in items
+        items = me.getVisibleItems();
+        len = items.length;
+        // header container's items take up the whole height
+        itemsHeight = owner.el.getViewSize().height;
+        if (titleEl) {
+            // if owner is a grouped column with children, we need to subtract the titleEl's height
+            // to determine the remaining available height for the child items
+            itemsHeight -= titleEl.getHeight();
+        }
+        for (; i < len; i++) {
+            items[i].setPadding(itemsHeight);
+        }
+    },
+
+    // FIX: when flexing we actually don't have enough space as we would
+    // typically because of the scrollOffset on the GridView, must reserve this
+    publishInnerCtSize: function(ownerContext) {
+        var me = this,
+            plan = ownerContext.state.boxPlan,
+            size = plan.targetSize,
+            cw = ownerContext.peek('contentWidth');
+
+        // InnerCt MUST stretch to accommodate all columns so that left/right scrolling is enabled in the header container.
+        if ((cw != null) && !me.owner.isHeader) {
+            size.width = cw + Ext.getScrollbarSize().width;
+        }
+
+        return me.callParent(arguments);
+    }
+});

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

@@ -0,0 +1,863 @@
+/**
+ * @private
+ *
+ * Lockable is a private mixin which injects lockable behavior into any
+ * TablePanel subclass such as GridPanel or TreePanel. TablePanel will
+ * automatically inject the Ext.grid.Lockable mixin in when one of the
+ * these conditions are met:
+ *
+ *  - The TablePanel has the lockable configuration set to true
+ *  - One of the columns in the TablePanel has locked set to true/false
+ *
+ * Each TablePanel subclass must register an alias. It should have an array
+ * of configurations to copy to the 2 separate tablepanel's that will be generated
+ * to note what configurations should be copied. These are named normalCfgCopy and
+ * lockedCfgCopy respectively.
+ *
+ * Columns which are locked must specify a fixed width. They do NOT support a
+ * flex width.
+ *
+ * Configurations which are specified in this class will be available on any grid or
+ * tree which is using the lockable functionality.
+ */
+Ext.define('Ext.grid.Lockable', {
+
+    requires: [
+        'Ext.grid.LockingView',
+        'Ext.view.Table'
+    ],
+
+    /**
+     * @cfg {Boolean} syncRowHeight Synchronize rowHeight between the normal and
+     * locked grid view. This is turned on by default. If your grid is guaranteed
+     * to have rows of all the same height, you should set this to false to
+     * optimize performance.
+     */
+    syncRowHeight: true,
+
+    /**
+     * @cfg {String} subGridXType The xtype of the subgrid to specify. If this is
+     * not specified lockable will determine the subgrid xtype to create by the
+     * following rule. Use the superclasses xtype if the superclass is NOT
+     * tablepanel, otherwise use the xtype itself.
+     */
+
+    /**
+     * @cfg {Object} lockedViewConfig A view configuration to be applied to the
+     * locked side of the grid. Any conflicting configurations between lockedViewConfig
+     * and viewConfig will be overwritten by the lockedViewConfig.
+     */
+
+    /**
+     * @cfg {Object} normalViewConfig A view configuration to be applied to the
+     * normal/unlocked side of the grid. Any conflicting configurations between normalViewConfig
+     * and viewConfig will be overwritten by the normalViewConfig.
+     */
+
+    headerCounter: 0,
+
+    /**
+     * @cfg {Number} scrollDelta
+     * Number of pixels to scroll when scrolling the locked section with mousewheel.
+     */
+    scrollDelta: 40,
+    
+    /**
+     * @cfg {Object} lockedGridConfig
+     * Any special configuration options for the locked part of the grid
+     */
+    
+    /**
+     * @cfg {Object} normalGridConfig
+     * Any special configuration options for the normal part of the grid
+     */
+
+    // i8n text
+    //<locale>
+    unlockText: 'Unlock',
+    //</locale>
+    //<locale>
+    lockText: 'Lock',
+    //</locale>
+
+    determineXTypeToCreate: function() {
+        var me = this,
+            typeToCreate,
+            xtypes, xtypesLn, xtype, superxtype;
+
+        if (me.subGridXType) {
+            typeToCreate = me.subGridXType;
+        } else {
+            xtypes     = this.getXTypes().split('/');
+            xtypesLn   = xtypes.length;
+            xtype      = xtypes[xtypesLn - 1];
+            superxtype = xtypes[xtypesLn - 2];
+
+            if (superxtype !== 'tablepanel') {
+                typeToCreate = superxtype;
+            } else {
+                typeToCreate = xtype;
+            }
+        }
+
+        return typeToCreate;
+    },
+
+    // injectLockable will be invoked before initComponent's parent class implementation
+    // is called, so throughout this method this. are configurations
+    injectLockable: function() {
+        // ensure lockable is set to true in the TablePanel
+        this.lockable = true;
+        // Instruct the TablePanel it already has a view and not to create one.
+        // We are going to aggregate 2 copies of whatever TablePanel we are using
+        this.hasView = true;
+
+        var me = this,
+            // If the OS does not show a space-taking scrollbar, the locked view can be overflow:auto
+            scrollLocked = Ext.getScrollbarSize().width === 0,
+            store = me.store = Ext.StoreManager.lookup(me.store),
+            // xtype of this class, 'treepanel' or 'gridpanel'
+            // (Note: this makes it a requirement that any subclass that wants to use lockable functionality needs to register an
+            // alias.)
+            xtype = me.determineXTypeToCreate(),
+            // share the selection model
+            selModel = me.getSelectionModel(),
+            lockedFeatures = me.prepareFeatures(),
+            normalFeatures = me.prepareFeatures(),
+            lockedGrid,
+            normalGrid,
+            i = 0, len,
+            columns,
+            lockedHeaderCt,
+            normalHeaderCt,
+            lockedView,
+            normalView,
+            listeners;
+
+        // Each Feature must have a reference to its counterpart on the opposite side of the locking view
+        for (i = 0, len = (lockedFeatures ? lockedFeatures.length : 0); i < len; i++) {
+            lockedFeatures[i].lockingPartner = normalFeatures[i];
+            normalFeatures[i].lockingPartner = lockedFeatures[i];
+        }
+
+        lockedGrid = Ext.apply({
+            xtype: xtype,
+            store: store,
+            scrollerOwner: false,
+            // Lockable does NOT support animations for Tree
+            enableAnimations: false,
+            scroll: scrollLocked ? 'vertical' : false,
+            selModel: selModel,
+            border: false,
+            cls: Ext.baseCSSPrefix + 'grid-inner-locked',
+            isLayoutRoot: function() {
+                return false;
+            },
+            features: lockedFeatures
+        }, me.lockedGridConfig);
+
+        normalGrid = Ext.apply({
+            xtype: xtype,
+            store: store,
+            scrollerOwner: false,
+            enableAnimations: false,
+            selModel: selModel,
+            border: false,
+            isLayoutRoot: function() {
+                return false;
+            },
+            features: normalFeatures
+        }, me.normalGridConfig);
+
+        me.addCls(Ext.baseCSSPrefix + 'grid-locked');
+
+        // copy appropriate configurations to the respective
+        // aggregated tablepanel instances and then delete them
+        // from the master tablepanel.
+        Ext.copyTo(normalGrid, me, me.bothCfgCopy);
+        Ext.copyTo(lockedGrid, me, me.bothCfgCopy);
+        Ext.copyTo(normalGrid, me, me.normalCfgCopy);
+        Ext.copyTo(lockedGrid, me, me.lockedCfgCopy);
+        for (i = 0; i < me.normalCfgCopy.length; i++) {
+            delete me[me.normalCfgCopy[i]];
+        }
+        for (i = 0; i < me.lockedCfgCopy.length; i++) {
+            delete me[me.lockedCfgCopy[i]];
+        }
+
+        me.addEvents(
+            /**
+             * @event lockcolumn
+             * Fires when a column is locked.
+             * @param {Ext.grid.Panel} this The gridpanel.
+             * @param {Ext.grid.column.Column} column The column being locked.
+             */
+            'lockcolumn',
+
+            /**
+             * @event unlockcolumn
+             * Fires when a column is unlocked.
+             * @param {Ext.grid.Panel} this The gridpanel.
+             * @param {Ext.grid.column.Column} column The column being unlocked.
+             */
+            'unlockcolumn'
+        );
+
+        me.addStateEvents(['lockcolumn', 'unlockcolumn']);
+
+        me.lockedHeights = [];
+        me.normalHeights = [];
+
+        columns = me.processColumns(me.columns);
+
+        lockedGrid.width = columns.lockedWidth + Ext.num(selModel.headerWidth, 0);
+        lockedGrid.columns = columns.locked;
+        normalGrid.columns = columns.normal;
+
+        // normal grid should flex the rest of the width
+        normalGrid.flex = 1;
+        lockedGrid.viewConfig = me.lockedViewConfig || {};
+        lockedGrid.viewConfig.loadingUseMsg = false;
+        normalGrid.viewConfig = me.normalViewConfig || {};
+
+        Ext.applyIf(lockedGrid.viewConfig, me.viewConfig);
+        Ext.applyIf(normalGrid.viewConfig, me.viewConfig);
+
+        me.normalGrid = Ext.ComponentManager.create(normalGrid);
+        me.lockedGrid = Ext.ComponentManager.create(lockedGrid);
+
+        me.view = new Ext.grid.LockingView({
+            locked: me.lockedGrid,
+            normal: me.normalGrid,
+            panel: me
+        });
+
+        lockedView = me.lockedGrid.getView();
+        normalView = me.normalGrid.getView();
+
+        // Set up listeners for the locked view
+        // If the OS does not show a space-taking scrollbar, the locked view can be overflow:auto
+        // And therefore we can listen for the DOM scroll event on its element
+        if (scrollLocked) {
+            listeners = {
+                scroll: {
+                    fn: me.onLockedViewScroll,
+                    element: 'el',
+                    scope: me
+                }
+            };
+        }
+        // If there are scrollbars, we have to monitor the mousewheel and fake a scroll
+        else {
+            listeners = {
+                mousewheel: {
+                    fn: me.onLockedViewMouseWheel,
+                    element: 'el',
+                    scope: me
+                }
+            };
+        }
+        if (me.syncRowHeight) {
+            listeners.refresh = me.onLockedViewRefresh;
+            listeners.itemupdate = me.onLockedViewItemUpdate;
+            listeners.scope = me;
+        }
+        lockedView.on(listeners);
+
+        // Set up listeners for the normal view
+        listeners = {
+            scroll: {
+                fn: me.onNormalViewScroll,
+                element: 'el',
+                scope: me
+            },
+            refresh: me.syncRowHeight ? me.onNormalViewRefresh : me.updateSpacer,
+            scope: me
+        };
+        normalView.on(listeners);
+
+        lockedHeaderCt = me.lockedGrid.headerCt;
+        normalHeaderCt = me.normalGrid.headerCt;
+
+        lockedHeaderCt.lockedCt = true;
+        lockedHeaderCt.lockableInjected = true;
+        normalHeaderCt.lockableInjected = true;
+
+        lockedHeaderCt.on({
+            columnshow: me.onLockedHeaderShow,
+            columnhide: me.onLockedHeaderHide,
+            columnmove: me.onLockedHeaderMove,
+            sortchange: me.onLockedHeaderSortChange,
+            columnresize: me.onLockedHeaderResize,
+            scope: me
+        });
+
+        normalHeaderCt.on({
+            columnmove: me.onNormalHeaderMove,
+            sortchange: me.onNormalHeaderSortChange,
+            scope: me
+        });
+
+        me.modifyHeaderCt();
+        me.items = [me.lockedGrid, me.normalGrid];
+
+        me.relayHeaderCtEvents(lockedHeaderCt);
+        me.relayHeaderCtEvents(normalHeaderCt);
+
+        me.layout = {
+            type: 'hbox',
+            align: 'stretch'
+        };
+    },
+
+    processColumns: function(columns){
+        // split apart normal and lockedWidths
+        var i = 0,
+            len = columns.length,
+            lockedWidth = 0,
+            lockedHeaders = [],
+            normalHeaders = [],
+            column;
+
+        for (; i < len; ++i) {
+            column = columns[i];
+            // MUST clone the column config because we mutate it, and we must not mutate passed in config objects in case they are re-used
+            // eg, in an extend-to-configure scenario.
+            if (!column.isComponent) {
+                column = Ext.apply({}, columns[i]);
+            }
+
+            // mark the column as processed so that the locked attribute does not
+            // trigger trying to aggregate the columns again.
+            column.processed = true;
+            if (column.locked) {
+                // <debug>
+                if (column.flex) {
+                    Ext.Error.raise("Columns which are locked do NOT support a flex width. You must set a width on the " + columns[i].text + "column.");
+                }
+                // </debug>
+                if (!column.hidden) {
+                    lockedWidth += column.width || Ext.grid.header.Container.prototype.defaultWidth;
+                }
+                lockedHeaders.push(column);
+            } else {
+                normalHeaders.push(column);
+            }
+            if (!column.headerId) {
+                column.headerId = (column.initialConfig || column).id || ('L' + (++this.headerCounter));
+            }
+        }
+        return {
+            lockedWidth: lockedWidth,
+            locked: {
+                items: lockedHeaders,
+                itemId: 'lockedHeaderCt',
+                stretchMaxPartner: '^^>>#normalHeaderCt'
+            },
+            normal: {
+                items: normalHeaders,
+                itemId: 'normalHeaderCt',
+                stretchMaxPartner: '^^>>#lockedHeaderCt'
+            }
+        };
+    },
+
+    /**
+     * @private
+     * Listen for mousewheel events on the locked section which does not scroll.
+     * Scroll it in response, and the other section will automatically sync.
+     */
+    onLockedViewMouseWheel: function(e) {
+        var me = this,
+            scrollDelta = -me.scrollDelta,
+            deltaY = scrollDelta * e.getWheelDeltas().y,
+            vertScrollerEl = me.lockedGrid.getView().el.dom,
+            verticalCanScrollDown, verticalCanScrollUp;
+
+        if (vertScrollerEl) {
+            verticalCanScrollDown = vertScrollerEl.scrollTop !== vertScrollerEl.scrollHeight - vertScrollerEl.clientHeight;
+            verticalCanScrollUp   = vertScrollerEl.scrollTop !== 0;
+        }
+
+        if ((deltaY < 0 && verticalCanScrollUp) || (deltaY > 0 && verticalCanScrollDown)) {
+            e.stopEvent();
+
+            // Inhibit processing of any scroll events we *may* cause here.
+            // Some OSs do not fire a scroll event when we set the scrollTop of an overflow:hidden element,
+            // so we invoke the scroll handler programatically below.
+            me.scrolling = true;
+            vertScrollerEl.scrollTop += deltaY;
+            me.normalGrid.getView().el.dom.scrollTop = vertScrollerEl.scrollTop;
+            me.scrolling = false;
+
+            // Invoke the scroll event handler programatically to sync everything.
+            me.onNormalViewScroll();
+        }
+    },
+
+    onLockedViewScroll: function() {
+        var me = this,
+            lockedView = me.lockedGrid.getView(),
+            normalView = me.normalGrid.getView(),
+            normalTable,
+            lockedTable;
+
+        // Set a flag so that the scroll even doesn't bounce back when we set the normal view's scroll position
+        if (!me.scrolling) {
+            me.scrolling = true;
+            normalView.el.dom.scrollTop = lockedView.el.dom.scrollTop;
+    
+            // For buffered views, the absolute position is important as well as scrollTop
+            if (me.store.buffered) {
+                lockedTable = lockedView.el.child('table', true);
+                normalTable = normalView.el.child('table', true);
+                lockedTable.style.position = 'absolute';
+            }
+            me.scrolling = false;
+        }
+    },
+    
+    onNormalViewScroll: function() {
+        var me = this,
+            lockedView = me.lockedGrid.getView(),
+            normalView = me.normalGrid.getView(),
+            normalTable,
+            lockedTable;
+
+        // Set a flag so that the scroll even doesn't bounce back when we set the locked view's scroll position
+        if (!me.scrolling) {
+            me.scrolling = true;
+            lockedView.el.dom.scrollTop = normalView.el.dom.scrollTop;
+    
+            // For buffered views, the absolute position is important as well as scrollTop
+            if (me.store.buffered) {
+                lockedTable = lockedView.el.child('table', true);
+                normalTable = normalView.el.child('table', true);
+                lockedTable.style.position = 'absolute';
+                lockedTable.style.top = normalTable.style.top;
+            }
+            me.scrolling = false;
+        }
+    },
+
+    // trigger a pseudo refresh on the normal side
+    onLockedHeaderMove: function() {
+        if (this.syncRowHeight) {
+            this.onNormalViewRefresh();
+        }
+    },
+
+    // trigger a pseudo refresh on the locked side
+    onNormalHeaderMove: function() {
+        if (this.syncRowHeight) {
+            this.onLockedViewRefresh();
+        }
+    },
+    
+    // Create a spacer in lockedsection and store a reference.
+    // This is to allow the locked section to scroll past the bottom to
+    // take the mormal section's horizontal scrollbar into account
+    // TODO: Should destroy before refreshing content
+    updateSpacer: function() {
+        var me   = this,
+            // This affects scrolling all the way to the bottom of a locked grid
+            // additional test, sort a column and make sure it synchronizes
+            lockedViewEl   = me.lockedGrid.getView().el,
+            normalViewEl = me.normalGrid.getView().el.dom,
+            spacerId = lockedViewEl.dom.id + '-spacer',
+            spacerHeight = (normalViewEl.offsetHeight - normalViewEl.clientHeight) + 'px';
+
+        me.spacerEl = Ext.getDom(spacerId);
+        if (me.spacerEl) {
+            me.spacerEl.style.height = spacerHeight;
+        } else {
+            Ext.core.DomHelper.append(lockedViewEl, {
+                id: spacerId,
+                style: 'height: ' + spacerHeight
+            });
+        }
+    },
+
+    // cache the heights of all locked rows and sync rowheights
+    onLockedViewRefresh: function() {
+
+        // Only bother if there are some columns in the normal grid to sync
+        if (this.normalGrid.headerCt.getGridColumns().length) {
+            var me     = this,
+                view   = me.lockedGrid.getView(),
+                el     = view.el,
+                rowEls = el.query(view.getItemSelector()),
+                ln     = rowEls.length,
+                i = 0;
+    
+            // reset heights each time.
+            me.lockedHeights = [];
+
+            for (; i < ln; i++) {
+                me.lockedHeights[i] = rowEls[i].clientHeight;
+            }
+            me.syncRowHeights();
+        }
+    },
+
+    // cache the heights of all normal rows and sync rowheights
+    onNormalViewRefresh: function() {
+
+        // Only bother if there are some columns in the locked grid to sync
+        if (this.lockedGrid.headerCt.getGridColumns().length) {
+            var me     = this,
+                view   = me.normalGrid.getView(),
+                el     = view.el,
+                rowEls = el.query(view.getItemSelector()),
+                ln     = rowEls.length,
+                i = 0;
+    
+            // reset heights each time.
+            me.normalHeights = [];
+    
+            for (; i < ln; i++) {
+                me.normalHeights[i] = rowEls[i].clientHeight;
+            }
+            me.syncRowHeights();
+            me.updateSpacer();
+        }
+    },
+
+    // rows can get bigger/smaller
+    onLockedViewItemUpdate: function(record, index, node) {
+
+        // Only bother if there are some columns in the normal grid to sync
+        if (this.normalGrid.headerCt.getGridColumns().length) {
+            this.lockedHeights[index] = node.clientHeight;
+            this.syncRowHeights();
+        }
+    },
+
+    // rows can get bigger/smaller
+    onNormalViewItemUpdate: function(record, index, node) {
+    
+        // Only bother if there are some columns in the locked grid to sync
+        if (this.lockedGrid.headerCt.getGridColumns().length) {
+            this.normalHeights[index] = node.clientHeight;
+            this.syncRowHeights();
+        }
+    },
+
+    /**
+     * Synchronizes the row heights between the locked and non locked portion of the grid for each
+     * row. If one row is smaller than the other, the height will be increased to match the larger one.
+     */
+    syncRowHeights: function() {
+        var me = this,
+            lockedHeights = me.lockedHeights,
+            normalHeights = me.normalHeights,
+            calcHeights   = [],
+            ln = lockedHeights.length,
+            i  = 0,
+            lockedView, normalView,
+            lockedRowEls, normalRowEls,
+            scrollTop;
+
+        // ensure there are an equal num of locked and normal
+        // rows before synchronization
+        if (lockedHeights.length && normalHeights.length) {
+            lockedView = me.lockedGrid.getView();
+            normalView = me.normalGrid.getView();
+            lockedRowEls = lockedView.el.query(lockedView.getItemSelector());
+            normalRowEls = normalView.el.query(normalView.getItemSelector());
+
+            // loop thru all of the heights and sync to the other side
+            for (; i < ln; i++) {
+                // ensure both are numbers
+                if (!isNaN(lockedHeights[i]) && !isNaN(normalHeights[i])) {
+                    if (lockedHeights[i] > normalHeights[i]) {
+                        Ext.fly(normalRowEls[i]).setHeight(lockedHeights[i]);
+                    } else if (lockedHeights[i] < normalHeights[i]) {
+                        Ext.fly(lockedRowEls[i]).setHeight(normalHeights[i]);
+                    }
+                }
+            }
+
+            // Synchronize the scrollTop positions of the two views
+            // We don't use setScrollTop here because if the scrollTop is
+            // set to the exact same value some browsers won't fire the scroll
+            // event. Instead, we directly set the scrollTop.
+            scrollTop = normalView.el.dom.scrollTop;
+            normalView.el.dom.scrollTop = scrollTop;
+            lockedView.el.dom.scrollTop = scrollTop;
+            
+            // reset the heights
+            me.lockedHeights = [];
+            me.normalHeights = [];
+        }
+    },
+
+    // inject Lock and Unlock text
+    modifyHeaderCt: function() {
+        var me = this;
+        me.lockedGrid.headerCt.getMenuItems = me.getMenuItems(true);
+        me.normalGrid.headerCt.getMenuItems = me.getMenuItems(false);
+    },
+
+    onUnlockMenuClick: function() {
+        this.unlock();
+    },
+
+    onLockMenuClick: function() {
+        this.lock();
+    },
+
+    getMenuItems: function(locked) {
+        var me            = this,
+            unlockText    = me.unlockText,
+            lockText      = me.lockText,
+            unlockCls     = Ext.baseCSSPrefix + 'hmenu-unlock',
+            lockCls       = Ext.baseCSSPrefix + 'hmenu-lock',
+            unlockHandler = Ext.Function.bind(me.onUnlockMenuClick, me),
+            lockHandler   = Ext.Function.bind(me.onLockMenuClick, me);
+
+        // runs in the scope of headerCt
+        return function() {
+            var o = Ext.grid.header.Container.prototype.getMenuItems.call(this);
+            o.push('-',{
+                cls: unlockCls,
+                text: unlockText,
+                handler: unlockHandler,
+                disabled: !locked
+            });
+            o.push({
+                cls: lockCls,
+                text: lockText,
+                handler: lockHandler,
+                disabled: locked
+            });
+            return o;
+        };
+    },
+
+    // going from unlocked section to locked
+    /**
+     * Locks the activeHeader as determined by which menu is open OR a header
+     * as specified.
+     * @param {Ext.grid.column.Column} [header] Header to unlock from the locked section.
+     * Defaults to the header which has the menu open currently.
+     * @param {Number} [toIdx] The index to move the unlocked header to.
+     * Defaults to appending as the last item.
+     * @private
+     */
+    lock: function(activeHd, toIdx) {
+        var me         = this,
+            normalGrid = me.normalGrid,
+            lockedGrid = me.lockedGrid,
+            normalHCt  = normalGrid.headerCt,
+            lockedHCt  = lockedGrid.headerCt;
+
+        activeHd = activeHd || normalHCt.getMenu().activeHeader;
+
+        // if column was previously flexed, get/set current width
+        // and remove the flex
+        if (activeHd.flex) {
+            activeHd.width = activeHd.getWidth();
+            delete activeHd.flex;
+        }
+
+        Ext.suspendLayouts();
+        normalHCt.remove(activeHd, false);
+        activeHd.locked = true;
+        if (Ext.isDefined(toIdx)) {
+            lockedHCt.insert(toIdx, activeHd);
+        } else {
+            lockedHCt.add(activeHd);
+        }
+        me.syncLockedSection();
+        Ext.resumeLayouts(true);
+        me.updateSpacer();
+
+        me.fireEvent('lockcolumn', me, activeHd);
+    },
+
+    syncLockedSection: function() {
+        var me = this;
+        me.syncLockedWidth();
+        me.lockedGrid.getView().refresh();
+        me.normalGrid.getView().refresh();
+    },
+
+    // adjust the locked section to the width of its respective
+    // headerCt
+    syncLockedWidth: function() {
+        var me = this,
+            locked = me.lockedGrid,
+            width = locked.headerCt.getFullWidth(true);
+            
+        Ext.suspendLayouts();
+        if (width > 0) {
+            locked.setWidth(width);
+            locked.show();
+        } else {
+            locked.hide();
+        }
+        Ext.resumeLayouts(true);
+        
+        return width > 0;
+    },
+
+    onLockedHeaderResize: function() {
+        this.syncLockedWidth();
+    },
+
+    onLockedHeaderHide: function() {
+        this.syncLockedWidth();
+    },
+
+    onLockedHeaderShow: function() {
+        this.syncLockedWidth();
+    },
+
+    onLockedHeaderSortChange: function(headerCt, header, sortState) {
+        if (sortState) {
+            // no real header, and silence the event so we dont get into an
+            // infinite loop
+            this.normalGrid.headerCt.clearOtherSortStates(null, true);
+        }
+    },
+
+    onNormalHeaderSortChange: function(headerCt, header, sortState) {
+        if (sortState) {
+            // no real header, and silence the event so we dont get into an
+            // infinite loop
+            this.lockedGrid.headerCt.clearOtherSortStates(null, true);
+        }
+    },
+
+    // going from locked section to unlocked
+    /**
+     * Unlocks the activeHeader as determined by which menu is open OR a header
+     * as specified.
+     * @param {Ext.grid.column.Column} [header] Header to unlock from the locked section.
+     * Defaults to the header which has the menu open currently.
+     * @param {Number} [toIdx=0] The index to move the unlocked header to.
+     * @private
+     */
+    unlock: function(activeHd, toIdx) {
+        var me         = this,
+            normalGrid = me.normalGrid,
+            lockedGrid = me.lockedGrid,
+            normalHCt  = normalGrid.headerCt,
+            lockedHCt  = lockedGrid.headerCt,
+            refreshLocked = false;
+
+        if (!Ext.isDefined(toIdx)) {
+            toIdx = 0;
+        }
+        activeHd = activeHd || lockedHCt.getMenu().activeHeader;
+
+        Ext.suspendLayouts();
+        lockedHCt.remove(activeHd, false);
+        if (me.syncLockedWidth()) {
+            refreshLocked = true;
+        }
+        activeHd.locked = false;
+
+        // Refresh the locked section first in case it was empty
+        normalHCt.insert(toIdx, activeHd);
+        me.normalGrid.getView().refresh();
+
+        if (refreshLocked) {
+            me.lockedGrid.getView().refresh();
+        }
+        Ext.resumeLayouts(true);
+
+        me.fireEvent('unlockcolumn', me, activeHd);
+    },
+
+    applyColumnsState: function (columns) {
+        var me             = this,
+            lockedGrid     = me.lockedGrid,
+            lockedHeaderCt = lockedGrid.headerCt,
+            normalHeaderCt = me.normalGrid.headerCt,
+            lockedCols     = Ext.Array.toMap(lockedHeaderCt.items, 'headerId'),
+            normalCols     = Ext.Array.toMap(normalHeaderCt.items, 'headerId'),
+            locked         = [],
+            normal         = [],
+            lockedWidth    = 1,
+            length         = columns.length,
+            i, existing,
+            lockedDefault,
+            col;
+
+        for (i = 0; i < length; i++) {
+            col = columns[i];
+
+            lockedDefault = lockedCols[col.id];
+            existing = lockedDefault || normalCols[col.id];
+
+            if (existing) {
+                if (existing.applyColumnState) {
+                    existing.applyColumnState(col);
+                }
+                if (existing.locked === undefined) {
+                    existing.locked = !!lockedDefault;
+                }
+                if (existing.locked) {
+                    locked.push(existing);
+                    if (!existing.hidden && typeof existing.width == 'number') {
+                        lockedWidth += existing.width;
+                    }
+                } else {
+                    normal.push(existing);
+                }
+            }
+        }
+
+        // state and config must have the same columns (compare counts for now):
+        if (locked.length + normal.length == lockedHeaderCt.items.getCount() + normalHeaderCt.items.getCount()) {
+            lockedHeaderCt.removeAll(false);
+            normalHeaderCt.removeAll(false);
+
+            lockedHeaderCt.add(locked);
+            normalHeaderCt.add(normal);
+
+            lockedGrid.setWidth(lockedWidth);
+        }
+    },
+
+    getColumnsState: function () {
+        var me = this,
+            locked = me.lockedGrid.headerCt.getColumnsState(),
+            normal = me.normalGrid.headerCt.getColumnsState();
+
+        return locked.concat(normal);
+    },
+
+    // we want to totally override the reconfigure behaviour here, since we're creating 2 sub-grids
+    reconfigureLockable: function(store, columns) {
+        var me = this,
+            lockedGrid = me.lockedGrid,
+            normalGrid = me.normalGrid;
+
+        if (columns) {
+            Ext.suspendLayouts();
+            lockedGrid.headerCt.removeAll();
+            normalGrid.headerCt.removeAll();
+
+            columns = me.processColumns(columns);
+            lockedGrid.setWidth(columns.lockedWidth);
+            lockedGrid.headerCt.add(columns.locked.items);
+            normalGrid.headerCt.add(columns.normal.items);
+            Ext.resumeLayouts(true);
+        }
+
+        if (store) {
+            store = Ext.data.StoreManager.lookup(store);
+            me.store = store;
+            lockedGrid.bindStore(store);
+            normalGrid.bindStore(store);
+        } else {
+            lockedGrid.getView().refresh();
+            normalGrid.getView().refresh();
+        }
+    }
+}, function() {
+    this.borrow(Ext.view.Table, ['prepareFeatures']);
+});