+/*
+
+This file is part of Ext JS 4
+
+Copyright (c) 2011 Sencha Inc
+
+Contact: http://www.sencha.com/contact
+
+GNU General Public License Usage
+This file may be used under the terms of the GNU General Public License version 3.0 as published by the Free Software Foundation and appearing in the file LICENSE included in the packaging of this file. Please review the following information to ensure the GNU General Public License version 3.0 requirements will be met: http://www.gnu.org/copyleft/gpl.html.
+
+If you are unsure which license is appropriate for your use, please contact the sales department at http://www.sencha.com/contact.
+
+*/
/**
* @class Ext.grid.Lockable
* @private
* 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
+ * - 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
+ * 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'],
-
+
/**
* @cfg {Boolean} syncRowHeight Synchronize rowHeight between the normal and
* locked grid view. This is turned on by default. If your grid is guaranteed
* 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
* normal/unlocked side of the grid. Any conflicting configurations between normalViewConfig
* and viewConfig will be overwritten by the normalViewConfig.
*/
-
+
// private variable to track whether or not the spacer is hidden/visible
spacerHidden: true,
-
+
+ headerCounter: 0,
+
// i8n text
unlockText: 'Unlock',
lockText: 'Lock',
-
+
determineXTypeToCreate: function() {
var me = this,
typeToCreate;
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() {
columns,
lockedHeaderCt,
normalHeaderCt;
-
+
me.addCls(Ext.baseCSSPrefix + 'grid-locked');
-
+
// copy appropriate configurations to the respective
// aggregated tablepanel instances and then delete them
// from the master tablepanel.
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;
+ lockedGrid.width = columns.lockedWidth + Ext.num(selModel.headerWidth, 0);
lockedGrid.columns = columns.locked;
normalGrid.columns = columns.normal;
-
+
me.store = Ext.StoreManager.lookup(me.store);
lockedGrid.store = me.store;
normalGrid.store = me.store;
-
+
// 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 = Ext.create('Ext.grid.LockingView', {
locked: me.lockedGrid,
normal: me.normalGrid,
- panel: me
+ panel: me
});
-
+
if (me.syncRowHeight) {
me.lockedGrid.getView().on({
refresh: me.onLockedGridAfterRefresh,
itemupdate: me.onLockedGridAfterUpdate,
scope: me
});
-
+
me.normalGrid.getView().on({
refresh: me.onNormalGridAfterRefresh,
itemupdate: me.onNormalGridAfterUpdate,
scope: me
});
}
-
+
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,
columnresize: me.onLockedHeaderResize,
scope: me
});
-
+
normalHeaderCt.on({
columnmove: me.onNormalHeaderMove,
sortchange: me.onNormalHeaderSortChange,
scope: me
});
-
+
me.normalGrid.on({
scrollershow: me.onScrollerShow,
scrollerhide: me.onScrollerHide,
scope: me
});
-
+
me.lockedGrid.on('afterlayout', me.onLockedGridAfterLayout, me, {single: true});
-
+
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,
+ lockedWidth = 1,
lockedHeaders = [],
normalHeaders = [],
column;
-
+
for (; i < len; ++i) {
column = columns[i];
// mark the column as processed so that the locked attribute does not
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>
- lockedWidth += column.width;
+ 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: lockedHeaders,
- normal: normalHeaders
+ normal: normalHeaders
};
},
-
+
// create a new spacer after the table is refreshed
onLockedGridAfterLayout: function() {
var me = this,
lockedView = me.lockedGrid.getView();
lockedView.on({
- refresh: me.createSpacer,
beforerefresh: me.destroySpacer,
scope: me
});
},
-
+
// trigger a pseudo refresh on the normal side
onLockedHeaderMove: function() {
if (this.syncRowHeight) {
this.onNormalGridAfterRefresh();
}
},
-
+
// trigger a pseudo refresh on the locked side
onNormalHeaderMove: function() {
if (this.syncRowHeight) {
this.onLockedGridAfterRefresh();
}
},
-
+
// create a spacer in lockedsection and store a reference
// TODO: Should destroy before refreshing content
- createSpacer: function() {
+ getSpacerEl: function() {
var me = this,
+ w,
+ view,
+ el;
+
+ if (!me.spacerEl) {
// This affects scrolling all the way to the bottom of a locked grid
// additional test, sort a column and make sure it synchronizes
- w = Ext.getScrollBarWidth() + (Ext.isIE ? 2 : 0),
- view = me.lockedGrid.getView(),
+ w = Ext.getScrollBarWidth() + (Ext.isIE ? 2 : 0);
+ view = me.lockedGrid.getView();
el = view.el;
- me.spacerEl = Ext.core.DomHelper.append(el, {
- cls: me.spacerHidden ? (Ext.baseCSSPrefix + 'hidden') : '',
- style: 'height: ' + w + 'px;'
- }, true);
+ me.spacerEl = Ext.DomHelper.append(el, {
+ cls: me.spacerHidden ? (Ext.baseCSSPrefix + 'hidden') : '',
+ style: 'height: ' + w + 'px;'
+ }, true);
+ }
+ return me.spacerEl;
},
-
+
destroySpacer: function() {
var me = this;
if (me.spacerEl) {
delete me.spacerEl;
}
},
-
+
// cache the heights of all locked rows and sync rowheights
onLockedGridAfterRefresh: function() {
var me = this,
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
onNormalGridAfterRefresh: function() {
var me = this,
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();
},
-
+
// rows can get bigger/smaller
onLockedGridAfterUpdate: function(record, index, node) {
this.lockedHeights[index] = node.clientHeight;
this.syncRowHeights();
},
-
+
// rows can get bigger/smaller
onNormalGridAfterUpdate: function(record, index, node) {
this.normalHeights[index] = node.clientHeight;
this.syncRowHeights();
},
-
+
// match the rowheights to the biggest rowheight on either
// side
syncRowHeights: function() {
// invalidate the scroller and sync the scrollers
me.normalGrid.invalidateScroller();
-
+
// synchronize the view with the scroller, if we have a virtualScrollTop
- // then the user is using a PagingScroller
+ // then the user is using a PagingScroller
if (vertScroller && vertScroller.setViewScrollTop) {
vertScroller.setViewScrollTop(me.virtualScrollTop);
} else {
normalView.el.dom.scrollTop = scrollTop;
lockedView.el.dom.scrollTop = scrollTop;
}
-
+
// reset the heights
me.lockedHeights = [];
me.normalHeights = [];
}
},
-
+
// track when scroller is shown
onScrollerShow: function(scroller, direction) {
if (direction === 'horizontal') {
this.spacerHidden = false;
- this.spacerEl.removeCls(Ext.baseCSSPrefix + 'hidden');
+ this.getSpacerEl().removeCls(Ext.baseCSSPrefix + 'hidden');
}
},
-
+
// track when scroller is hidden
onScrollerHide: function(scroller, direction) {
if (direction === 'horizontal') {
this.spacerHidden = true;
- this.spacerEl.addCls(Ext.baseCSSPrefix + 'hidden');
+ if (this.spacerEl) {
+ this.spacerEl.addCls(Ext.baseCSSPrefix + 'hidden');
+ }
}
},
-
+
// 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,
- // TODO: Refactor to use Ext.baseCSSPrefix
- unlockCls = 'xg-hmenu-unlock',
- lockCls = 'xg-hmenu-lock',
+ 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);
return o;
};
},
-
+
// going from unlocked section to locked
/**
* Locks the activeHeader as determined by which menu is open OR a header
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;
}
-
+
normalHCt.remove(activeHd, false);
lockedHCt.suspendLayout = true;
+ activeHd.locked = true;
if (Ext.isDefined(toIdx)) {
lockedHCt.insert(toIdx, activeHd);
} else {
}
lockedHCt.suspendLayout = false;
me.syncLockedSection();
+
+ 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,
width = me.lockedGrid.headerCt.getFullWidth(true);
- me.lockedGrid.setWidth(width);
+ me.lockedGrid.setWidth(width+1); // +1 for border pixel
+ me.doComponentLayout();
},
-
+
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
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
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
toIdx = 0;
}
activeHd = activeHd || lockedHCt.getMenu().activeHeader;
-
+
lockedHCt.remove(activeHd, false);
me.syncLockedWidth();
me.lockedGrid.getView().refresh();
+ activeHd.locked = false;
normalHCt.insert(toIdx, activeHd);
me.normalGrid.getView().refresh();
+
+ me.fireEvent('unlockcolumn', me, activeHd);
+ },
+
+ applyColumnsState: function (columns) {
+ var me = this,
+ lockedGrid = me.lockedGrid,
+ lockedHeaderCt = lockedGrid.headerCt,
+ normalHeaderCt = me.normalGrid.headerCt,
+ lockedCols = lockedHeaderCt.items,
+ normalCols = normalHeaderCt.items,
+ existing,
+ locked = [],
+ normal = [],
+ lockedDefault,
+ lockedWidth = 1;
+
+ Ext.each(columns, function (col) {
+ function matches (item) {
+ return item.headerId == col.id;
+ }
+
+ lockedDefault = true;
+ if (!(existing = lockedCols.findBy(matches))) {
+ existing = normalCols.findBy(matches);
+ lockedDefault = false;
+ }
+
+ if (existing) {
+ if (existing.applyColumnState) {
+ existing.applyColumnState(col);
+ }
+ if (!Ext.isDefined(existing.locked)) {
+ existing.locked = lockedDefault;
+ }
+ if (existing.locked) {
+ locked.push(existing);
+ if (!existing.hidden && Ext.isNumber(existing.width)) {
+ lockedWidth += existing.width;
+ }
+ } else {
+ normal.push(existing);
+ }
+ }
+ });
+
+ // state and config must have the same columns (compare counts for now):
+ if (locked.length + normal.length == lockedCols.getCount() + normalCols.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) {
+ lockedGrid.headerCt.suspendLayout = true;
+ normalGrid.headerCt.suspendLayout = true;
lockedGrid.headerCt.removeAll();
normalGrid.headerCt.removeAll();
-
+
columns = me.processColumns(columns);
lockedGrid.setWidth(columns.lockedWidth);
lockedGrid.headerCt.add(columns.locked);
normalGrid.headerCt.add(columns.normal);
}
-
+
if (store) {
store = Ext.data.StoreManager.lookup(store);
me.store = store;
lockedGrid.getView().refresh();
normalGrid.getView().refresh();
}
+
+ if (columns) {
+ lockedGrid.headerCt.suspendLayout = false;
+ normalGrid.headerCt.suspendLayout = false;
+ lockedGrid.headerCt.forceComponentLayout();
+ normalGrid.headerCt.forceComponentLayout();
+ }
}
});
+
git.ithinksw.org / extjs.git / blobdiff