/**
* @class Ext.panel.Table
* @extends Ext.panel.Panel
* @xtype tablepanel
* @private
* @author Nicolas Ferrero
* TablePanel is a private class and the basis of both TreePanel and GridPanel.
*
* TablePanel aggregates:
*
* - a Selection Model
* - a View
* - a Store
* - Scrollers
* - Ext.grid.header.Container
*
*/
Ext.define('Ext.panel.Table', {
extend: 'Ext.panel.Panel',
alias: 'widget.tablepanel',
uses: [
'Ext.selection.RowModel',
'Ext.grid.Scroller',
'Ext.grid.header.Container',
'Ext.grid.Lockable'
],
cls: Ext.baseCSSPrefix + 'grid',
extraBodyCls: Ext.baseCSSPrefix + 'grid-body',
layout: 'fit',
/**
* Boolean to indicate that a view has been injected into the panel.
* @property hasView
*/
hasView: false,
// each panel should dictate what viewType and selType to use
viewType: null,
selType: 'rowmodel',
/**
* @cfg {Number} scrollDelta
* Number of pixels to scroll when scrolling with mousewheel.
* Defaults to 40.
*/
scrollDelta: 40,
/**
* @cfg {String/Boolean} scroll
* Valid values are 'both', 'horizontal' or 'vertical'. true implies 'both'. false implies 'none'.
* Defaults to true.
*/
scroll: true,
/**
* @cfg {Array} columns
* An array of {@link Ext.grid.column.Column column} definition objects which define all columns that appear in this grid. Each
* column definition provides the header text for the column, and a definition of where the data for that column comes from.
*/
/**
* @cfg {Boolean} forceFit
* Specify as <code>true</code> to force the columns to fit into the available width. Headers are first sized according to configuration, whether that be
* a specific width, or flex. Then they are all proportionally changed in width so that the entire content width is used..
*/
* @cfg {Boolean} hideHeaders
* Specify as <code>true</code> to hide the headers.
*/
/**
* @cfg {Boolean} sortableColumns
* Defaults to true. Set to false to disable column sorting via clicking the
* header and via the Sorting menu items.
*/
sortableColumns: true,
verticalScrollDock: 'right',
verticalScrollerType: 'gridscroller',
horizontalScrollerPresentCls: Ext.baseCSSPrefix + 'horizontal-scroller-present',
verticalScrollerPresentCls: Ext.baseCSSPrefix + 'vertical-scroller-present',
// private property used to determine where to go down to find views
// this is here to support locking.
scrollerOwner: true,
invalidateScrollerOnRefresh: true,
enableColumnMove: true,
enableColumnResize: true,
initComponent: function() {
//<debug>
if (!this.viewType) {
Ext.Error.raise("You must specify a viewType config.");
}
if (!this.store) {
Ext.Error.raise("You must specify a store config");
}
if (this.headers) {
Ext.Error.raise("The headers config is not supported. Please specify columns instead.");
}
//</debug>
var me = this,
scroll = me.scroll,
vertical = false,
horizontal = false,
headerCtCfg = me.columns || me.colModel,
i = 0,
view,
border = me.border;
// Set our determinScrollbars method to reference a buffered call to determinScrollbars which fires on a 30ms buffer.
me.determineScrollbars = Ext.Function.createBuffered(me.determineScrollbars, 30);
me.injectView = Ext.Function.createBuffered(me.injectView, 30);
if (me.hideHeaders) {
border = false;
}
// The columns/colModel config may be either a fully instantiated HeaderContainer, or an array of Column definitions, or a config object of a HeaderContainer
// Either way, we extract a columns property referencing an array of Column definitions.
if (headerCtCfg instanceof Ext.grid.header.Container) {
me.headerCt = headerCtCfg;
me.headerCt.border = border;
me.columns = me.headerCt.items.items;
} else {
if (Ext.isArray(headerCtCfg)) {
headerCtCfg = {
items: headerCtCfg,
border: border
};
}
Ext.apply(headerCtCfg, {
forceFit: me.forceFit,
sortable: me.sortableColumns,
enableColumnMove: me.enableColumnMove,
enableColumnResize: me.enableColumnResize,
border: border
});
me.columns = headerCtCfg.items;
// If any of the Column objects contain a locked property, and are not processed, this is a lockable TablePanel, a
// special view will be injected by the Ext.grid.Lockable mixin, so no processing of .
if (Ext.ComponentQuery.query('{locked !== undefined}{processed != true}', me.columns).length) {
me.self.mixin('lockable', Ext.grid.Lockable);
me.injectLockable();
}
}
me.store = Ext.data.StoreManager.lookup(me.store);
me.addEvents(
/**
* @event scrollerhide
* Fires when a scroller is hidden
* @param {Ext.grid.Scroller} scroller
* @param {String} orientation Orientation, can be 'vertical' or 'horizontal'
*/
'scrollerhide',
/**
* @event scrollershow
* Fires when a scroller is shown
* @param {Ext.grid.Scroller} scroller
* @param {String} orientation Orientation, can be 'vertical' or 'horizontal'
*/
'scrollershow'
);
me.bodyCls = me.bodyCls || '';
me.bodyCls += (' ' + me.extraBodyCls);
// autoScroll is not a valid configuration
delete me.autoScroll;
// If this TablePanel is lockable (Either configured lockable, or any of the defined columns has a 'locked' property)
// than a special lockable view containing 2 side-by-side grids will have been injected so we do not need to set up any UI.
if (!me.hasView) {
// If we were not configured with a ready-made headerCt (either by direct config with a headerCt property, or by passing
// a HeaderContainer instance as the 'columns' property, then go ahead and create one from the config object created above.
if (!me.headerCt) {
me.headerCt = Ext.create('Ext.grid.header.Container', headerCtCfg);
}
// Extract the array of Column objects
me.columns = me.headerCt.items.items;
if (me.hideHeaders) {
me.headerCt.height = 0;
me.headerCt.border = false;
me.headerCt.addCls(Ext.baseCSSPrefix + 'grid-header-ct-hidden');
me.addCls(Ext.baseCSSPrefix + 'grid-header-hidden');
// IE Quirks Mode fix
// If hidden configuration option was used, several layout calculations will be bypassed.
if (Ext.isIEQuirks) {
me.headerCt.style = {
display: 'none'
};
}
}
// turn both on.
if (scroll === true || scroll === 'both') {
vertical = horizontal = true;
} else if (scroll === 'horizontal') {
horizontal = true;
} else if (scroll === 'vertical') {
vertical = true;
// All other values become 'none' or false.
} else {
me.headerCt.availableSpaceOffset = 0;
}
if (vertical) {
me.verticalScroller = me.verticalScroller || {};
Ext.applyIf(me.verticalScroller, {
dock: me.verticalScrollDock,
xtype: me.verticalScrollerType,
store: me.store
});
me.verticalScroller = Ext.ComponentManager.create(me.verticalScroller);
me.mon(me.verticalScroller, {
bodyscroll: me.onVerticalScroll,
scope: me
});
}
if (horizontal) {
me.horizontalScroller = Ext.ComponentManager.create({
xtype: 'gridscroller',
section: me,
dock: 'bottom',
store: me.store
});
me.mon(me.horizontalScroller, {
bodyscroll: me.onHorizontalScroll,
scope: me
});
}
me.headerCt.on('columnresize', me.onHeaderResize, me);
me.relayEvents(me.headerCt, ['columnresize', 'columnmove', 'columnhide', 'columnshow', 'sortchange']);
me.features = me.features || [];
me.dockedItems = me.dockedItems || [];
me.dockedItems.unshift(me.headerCt);
me.viewConfig = me.viewConfig || {};
me.viewConfig.invalidateScrollerOnRefresh = me.invalidateScrollerOnRefresh;
// AbstractDataView will look up a Store configured as an object
// getView converts viewConfig into a View instance
view = me.getView();
if (view) {
me.mon(view.store, {
load: me.onStoreLoad,
scope: me
});
me.mon(view, {
refresh: {
fn: this.onViewRefresh,
scope: me,
buffer: 50
},
itemupdate: me.onViewItemUpdate,
scope: me
});
this.relayEvents(view, [
/**
* @event beforeitemmousedown
* Fires before the mousedown event on an item is processed. Returns false to cancel the default action.
* @param {Ext.view.View} this
* @param {Ext.data.Model} record The record that belongs to the item
* @param {HTMLElement} item The item's element
* @param {Number} index The item's index
* @param {Ext.EventObject} e The raw event object
*/
'beforeitemmousedown',
/**
* @event beforeitemmouseup
* Fires before the mouseup event on an item is processed. Returns false to cancel the default action.
* @param {Ext.view.View} this
* @param {Ext.data.Model} record The record that belongs to the item
* @param {HTMLElement} item The item's element
* @param {Number} index The item's index
* @param {Ext.EventObject} e The raw event object
*/
'beforeitemmouseup',
/**
* @event beforeitemmouseenter
* Fires before the mouseenter event on an item is processed. Returns false to cancel the default action.
* @param {Ext.view.View} this
* @param {Ext.data.Model} record The record that belongs to the item
* @param {HTMLElement} item The item's element
* @param {Number} index The item's index
* @param {Ext.EventObject} e The raw event object
*/
'beforeitemmouseenter',
/**
* @event beforeitemmouseleave
* Fires before the mouseleave event on an item is processed. Returns false to cancel the default action.
* @param {Ext.view.View} this
* @param {Ext.data.Model} record The record that belongs to the item
* @param {HTMLElement} item The item's element
* @param {Number} index The item's index
* @param {Ext.EventObject} e The raw event object
*/
'beforeitemmouseleave',
/**
* @event beforeitemclick
* Fires before the click event on an item is processed. Returns false to cancel the default action.
* @param {Ext.view.View} this
* @param {Ext.data.Model} record The record that belongs to the item
* @param {HTMLElement} item The item's element
* @param {Number} index The item's index
* @param {Ext.EventObject} e The raw event object
*/
'beforeitemclick',
/**
* @event beforeitemdblclick
* Fires before the dblclick event on an item is processed. Returns false to cancel the default action.
* @param {Ext.view.View} this
* @param {Ext.data.Model} record The record that belongs to the item
* @param {HTMLElement} item The item's element
* @param {Number} index The item's index
* @param {Ext.EventObject} e The raw event object
*/
'beforeitemdblclick',
* @event beforeitemcontextmenu
* Fires before the contextmenu event on an item is processed. Returns false to cancel the default action.
* @param {Ext.view.View} this
* @param {Ext.data.Model} record The record that belongs to the item
* @param {HTMLElement} item The item's element
* @param {Number} index The item's index
* @param {Ext.EventObject} e The raw event object
*/
'beforeitemcontextmenu',
/**
* @event itemmousedown
* Fires when there is a mouse down on an item
* @param {Ext.view.View} this
* @param {Ext.data.Model} record The record that belongs to the item
* @param {HTMLElement} item The item's element
* @param {Number} index The item's index
* @param {Ext.EventObject} e The raw event object
*/
'itemmousedown',
/**
* @event itemmouseup
* Fires when there is a mouse up on an item
* @param {Ext.view.View} this
* @param {Ext.data.Model} record The record that belongs to the item
* @param {HTMLElement} item The item's element
* @param {Number} index The item's index
* @param {Ext.EventObject} e The raw event object
*/
'itemmouseup',
/**
* @event itemmouseenter
* Fires when the mouse enters an item.
* @param {Ext.view.View} this
* @param {Ext.data.Model} record The record that belongs to the item
* @param {HTMLElement} item The item's element
* @param {Number} index The item's index
* @param {Ext.EventObject} e The raw event object
*/
'itemmouseenter',
/**
* @event itemmouseleave
* Fires when the mouse leaves an item.
* @param {Ext.view.View} this
* @param {Ext.data.Model} record The record that belongs to the item
* @param {HTMLElement} item The item's element
* @param {Number} index The item's index
* @param {Ext.EventObject} e The raw event object
*/
'itemmouseleave',
/**
* @event itemclick
* Fires when an item is clicked.
* @param {Ext.view.View} this
* @param {Ext.data.Model} record The record that belongs to the item
* @param {HTMLElement} item The item's element
* @param {Number} index The item's index
* @param {Ext.EventObject} e The raw event object
*/
'itemclick',
/**
* @event itemdblclick
* Fires when an item is double clicked.
* @param {Ext.view.View} this
* @param {Ext.data.Model} record The record that belongs to the item
* @param {HTMLElement} item The item's element
* @param {Number} index The item's index
* @param {Ext.EventObject} e The raw event object
*/
'itemdblclick',
* @event itemcontextmenu
* Fires when an item is right clicked.
* @param {Ext.view.View} this
* @param {Ext.data.Model} record The record that belongs to the item
* @param {HTMLElement} item The item's element
* @param {Number} index The item's index
* @param {Ext.EventObject} e The raw event object
*/
'itemcontextmenu',
/**
* @event beforecontainermousedown
* Fires before the mousedown event on the container is processed. Returns false to cancel the default action.
* @param {Ext.view.View} this
* @param {Ext.EventObject} e The raw event object
*/
'beforecontainermousedown',
/**
* @event beforecontainermouseup
* Fires before the mouseup event on the container is processed. Returns false to cancel the default action.
* @param {Ext.view.View} this
* @param {Ext.EventObject} e The raw event object
*/
'beforecontainermouseup',
/**
* @event beforecontainermouseover
* Fires before the mouseover event on the container is processed. Returns false to cancel the default action.
* @param {Ext.view.View} this
* @param {Ext.EventObject} e The raw event object
*/
'beforecontainermouseover',
/**
* @event beforecontainermouseout
* Fires before the mouseout event on the container is processed. Returns false to cancel the default action.
* @param {Ext.view.View} this
* @param {Ext.EventObject} e The raw event object
*/
'beforecontainermouseout',
/**
* @event beforecontainerclick
* Fires before the click event on the container is processed. Returns false to cancel the default action.
* @param {Ext.view.View} this
* @param {Ext.EventObject} e The raw event object
*/
'beforecontainerclick',
/**
* @event beforecontainerdblclick
* Fires before the dblclick event on the container is processed. Returns false to cancel the default action.
* @param {Ext.view.View} this
* @param {Ext.EventObject} e The raw event object
*/
'beforecontainerdblclick',
* @event beforecontainercontextmenu
* Fires before the contextmenu event on the container is processed. Returns false to cancel the default action.
* @param {Ext.view.View} this
* @param {Ext.EventObject} e The raw event object
*/
'beforecontainercontextmenu',
/**
* @event containermouseup
* Fires when there is a mouse up on the container
* @param {Ext.view.View} this
* @param {Ext.EventObject} e The raw event object
*/
'containermouseup',
/**
* @event containermouseover
* Fires when you move the mouse over the container.
* @param {Ext.view.View} this
* @param {Ext.EventObject} e The raw event object
*/
'containermouseover',
/**
* @event containermouseout
* Fires when you move the mouse out of the container.
* @param {Ext.view.View} this
* @param {Ext.EventObject} e The raw event object
*/
'containermouseout',
/**
* @event containerclick
* Fires when the container is clicked.
* @param {Ext.view.View} this
* @param {Ext.EventObject} e The raw event object
*/
'containerclick',
/**
* @event containerdblclick
* Fires when the container is double clicked.
* @param {Ext.view.View} this
* @param {Ext.EventObject} e The raw event object
*/
'containerdblclick',
* @event containercontextmenu
* Fires when the container is right clicked.
* @param {Ext.view.View} this
* @param {Ext.EventObject} e The raw event object
*/
'containercontextmenu',
/**
* @event selectionchange
* Fires when the selected nodes change. Relayed event from the underlying selection model.
* @param {Ext.view.View} this
* @param {Array} selections Array of the selected nodes
*/
'selectionchange',
/**
* @event beforeselect
* Fires before a selection is made. If any handlers return false, the selection is cancelled.
* @param {Ext.view.View} this
* @param {HTMLElement} node The node to be selected
* @param {Array} selections Array of currently selected nodes
*/
'beforeselect'
]);
}
}
me.callParent(arguments);
},
// state management
initStateEvents: function(){
var events = this.stateEvents;
// push on stateEvents if they don't exist
Ext.each(['columnresize', 'columnmove', 'columnhide', 'columnshow', 'sortchange'], function(event){
if (Ext.Array.indexOf(events, event)) {
events.push(event);
}
});
this.callParent();
},
getState: function(){
var state = {
columns: []
},
sorter = this.store.sorters.first();
this.headerCt.items.each(function(header){
state.columns.push({
id: header.headerId,
width: header.flex ? undefined : header.width,
hidden: header.hidden,
sortable: header.sortable
});
});
if (sorter) {
state.sort = {
property: sorter.property,
direction: sorter.direction
};
}
return state;
},
applyState: function(state) {
var headers = state.columns,
length = headers ? headers.length : 0,
headerCt = this.headerCt,
items = headerCt.items,
sorter = state.sort,
store = this.store,
i = 0,
index,
headerState,
header;
for (; i < length; ++i) {
headerState = headers[i];
header = headerCt.down('gridcolumn[headerId=' + headerState.id + ']');
index = items.indexOf(header);
if (i !== index) {
headerCt.moveHeader(index, i);
}
header.sortable = headerState.sortable;
if (Ext.isDefined(headerState.width)) {
delete header.flex;
if (header.rendered) {
header.setWidth(headerState.width);
} else {
header.minWidth = header.width = headerState.width;
}
}
header.hidden = headerState.hidden;
}
if (sorter) {
if (store.remoteSort) {
store.sorters.add(Ext.create('Ext.util.Sorter', {
property: sorter.property,
direction: sorter.direction
}));
}
else {
store.sort(sorter.property, sorter.direction);
}
}
},
/**
* Returns the store associated with this Panel.
* @return {Ext.data.Store} The store
*/
getStore: function(){
return this.store;
},
/**
* Gets the view for this panel.
* @return {Ext.view.Table}
*/
getView: function() {
var me = this,
sm;
if (!me.view) {
sm = me.getSelectionModel();
me.view = me.createComponent(Ext.apply({}, me.viewConfig, {
xtype: me.viewType,
store: me.store,
headerCt: me.headerCt,
selModel: sm,
features: me.features,
panel: me
}));
me.mon(me.view, {
uievent: me.processEvent,
scope: me
});
sm.view = me.view;
me.headerCt.view = me.view;
me.relayEvents(me.view, ['cellclick', 'celldblclick']);
}
return me.view;
},
/**
* @private
* @override
* autoScroll is never valid for all classes which extend TablePanel.
*/
setAutoScroll: Ext.emptyFn,
// This method hijacks Ext.view.Table's el scroll method.
// This enables us to keep the virtualized scrollbars in sync
// with the view. It currently does NOT support animation.
elScroll: function(direction, distance, animate) {
var me = this,
scroller;
if (direction === "up" || direction === "left") {
distance = -distance;
}
if (direction === "down" || direction === "up") {
scroller = me.getVerticalScroller();
scroller.scrollByDeltaY(distance);
} else {
scroller = me.getHorizontalScroller();
scroller.scrollByDeltaX(distance);
}
},
afterLayout: function() {
this.callParent(arguments);
this.injectView();
},
/**
* @private
* Called after this Component has achieved its correct initial size, after all layouts have done their thing.
* This is so we can add the View only after the initial size is known. This method is buffered 30ms.
*/
injectView: function() {
if (!this.hasView && !this.collapsed) {
var me = this,
view = me.getView();
me.hasView = true;
me.add(view);
// hijack the view el's scroll method
view.el.scroll = Ext.Function.bind(me.elScroll, me);
// We use to listen to document.body wheel events, but that's a
// little much. We scope just to the view now.
me.mon(view.el, {
mousewheel: me.onMouseWheel,
scope: me
});
}
},
afterExpand: function() {
this.callParent(arguments);
if (!this.hasView) {
this.injectView();
}
},
/**
* @private
* Process UI events from the view. Propagate them to whatever internal Components need to process them
* @param {String} type Event type, eg 'click'
* @param {TableView} view TableView Component
* @param {HtmlElement} cell Cell HtmlElement the event took place within
* @param {Number} recordIndex Index of the associated Store Model (-1 if none)
* @param {Number} cellIndex Cell index within the row
* @param {EventObject} e Original event
*/
processEvent: function(type, view, cell, recordIndex, cellIndex, e) {
var me = this,
header;
if (cellIndex !== -1) {
header = me.headerCt.getGridColumns()[cellIndex];
return header.processEvent.apply(header, arguments);
}
},
/**
* Request a recalculation of scrollbars and put them in if they are needed.
*/
determineScrollbars: function() {
var me = this,
viewElDom,
centerScrollWidth,
centerClientWidth,
scrollHeight,
clientHeight;
if (!me.collapsed && me.view && me.view.el) {
viewElDom = me.view.el.dom;
//centerScrollWidth = viewElDom.scrollWidth;
centerScrollWidth = me.headerCt.getFullWidth();
/**
* clientWidth often returns 0 in IE resulting in an
* infinity result, here we use offsetWidth bc there are
* no possible scrollbars and we don't care about margins
*/
centerClientWidth = viewElDom.offsetWidth;
if (me.verticalScroller && me.verticalScroller.el) {
scrollHeight = me.verticalScroller.getSizeCalculation().height;
} else {
scrollHeight = viewElDom.scrollHeight;
}
clientHeight = viewElDom.clientHeight;
if (!me.collapsed && scrollHeight > clientHeight) {
me.showVerticalScroller();
} else {
me.hideVerticalScroller();
}
if (!me.collapsed && centerScrollWidth > (centerClientWidth + Ext.getScrollBarWidth() - 2)) {
me.showHorizontalScroller();
} else {
me.hideHorizontalScroller();
}
}
},
onHeaderResize: function() {
if (this.view && this.view.rendered) {
this.determineScrollbars();
this.invalidateScroller();
}
},
/**
* Hide the verticalScroller and remove the horizontalScrollerPresentCls.
*/
hideHorizontalScroller: function() {
var me = this;
if (me.horizontalScroller && me.horizontalScroller.ownerCt === me) {
me.verticalScroller.offsets.bottom = 0;
me.removeDocked(me.horizontalScroller, false);
me.removeCls(me.horizontalScrollerPresentCls);
me.fireEvent('scrollerhide', me.horizontalScroller, 'horizontal');
}
},
/**
* Show the horizontalScroller and add the horizontalScrollerPresentCls.
*/
showHorizontalScroller: function() {
var me = this;
if (me.verticalScroller) {
me.verticalScroller.offsets.bottom = Ext.getScrollBarWidth() - 2;
}
if (me.horizontalScroller && me.horizontalScroller.ownerCt !== me) {
me.addDocked(me.horizontalScroller);
me.addCls(me.horizontalScrollerPresentCls);
me.fireEvent('scrollershow', me.horizontalScroller, 'horizontal');
}
},
/**
* Hide the verticalScroller and remove the verticalScrollerPresentCls.
*/
hideVerticalScroller: function() {
var me = this,
headerCt = me.headerCt;
// only trigger a layout when reserveOffset is changing
if (headerCt && headerCt.layout.reserveOffset) {
headerCt.layout.reserveOffset = false;
headerCt.doLayout();
}
if (me.verticalScroller && me.verticalScroller.ownerCt === me) {
me.removeDocked(me.verticalScroller, false);
me.removeCls(me.verticalScrollerPresentCls);
me.fireEvent('scrollerhide', me.verticalScroller, 'vertical');
}
},
/**
* Show the verticalScroller and add the verticalScrollerPresentCls.
*/
showVerticalScroller: function() {
var me = this,
headerCt = me.headerCt;
// only trigger a layout when reserveOffset is changing
if (headerCt && !headerCt.layout.reserveOffset) {
headerCt.layout.reserveOffset = true;
headerCt.doLayout();
}
if (me.verticalScroller && me.verticalScroller.ownerCt !== me) {
me.addDocked(me.verticalScroller);
me.addCls(me.verticalScrollerPresentCls);
me.fireEvent('scrollershow', me.verticalScroller, 'vertical');
}
},
/**
* Invalides scrollers that are present and forces a recalculation.
* (Not related to showing/hiding the scrollers)
*/
invalidateScroller: function() {
var me = this,
vScroll = me.verticalScroller,
hScroll = me.horizontalScroller;
if (vScroll) {
vScroll.invalidate();
}
if (hScroll) {
hScroll.invalidate();
}
},
// refresh the view when a header moves
onHeaderMove: function(headerCt, header, fromIdx, toIdx) {
this.view.refresh();
},
// Section onHeaderHide is invoked after view.
onHeaderHide: function(headerCt, header) {
this.invalidateScroller();
},
onHeaderShow: function(headerCt, header) {
this.invalidateScroller();
},
getVerticalScroller: function() {
return this.getScrollerOwner().down('gridscroller[dock=' + this.verticalScrollDock + ']');
},
getHorizontalScroller: function() {
return this.getScrollerOwner().down('gridscroller[dock=bottom]');
},
onMouseWheel: function(e) {
var me = this,
browserEvent = e.browserEvent,
vertScroller = me.getVerticalScroller(),
horizScroller = me.getHorizontalScroller(),
scrollDelta = me.scrollDelta,
deltaY, deltaX,
vertScrollerEl, horizScrollerEl,
origScrollLeft, origScrollTop,
newScrollLeft, newScrollTop;
// Track original scroll values, so we can see if we've
// reached the end of our scroll height/width.
if (horizScroller) {
horizScrollerEl = horizScroller.el;
if (horizScrollerEl) {
origScrollLeft = horizScrollerEl.dom.scrollLeft;
}
}
if (vertScroller) {
vertScrollerEl = vertScroller.el;
if (vertScrollerEl) {
origScrollTop = vertScrollerEl.dom.scrollTop;
}
}
// Webkit Horizontal Axis
if (browserEvent.wheelDeltaX || browserEvent.wheelDeltaY) {
deltaX = -browserEvent.wheelDeltaX / 120 * scrollDelta / 3;
deltaY = -browserEvent.wheelDeltaY / 120 * scrollDelta / 3;
if (horizScroller) {
newScrollLeft = horizScroller.scrollByDeltaX(deltaX);
}
if (vertScroller) {
newScrollTop = vertScroller.scrollByDeltaY(deltaY);
}
} else {
// Gecko Horizontal Axis
if (browserEvent.axis && browserEvent.axis === 1) {
if (horizScroller) {
deltaX = -(scrollDelta * e.getWheelDelta()) / 3;
newScrollLeft = horizScroller.scrollByDeltaX(deltaX);
}
} else {
if (vertScroller) {
deltaY = -(scrollDelta * e.getWheelDelta() / 3);
newScrollTop = vertScroller.scrollByDeltaY(deltaY);
}
}
}
// If after given our delta, the scroller has not progressed, then we're
// at the end of our scroll range and shouldn't stop the browser event.
if ((deltaX !== 0 && newScrollLeft !== origScrollLeft) ||
(deltaY !== 0 && newScrollTop !== origScrollTop)) {
e.stopEvent();
}
},
/**
* @private
* Determine and invalidate scrollers on view refresh
*/
onViewRefresh: function() {
if (Ext.isIE) {
this.syncCellHeight();
}
this.determineScrollbars();
if (this.invalidateScrollerOnRefresh) {
this.invalidateScroller();
}
},
onViewItemUpdate: function(record, index, tr) {
if (Ext.isIE) {
this.syncCellHeight([tr]);
}
},
// BrowserBug: IE will not stretch the td to fit the height of the entire
// tr, so manually sync cellheights on refresh and when an item has been
// updated.
syncCellHeight: function(trs) {
var me = this,
i = 0,
tds,
j, tdsLn,
tr, td,
trsLn,
rowHeights = [],
cellHeights,
cellClsSelector = ('.' + Ext.baseCSSPrefix + 'grid-cell');
trs = trs || me.view.getNodes();
trsLn = trs.length;
// Reading loop
for (; i < trsLn; i++) {
tr = trs[i];
tds = Ext.fly(tr).query(cellClsSelector);
tdsLn = tds.length;
cellHeights = [];
for (j = 0; j < tdsLn; j++) {
td = tds[j];
cellHeights.push(td.clientHeight);
}
rowHeights.push(Ext.Array.max(cellHeights));
}
// Setting loop
for (i = 0; i < trsLn; i++) {
tr = trs[i];
tdsLn = tr.childNodes.length;
for (j = 0; j < tdsLn; j++) {
td = Ext.fly(tr.childNodes[j]);
if (rowHeights[i]) {
if (td.is(cellClsSelector)) {
td.setHeight(rowHeights[i]);
} else {
td.down(cellClsSelector).setHeight(rowHeights[i]);
}
}
}
}
},
/**
* Sets the scrollTop of the TablePanel.
* @param {Number} deltaY
*/
setScrollTop: function(top) {
var me = this,
rootCmp = me.getScrollerOwner(),
verticalScroller = me.getVerticalScroller();
rootCmp.virtualScrollTop = top;
if (verticalScroller) {
verticalScroller.setScrollTop(top);
}
},
getScrollerOwner: function() {
var rootCmp = this;
if (!this.scrollerOwner) {
rootCmp = this.up('[scrollerOwner]');
}
return rootCmp;
},
/**
* Scrolls the TablePanel by deltaY
* @param {Number} deltaY
*/
scrollByDeltaY: function(deltaY) {
var rootCmp = this.getScrollerOwner(),
scrollerRight;
scrollerRight = rootCmp.down('gridscroller[dock=' + this.verticalScrollDock + ']');
if (scrollerRight) {
scrollerRight.scrollByDeltaY(deltaY);
}
},
/**
* Scrolls the TablePanel by deltaX
* @param {Number} deltaY
*/
scrollByDeltaX: function(deltaX) {
this.horizontalScroller.scrollByDeltaX(deltaX);
},
/**
* Get left hand side marker for header resizing.
* @private
*/
getLhsMarker: function() {
var me = this;
if (!me.lhsMarker) {
me.lhsMarker = Ext.core.DomHelper.append(me.el, {
cls: Ext.baseCSSPrefix + 'grid-resize-marker'
}, true);
}
return me.lhsMarker;
},
/**
* Get right hand side marker for header resizing.
* @private
*/
getRhsMarker: function() {
var me = this;
if (!me.rhsMarker) {
me.rhsMarker = Ext.core.DomHelper.append(me.el, {
cls: Ext.baseCSSPrefix + 'grid-resize-marker'
}, true);
}
return me.rhsMarker;
},
/**
* Returns the selection model being used and creates it via the configuration
* if it has not been created already.
* @return {Ext.selection.Model} selModel
*/
getSelectionModel: function(){
if (!this.selModel) {
this.selModel = {};
}
var mode = 'SINGLE',
type;
if (this.simpleSelect) {
mode = 'SIMPLE';
} else if (this.multiSelect) {
mode = 'MULTI';
}
Ext.applyIf(this.selModel, {
allowDeselect: this.allowDeselect,
mode: mode
});
if (!this.selModel.events) {
type = this.selModel.selType || this.selType;
this.selModel = Ext.create('selection.' + type, this.selModel);
}
if (!this.selModel.hasRelaySetup) {
this.relayEvents(this.selModel, ['selectionchange', 'select', 'deselect']);
this.selModel.hasRelaySetup = true;
}
// lock the selection model if user
// has disabled selection
if (this.disableSelection) {
this.selModel.locked = true;
}
return this.selModel;
},
onVerticalScroll: function(event, target) {
var owner = this.getScrollerOwner(),
items = owner.query('tableview'),
i = 0,
len = items.length;
for (; i < len; i++) {
items[i].el.dom.scrollTop = target.scrollTop;
}
},
onHorizontalScroll: function(event, target) {
var owner = this.getScrollerOwner(),
items = owner.query('tableview'),
i = 0,
len = items.length,
center,
centerEl,
centerScrollWidth,
centerClientWidth,
width;
center = items[1] || items[0];
centerEl = center.el.dom;
centerScrollWidth = centerEl.scrollWidth;
centerClientWidth = centerEl.offsetWidth;
width = this.horizontalScroller.getWidth();
centerEl.scrollLeft = target.scrollLeft;
this.headerCt.el.dom.scrollLeft = target.scrollLeft;
},
// template method meant to be overriden
onStoreLoad: Ext.emptyFn,
getEditorParent: function() {
return this.body;
},
bindStore: function(store) {
var me = this;
me.store = store;
me.getView().bindStore(store);
},
reconfigure: function(store, columns) {
var me = this;
if (me.lockable) {
me.reconfigureLockable(store, columns);
return;
}
if (columns) {
me.headerCt.removeAll();
me.headerCt.add(columns);
}
if (store) {
store = Ext.StoreManager.lookup(store);
me.bindStore(store);
} else {
me.getView().refresh();
}
},
afterComponentLayout: function() {
this.callParent(arguments);
this.determineScrollbars();
this.invalidateScroller();
}
});