ab9a926b36c2aa87e6e67a5179834093ed233ff4Luke Smith// API Doc comments disabled to avoid deprecated class leakage into
ab9a926b36c2aa87e6e67a5179834093ed233ff4Luke Smith// non-deprecated class API docs. See the 3.4.1 datatable API doc files in the
ab9a926b36c2aa87e6e67a5179834093ed233ff4Luke Smith// download at http://yui.zenfs.com/releases/yui3/yui_3.4.1.zip for reference.
ab9a926b36c2aa87e6e67a5179834093ed233ff4Luke SmithExtends DataTable base to enable x,y, and xy scrolling.
ab9a926b36c2aa87e6e67a5179834093ed233ff4Luke SmithDEPRECATED. As of YUI 3.5.0, DataTable has been rebuilt. This module
ab9a926b36c2aa87e6e67a5179834093ed233ff4Luke Smithis designed to work with `datatable-base-deprecated` (effectively the 3.4.1
ab9a926b36c2aa87e6e67a5179834093ed233ff4Luke Smithversion of DataTable) and will be removed from the library in a future version.
ab9a926b36c2aa87e6e67a5179834093ed233ff4Luke SmithSee http://yuilibrary.com/yui/docs/migration.html for help upgrading to the
ab9a926b36c2aa87e6e67a5179834093ed233ff4Luke Smithlatest version.
ab9a926b36c2aa87e6e67a5179834093ed233ff4Luke SmithFor complete API docs for the classes in this and other deprecated
ab9a926b36c2aa87e6e67a5179834093ed233ff4Luke SmithDataTable-related modules, refer to the static API doc files in the 3.4.1
ab9a926b36c2aa87e6e67a5179834093ed233ff4Luke Smithdownload at http://yui.zenfs.com/releases/yui3/yui_3.4.1.zip
ab9a926b36c2aa87e6e67a5179834093ed233ff4Luke Smith@module datatable-deprecated
ab9a926b36c2aa87e6e67a5179834093ed233ff4Luke Smith@submodule datatable-scroll-deprecated
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith CLASS_SCROLLABLE = YgetClassName(DATATABLE, "scrollable"),
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith CONTAINER_HEADER = '<div class="'+CLASS_HEADER+'"></div>',
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith CONTAINER_BODY = '<div class="'+CLASS_BODY+'"></div>',
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith var testNode = Y.one('body').appendChild('<div style="position:absolute;visibility:hidden;overflow:scroll;width:20px;"><p style="height:1px"/></div>'),
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith width = testNode.get('offsetWidth') - testNode.get('clientWidth');
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith * Adds scrolling to DataTable.
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith * @class DataTableScroll
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith * @extends Plugin.Base
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith DataTableScroll.superclass.constructor.apply(this, arguments);
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith * The width for the table. Set to a string (ex: "200px", "20em") if you want the table to scroll in the x direction.
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith * @attribute width
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith * @type string
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith * The height for the table. Set to a string (ex: "200px", "20em") if you want the table to scroll in the y-direction.
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith * @attribute height
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith * @type string
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith * The scrolling direction for the table.
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith * @attribute scroll
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith * @type string
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith //value: 'y',
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith valueFn: function() {
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith if (w && h) {
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith return 'xy';
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith else if (w) {
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith else if (h) {
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith return null;
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith * The hexadecimal colour value to set on the top-right of the table if a scrollbar exists.
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith * @attribute COLOR_COLUMNFILLER
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith * @type string
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith this._headerContainerNode.setStyle('backgroundColor', param);
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith * The table node created in datatable-base
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith * @property _parentTableNode
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith * @type {Node}
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith * The THEAD node which resides within the table node created in datatable-base
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith * @property _parentTheadNode
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith * @type {Node}
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith * The TBODY node which resides within the table node created in datatable-base
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith * @property _parentTbodyNode
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith * @type {Node}
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith * The TBODY Message node which resides within the table node created in datatable-base
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith * @property _parentMsgNode
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith * @type {Node}
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith * The contentBox specified for the datatable in datatable-base
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith * @property _parentContainer
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith * @type {Node}
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith * The DIV node that contains all the scrollable elements (a table with a tbody on it)
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith * @property _bodyContainerNode
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith * @type {Node}
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith * The DIV node that contains a table with a THEAD in it (which syncs its horizontal scroll with the _bodyContainerNode above)
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith * @property _headerContainerNode
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith * @type {Node}
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith //--------------------------------------
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith //--------------------------------------
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith this._parentContainer.addClass(CLASS_SCROLLABLE);
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith /////////////////////////////////////////////////////////////////////////////
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith // Set up Table Nodes
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith /////////////////////////////////////////////////////////////////////////////
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith * Set up methods to fire after host methods execute
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith * @method _setUpNodes
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith this.afterHostMethod("_addTableNode", this._setUpParentTableNode);
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith this.afterHostMethod("_addTheadNode", this._setUpParentTheadNode);
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith this.afterHostMethod("_addTbodyNode", this._setUpParentTbodyNode);
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith this.afterHostMethod("_addMessageNode", this._setUpParentMessageNode);
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith //this.beforeHostMethod('renderUI', this._removeCaptionNode);
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith this.afterHostMethod('_attachTheadThNode', this._attachTheadThNode);
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith this.afterHostMethod('_attachTbodyTdNode', this._attachTbodyTdNode);
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith * Stores the main <table> node provided by the host as a private property
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith * @method _setUpParentTableNode
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith this._parentTableNode = this.get('host')._tableNode;
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith * Stores the main <thead> node provided by the host as a private property
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith * @method _setUpParentTheadNode
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith this._parentTheadNode = this.get('host')._theadNode;
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith * Stores the main <tbody> node provided by the host as a private property
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith * @method _setUpParentTbodyNode
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith this._parentTbodyNode = this.get('host')._tbodyNode;
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith * Stores the main <tbody> message node provided by the host as a private property
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith * @method _setUpParentMessageNode
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith /////////////////////////////////////////////////////////////////////////////
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith /////////////////////////////////////////////////////////////////////////////
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith * Primary rendering method that takes the datatable rendered in
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith * the host, and splits it up into two separate <divs> each containing two
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith * separate tables (one containing the head and one containing the body).
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith * This method fires after renderUI is called on datatable-base.
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith * @method renderUI
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith renderUI: function() {
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith //Y.Profiler.start('render');
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith //Y.Profiler.stop('render');
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith //console.log(Y.Profiler.getReport("render"));
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith Binds event subscriptions to keep the state and UI in sync
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith @method bindUI
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith bindUI: function () {
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith // FIXME: I don't know why the string bind, but I don't want to break
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith // stuff until I have time to rebuild it properly
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith this._bodyContainerNode.on('scroll', Y.bind("_onScroll", this));
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith this.afterHostEvent("recordsetChange", this.syncUI);
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith this.afterHostEvent("recordset:recordsChange", this.syncUI);
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith * Post rendering method that is responsible for creating a column
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith * filler, and performing width and scroll synchronization between the <th>
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith * elements and the <td> elements.
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith * This method fires after syncUI is called on datatable-base
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith * @method syncUI
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith syncUI: function() {
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith //Y.Profiler.start('sync');
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith //Y.Profiler.stop('sync');
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith //console.log(Y.Profiler.getReport("sync"));
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith * Remove the caption created in base. Scrolling datatables dont support captions.
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith * @method _removeCaptionNode
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith //Y.DataTable.Base.prototype.createCaption = function(v) {/*do nothing*/};
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith //Y.DataTable.Base.prototype._uiSetCaption = function(v) {/*do nothing*/};
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith * Adjusts the width of the TH and the TDs to make sure that the two are in sync
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith * Implementation Details:
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith * Compares the width of the TH liner div to the the width of the TD node.
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith * The TD liner width is not actually used because the TD often stretches
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith * past the liner if the parent DIV is very large. Measuring the TD width
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith * is more accurate.
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith * Instead of measuring via .get('width'), 'clientWidth' is used, as it
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith * returns a number, whereas 'width' returns a string, In IE6,
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith * 'clientWidth' is not supported, so 'offsetWidth' is used. 'offsetWidth'
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith * is not as accurate on Chrome,FF as 'clientWidth' - thus the need for
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith * @method _syncWidths
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith var headerTable = this._parentContainer.one('.' + CLASS_HEADER),
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith bodyTable = this._parentContainer.one('.' + CLASS_BODY),
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith // nodelist of all the THs
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith headers = headerTable.all('thead .' + CLASS_LINER),
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith // nodelist of the TDs in the first row
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith firstRow = bodyTable.one('.' + CLASS_DATA + ' tr'),
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith cells = firstRow && firstRow.all('.' + CLASS_LINER),
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith // FIXME: Code smell
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith widthProperty = (YUA.ie) ? 'offsetWidth' : 'clientWidth';
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith //stylesheet = new YStyleSheet('columnsSheet'),
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith //className;
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith // If there are data rows, iterate each header and the cells of the
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith // first row comparing cell widths. Assign the larger width to the
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith // narrower node (header or cell).
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith width -= (parseInt(header.getComputedStyle('paddingLeft'),10)|0) +
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith (parseInt(header.getComputedStyle('paddingRight'),10)|0);
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith // If browser is not IE - get the clientWidth of the Liner
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith // div and the TD.
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith // Note: We are not getting the width of the TDLiner, we
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith // are getting the width of the actual cell. Why? Because
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith // when the table is set to auto width, the cell will grow
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith // to try to fit the table in its container. The liner
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith // could potentially be much smaller than the cell width.
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith // TODO: Explore if there is a better way using only LINERS
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith // widths - I don't think this should be a problem, given
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith // that the liner is a div, a block element and will
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith // expand to width.
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith // TODO: this should actually be done with
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith // getComputedStyle('width') but this messes up
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith // columns. Explore this option.
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith thWidth = thLiner.get('clientWidth');
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith tdWidth = td.item(i).get('clientWidth');
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith // IE wasn't recognizing clientWidths, so we are using
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith // offsetWidths.
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith // TODO: should use getComputedStyle('width') because
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith // offsetWidth will screw up when padding is changed.
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith // TODO: for some reason, using
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith // tdLiner.get('clientWidth') doesn't work - why not?
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith thWidth = thLiner.get('offsetWidth');
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith tdWidth = td.item(i).get('offsetWidth');
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith //thWidth = parseFloat(thLiner.getComputedStyle('width').split('px')[0]);
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith //tdWidth = parseFloat(td.item(i).getComputedStyle('width').split('px')[0]);
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith // expand the TH or the TD to match the wider
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith if (thWidth > tdWidth) {
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith tdLiner.setStyle('width', (thWidth - 20 + 'px'));
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith //thLiner.setStyle('width', (tdWidth - 20 + 'px'));
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith //stylesheet.set(className,{'width': (thWidth - 20 + 'px')});
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith } else if (tdWidth > thWidth) {
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith // if you don't set an explicit width here, when the width
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith // is set in line 368, it will auto-shrink the widths of
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith // the other cells (because they dont have an explicit
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith thLiner.setStyle('width', (tdWidth - 20 + 'px'));
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith tdLiner.setStyle('width', (tdWidth - 20 + 'px'));
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith //stylesheet.set(className,{'width': (tdWidth - 20 + 'px')});
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith //stylesheet.enable();
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith * Adds the approriate width to the liner divs of the TH nodes before they are appended to DOM
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith * @method _attachTheadThNode
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith * Adds the appropriate width to the liner divs of the TD nodes before they are appended to DOM
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith * @method _attachTbodyTdNode
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith * Creates the body DIV that contains all the data.
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith * @method _createBodyContainer
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith * Creates the DIV that contains a <table> with all the headers.
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith * @method _createHeaderContainer
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith //hd.setStyle('backgroundColor',this.get("COLOR_COLUMNFILLER"));
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith * Creates styles for the TBODY based on what type of table it is.
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith * @method _setStylesForTbody
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith //X-Scrolling tables should not have a Y-Scrollbar so overflow-y is hidden. THe width on x-scrolling tables must be set by user.
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith //Y-Scrolling tables should not have a X-Scrollbar so overflow-x is hidden. The width isn't neccessary because it can be auto.
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith //scrolling is set to 'null' - ie: width and height are not set. Don't have any type of scrolling.
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith * Creates styles for the THEAD based on what type of datatable it is.
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith * @method _setStylesForThead
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith //if (dir !== 'y') {
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith el.setStyles({'width': w, 'overflow': 'hidden'});
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith * Sets an auto width on the content box if it doesn't exist or if its a y-datatable.
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith * @method _setContentBoxDimensions
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith if (this.get('_scroll') === 'y' || (!this.get('width'))) {
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith /////////////////////////////////////////////////////////////////////////////
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith // Scroll Syncing
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith /////////////////////////////////////////////////////////////////////////////
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith * Ensures that scrolling is synced across the two tables
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith * @method _onScroll
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith _onScroll: function() {
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith this._headerContainerNode.set('scrollLeft', this._bodyContainerNode.get('scrollLeft'));
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith * Syncs padding around scrollable tables, including Column header right-padding
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith * and container width and height.
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith * @method _syncScroll
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith _syncScroll : function() {
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith // Bug 1925874
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith this._headerContainerNode.set('scrollLeft', this._bodyContainerNode.get('scrollLeft'));
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith // Bug 1926125
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith * Snaps container width for y-scrolling tables.
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith * @method _syncScrollY
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith _syncScrollY : function() {
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith // X-scrolling not enabled
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith // Snap outer container width to content
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith w = (tBodyContainer.get('scrollHeight') > tBodyContainer.get('clientHeight')) ?
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith // but account for y-scrollbar since it is visible
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith (tBody.get('parentNode').get('clientWidth') + scrollbarWidth()) + "px" :
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith // no y-scrollbar, just borders
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith (tBody.get('parentNode').get('clientWidth') + 2) + "px";
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith * Snaps container height for x-scrolling tables in IE. Syncs message TBODY width.
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith * Taken from YUI2 ScrollingDataTable.js
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith * @method _syncScrollX
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith w = (tBodyContainer.get('scrollWidth') > tBodyContainer.get('offsetWidth')) ?
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith (tBody.get('parentNode').get('offsetHeight') + scrollbarWidth()) + "px" :
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith tBody.get('parentNode').get('offsetHeight') + "px";
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith this._parentMsgNode.get('parentNode').setStyle('width', "");
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith this._parentMsgNode.get('parentNode').setStyle('width', this._parentTheadNode.get('parentNode').get('offsetWidth')+'px');
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith * Adds/removes Column header overhang as necesary.
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith * Taken from YUI2 ScrollingDataTable.js
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith * @method _syncScrollOverhang
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith //when its both x and y scrolling
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith if ((tBodyContainer.get('scrollHeight') > tBodyContainer.get('clientHeight')) || (tBodyContainer.get('scrollWidth') > tBodyContainer.get('clientWidth'))) {
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith // After the widths have synced, there is a wrapping issue in the
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith // headerContainer in IE6. The header does not span the full length of
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith // the table (does not cover all of the y-scrollbar). By adding this
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith // line in when there is a y-scroll, the header will span correctly.
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith // TODO: this should not really occur on this.get('_scroll') === y - it
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith // should occur when scrollHeight > clientHeight, but clientHeight is
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith // not getting recognized in IE6?
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith if (YUA.ie !== 0 && this.get('_scroll') === 'y' && this._bodyContainerNode.get('scrollHeight') > this._bodyContainerNode.get('offsetHeight'))
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith this._headerContainerNode.setStyle('width', this._parentContainer.get('width'));
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith * Sets Column header overhang to given width.
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith * Taken from YUI2 ScrollingDataTable.js with minor modifications
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith * @method _setOverhangValue
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith * @param nBorderWidth {Number} Value of new border for overhang.
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith //lastHeaders = cols[cols.length-1] || [],
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith value = borderWidth + "px solid " + this.get("COLOR_COLUMNFILLER"),
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith children = YNode.all('#'+this._parentContainer.get('id')+ ' .' + CLASS_HEADER + ' table thead th');
a3b15d60042c81a524cebb94370e5a234a19d04bLuke Smith children.item(len-1).setStyle('borderRight', value);