← Back to branch summary

~bac/juju-gui/trunkcopy

« back to all changes in this revision

Viewing changes to lib/yui/build/datatable-scroll-deprecated/datatable-scroll-deprecated-debug.js

  • Committer: kapil.foss at gmail
  • Date: 2012-07-13 18:45:59 UTC
  • Revision ID: kapil.foss@gmail.com-20120713184559-2xl7be17egsrz0c9
reshape

Show diffs side-by-side

added added

removed removed

Lines of Context:
lib/yui/build/datatable-scroll-deprecated/datatable-scroll-deprecated-debug.js
1
 
/*
2
 
YUI 3.5.1 (build 22)
3
 
Copyright 2012 Yahoo! Inc. All rights reserved.
4
 
Licensed under the BSD License.
5
 
http://yuilibrary.com/license/
6
 
*/
7
 
YUI.add('datatable-scroll-deprecated', function(Y) {
8
 
 
9
 
/**
10
 
 * Extends DataTable base to enable x,y, and xy scrolling.
11
 
 * @module datatable
12
 
 * @submodule datatable-scroll
13
 
 */
14
 
 
15
 
 
16
 
var YNode = Y.Node,
17
 
    YLang = Y.Lang,
18
 
    YUA = Y.UA,
19
 
    YgetClassName = Y.ClassNameManager.getClassName,
20
 
    DATATABLE = "datatable",
21
 
    CLASS_HEADER = YgetClassName(DATATABLE, "hd"),
22
 
    CLASS_BODY = YgetClassName(DATATABLE, "bd"),
23
 
    CLASS_DATA = YgetClassName(DATATABLE, "data"),
24
 
    CLASS_LINER = YgetClassName(DATATABLE, "liner"),
25
 
    CLASS_SCROLLABLE = YgetClassName(DATATABLE, "scrollable"),
26
 
    CONTAINER_HEADER = '<div class="'+CLASS_HEADER+'"></div>',
27
 
    CONTAINER_BODY = '<div class="'+CLASS_BODY+'"></div>',
28
 
    TEMPLATE_TABLE = '<table></table>',
29
 
    scrollbarWidth = Y.cached(function () {
30
 
        var testNode = Y.one('body').appendChild('<div style="position:absolute;visibility:hidden;overflow:scroll;width:20px;"><p style="height:1px"/></div>'),
31
 
            width = testNode.get('offsetWidth') - testNode.get('clientWidth');
32
 
 
33
 
        testNode.remove(true);
34
 
 
35
 
        return width;
36
 
    });
37
 
    
38
 
/**
39
 
 * Adds scrolling to DataTable.
40
 
 * @class DataTableScroll
41
 
 * @extends Plugin.Base
42
 
 */
43
 
function DataTableScroll() {
44
 
    DataTableScroll.superclass.constructor.apply(this, arguments);
45
 
}
46
 
 
47
 
Y.mix(DataTableScroll, {
48
 
    NS: "scroll",
49
 
 
50
 
    NAME: "dataTableScroll",
51
 
 
52
 
    ATTRS: {
53
 
    
54
 
        /**
55
 
        *  The width for the table. Set to a string (ex: "200px", "20em") if you want the table to scroll in the x direction.
56
 
        *
57
 
        * @attribute width
58
 
        * @public
59
 
        * @type string
60
 
        */
61
 
        width: {
62
 
            value: undefined,
63
 
            writeOnce: "initOnly"
64
 
        },
65
 
        
66
 
        /**
67
 
        *  The height for the table. Set to a string (ex: "200px", "20em") if you want the table to scroll in the y-direction.
68
 
        *
69
 
        * @attribute height
70
 
        * @public
71
 
        * @type string
72
 
        */
73
 
        height: {
74
 
            value: undefined,
75
 
            writeOnce: "initOnly"
76
 
        },
77
 
        
78
 
        
79
 
        /**
80
 
        *  The scrolling direction for the table.
81
 
        *
82
 
        * @attribute scroll
83
 
        * @private
84
 
        * @type string
85
 
        */
86
 
        _scroll: {
87
 
            //value: 'y',
88
 
            valueFn: function() {
89
 
                var w = this.get('width'),
90
 
                h = this.get('height');
91
 
                
92
 
                if (w && h) {
93
 
                    return 'xy';
94
 
                }
95
 
                else if (w) {
96
 
                    return 'x';
97
 
                }
98
 
                else if (h) {
99
 
                    return 'y';
100
 
                }
101
 
                else {
102
 
                    return null;
103
 
                }
104
 
            }
105
 
        },
106
 
        
107
 
        
108
 
        /**
109
 
        *  The hexadecimal colour value to set on the top-right of the table if a scrollbar exists. 
110
 
        *
111
 
        * @attribute COLOR_COLUMNFILLER
112
 
        * @public
113
 
        * @type string
114
 
        */
115
 
        COLOR_COLUMNFILLER: {
116
 
            value: '#f2f2f2',
117
 
            validator: YLang.isString,
118
 
            setter: function(param) {
119
 
                if (this._headerContainerNode) {
120
 
                    this._headerContainerNode.setStyle('backgroundColor', param);
121
 
                }
122
 
            }
123
 
        }
124
 
    }
125
 
});
126
 
 
127
 
Y.extend(DataTableScroll, Y.Plugin.Base, {
128
 
    
129
 
    /**
130
 
    *  The table node created in datatable-base
131
 
    *
132
 
    * @property _parentTableNode
133
 
    * @private
134
 
    * @type {Node}
135
 
    */
136
 
    _parentTableNode: null,
137
 
    
138
 
    
139
 
    /**
140
 
    *  The THEAD node which resides within the table node created in datatable-base
141
 
    *
142
 
    * @property _parentTheadNode
143
 
    * @private
144
 
    * @type {Node}
145
 
    */
146
 
    _parentTheadNode: null,
147
 
    
148
 
    
149
 
    /**
150
 
    *  The TBODY node which resides within the table node created in datatable-base
151
 
    *
152
 
    * @property _parentTbodyNode
153
 
    * @private
154
 
    * @type {Node}
155
 
    */
156
 
    _parentTbodyNode: null,
157
 
    
158
 
    
159
 
    /**
160
 
    *  The TBODY Message node which resides within the table node created in datatable-base
161
 
    *
162
 
    * @property _parentMsgNode
163
 
    * @private
164
 
    * @type {Node}
165
 
    */
166
 
    _parentMsgNode: null,
167
 
    
168
 
    
169
 
    /**
170
 
    *  The contentBox specified for the datatable in datatable-base
171
 
    *
172
 
    * @property _parentContainer
173
 
    * @private
174
 
    * @type {Node}
175
 
    */
176
 
    _parentContainer: null,
177
 
    
178
 
    
179
 
    /**
180
 
    *  The DIV node that contains all the scrollable elements (a table with a tbody on it)
181
 
    *
182
 
    * @property _bodyContainerNode
183
 
    * @private
184
 
    * @type {Node}
185
 
    */
186
 
    _bodyContainerNode: null,
187
 
    
188
 
    
189
 
    /**
190
 
    *  The DIV node that contains a table with a THEAD in it (which syncs its horizontal scroll with the _bodyContainerNode above)
191
 
    *
192
 
    * @property _headerContainerNode
193
 
    * @private
194
 
    * @type {Node}
195
 
    */
196
 
    _headerContainerNode: null,
197
 
    
198
 
    
199
 
    //--------------------------------------
200
 
    //  Methods
201
 
    //--------------------------------------
202
 
 
203
 
 
204
 
    
205
 
    initializer: function(config) {
206
 
        var dt = this.get("host");
207
 
        this._parentContainer = dt.get('contentBox');
208
 
        this._parentContainer.addClass(CLASS_SCROLLABLE);
209
 
        this._setUpNodes();
210
 
    },
211
 
    
212
 
    /////////////////////////////////////////////////////////////////////////////
213
 
    //
214
 
    // Set up Table Nodes
215
 
    //
216
 
    /////////////////////////////////////////////////////////////////////////////
217
 
    
218
 
    /**
219
 
    *  Set up methods to fire after host methods execute
220
 
    *
221
 
    * @method _setUpNodes
222
 
    * @private
223
 
    */          
224
 
    _setUpNodes: function() {
225
 
        
226
 
        this.afterHostMethod("_addTableNode", this._setUpParentTableNode);
227
 
        this.afterHostMethod("_addTheadNode", this._setUpParentTheadNode); 
228
 
        this.afterHostMethod("_addTbodyNode", this._setUpParentTbodyNode);
229
 
        this.afterHostMethod("_addMessageNode", this._setUpParentMessageNode);
230
 
        //this.beforeHostMethod('renderUI', this._removeCaptionNode);
231
 
        this.afterHostMethod("renderUI", this.renderUI);
232
 
        this.afterHostMethod("bindUI", this.bindUI);
233
 
        this.afterHostMethod("syncUI", this.syncUI);
234
 
        
235
 
        if (this.get('_scroll') !== 'x') {
236
 
            this.afterHostMethod('_attachTheadThNode', this._attachTheadThNode);
237
 
            this.afterHostMethod('_attachTbodyTdNode', this._attachTbodyTdNode);
238
 
        }
239
 
        
240
 
    },
241
 
        
242
 
    /**
243
 
    *  Stores the main &lt;table&gt; node provided by the host as a private property
244
 
    *
245
 
    * @method _setUpParentTableNode
246
 
    * @private
247
 
    */
248
 
    _setUpParentTableNode: function() {
249
 
        this._parentTableNode = this.get('host')._tableNode;
250
 
    },
251
 
    
252
 
    
253
 
    /**
254
 
    *  Stores the main &lt;thead&gt; node provided by the host as a private property
255
 
    *
256
 
    * @method _setUpParentTheadNode
257
 
    * @private
258
 
    */
259
 
    _setUpParentTheadNode: function() {
260
 
        this._parentTheadNode = this.get('host')._theadNode;
261
 
    },
262
 
    
263
 
    /**
264
 
    *  Stores the main &lt;tbody&gt; node provided by the host as a private property
265
 
    *
266
 
    * @method _setUpParentTbodyNode
267
 
    * @private
268
 
    */
269
 
    _setUpParentTbodyNode: function() {
270
 
        this._parentTbodyNode = this.get('host')._tbodyNode;
271
 
    },
272
 
    
273
 
    
274
 
    /**
275
 
    *  Stores the main &lt;tbody&gt; message node provided by the host as a private property
276
 
    *
277
 
    * @method _setUpParentMessageNode
278
 
    * @private
279
 
    */
280
 
    _setUpParentMessageNode: function() {
281
 
        this._parentMsgNode = this.get('host')._msgNode;
282
 
    },
283
 
    
284
 
    /////////////////////////////////////////////////////////////////////////////
285
 
    //
286
 
    // Renderer
287
 
    //
288
 
    /////////////////////////////////////////////////////////////////////////////
289
 
    
290
 
    /**
291
 
    *  Primary rendering method that takes the datatable rendered in
292
 
    * the host, and splits it up into two separate &lt;divs&gt; each containing two 
293
 
    * separate tables (one containing the head and one containing the body). 
294
 
    * This method fires after renderUI is called on datatable-base.
295
 
    * 
296
 
    * @method renderUI
297
 
    */
298
 
    renderUI: function() {
299
 
        //Y.Profiler.start('render');
300
 
        this._createBodyContainer();
301
 
        this._createHeaderContainer();
302
 
        this._setContentBoxDimensions();
303
 
        //Y.Profiler.stop('render');
304
 
        //console.log(Y.Profiler.getReport("render"));
305
 
    },
306
 
    
307
 
    /**
308
 
    Binds event subscriptions to keep the state and UI in sync
309
 
 
310
 
    @method bindUI
311
 
    **/
312
 
    bindUI: function () {
313
 
        // FIXME: I don't know why the string bind, but I don't want to break
314
 
        // stuff until I have time to rebuild it properly
315
 
        this._bodyContainerNode.on('scroll', Y.bind("_onScroll", this));
316
 
 
317
 
        this.afterHostEvent("recordsetChange", this.syncUI);
318
 
        this.afterHostEvent("recordset:recordsChange", this.syncUI);
319
 
    },
320
 
 
321
 
    /**
322
 
    *  Post rendering method that is responsible for creating a column
323
 
    * filler, and performing width and scroll synchronization between the &lt;th&gt; 
324
 
    * elements and the &lt;td&gt; elements.
325
 
    * This method fires after syncUI is called on datatable-base
326
 
    * 
327
 
    * @method syncUI
328
 
    * @public
329
 
    */
330
 
    syncUI: function() {
331
 
        //Y.Profiler.start('sync');
332
 
        this._removeCaptionNode();
333
 
        this._syncWidths();
334
 
        this._syncScroll();
335
 
        //Y.Profiler.stop('sync');
336
 
        //console.log(Y.Profiler.getReport("sync"));
337
 
        
338
 
    },
339
 
    
340
 
    /**
341
 
    *  Remove the caption created in base. Scrolling datatables dont support captions.
342
 
    * 
343
 
    * @method _removeCaptionNode
344
 
    * @private
345
 
    */
346
 
    _removeCaptionNode: function() {
347
 
        this.get('host')._captionNode.remove();
348
 
        //Y.DataTable.Base.prototype.createCaption = function(v) {/*do nothing*/};
349
 
        //Y.DataTable.Base.prototype._uiSetCaption = function(v) {/*do nothing*/};
350
 
    },
351
 
 
352
 
    /**
353
 
    *  Adjusts the width of the TH and the TDs to make sure that the two are in sync
354
 
    * 
355
 
    * Implementation Details: 
356
 
    *   Compares the width of the TH liner div to the the width of the TD node.
357
 
    *   The TD liner width is not actually used because the TD often stretches
358
 
    *   past the liner if the parent DIV is very large. Measuring the TD width
359
 
    *   is more accurate.
360
 
    *   
361
 
    *   Instead of measuring via .get('width'), 'clientWidth' is used, as it
362
 
    *   returns a number, whereas 'width' returns a string, In IE6,
363
 
    *   'clientWidth' is not supported, so 'offsetWidth' is used. 'offsetWidth'
364
 
    *   is not as accurate on Chrome,FF as 'clientWidth' - thus the need for
365
 
    *   the fork.
366
 
    * 
367
 
    * @method _syncWidths
368
 
    * @private
369
 
    */
370
 
    _syncWidths: function() {
371
 
        var headerTable = this._parentContainer.one('.' + CLASS_HEADER),
372
 
            bodyTable   = this._parentContainer.one('.' + CLASS_BODY),
373
 
            // nodelist of all the THs
374
 
            headers     = headerTable.all('thead .' + CLASS_LINER),
375
 
            // nodelist of the TDs in the first row
376
 
            firstRow    = bodyTable.one('.' + CLASS_DATA + ' tr'),
377
 
            cells       = firstRow && firstRow.all('.' + CLASS_LINER),
378
 
            // FIXME: Code smell
379
 
            widthProperty = (YUA.ie) ? 'offsetWidth' : 'clientWidth';
380
 
 
381
 
            //stylesheet = new YStyleSheet('columnsSheet'),
382
 
            //className;
383
 
            
384
 
        // If there are data rows, iterate each header and the cells of the
385
 
        // first row comparing cell widths.  Assign the larger width to the
386
 
        // narrower node (header or cell).
387
 
        if (cells && cells.size()) {
388
 
            headers.each(function (header, i) {
389
 
                var cell        = cells.item(i),
390
 
                    headerWidth = header.get(widthProperty),
391
 
                    cellWidth   = cell.get(widthProperty),
392
 
                    width       = Math.max(headerWidth, cellWidth);
393
 
 
394
 
                width -= (parseInt(header.getComputedStyle('paddingLeft'),10)|0) +
395
 
                         (parseInt(header.getComputedStyle('paddingRight'),10)|0);
396
 
                
397
 
                header.setStyle('width', width + 'px');
398
 
                cell.setStyle('width', width + 'px');
399
 
            });
400
 
        }
401
 
            /*
402
 
            // If browser is not IE - get the clientWidth of the Liner
403
 
            // div and the TD.
404
 
            // Note:  We are not getting the width of the TDLiner, we
405
 
            // are getting the width of the actual cell.  Why? Because
406
 
            // when the table is set to auto width, the cell will grow
407
 
            // to try to fit the table in its container.  The liner
408
 
            // could potentially be much smaller than the cell width.
409
 
            // TODO: Explore if there is a better way using only LINERS
410
 
            // widths - I don't think this should be a problem, given
411
 
            // that the liner is a div, a block element and will
412
 
            // expand to width.
413
 
            if (!ie) {
414
 
                // TODO: this should actually be done with
415
 
                // getComputedStyle('width') but this messes up
416
 
                // columns. Explore this option.
417
 
                thWidth = thLiner.get('clientWidth');
418
 
                tdWidth = td.item(i).get('clientWidth');
419
 
            } else {
420
 
                // IE wasn't recognizing clientWidths, so we are using
421
 
                // offsetWidths.
422
 
                // TODO: should use getComputedStyle('width') because
423
 
                // offsetWidth will screw up when padding is changed.
424
 
                // TODO: for some reason, using
425
 
                // tdLiner.get('clientWidth') doesn't work - why not?
426
 
                thWidth = thLiner.get('offsetWidth');
427
 
                tdWidth = td.item(i).get('offsetWidth');
428
 
                //thWidth = parseFloat(thLiner.getComputedStyle('width').split('px')[0]);
429
 
                //tdWidth = parseFloat(td.item(i).getComputedStyle('width').split('px')[0]);
430
 
            }
431
 
                                
432
 
            // expand the TH or the TD to match the wider
433
 
            if (thWidth > tdWidth) {
434
 
                tdLiner.setStyle('width', (thWidth - 20 + 'px'));
435
 
                //thLiner.setStyle('width', (tdWidth - 20 + 'px'));
436
 
                //stylesheet.set(className,{'width': (thWidth - 20 + 'px')});
437
 
            } else if (tdWidth > thWidth) {
438
 
                // if you don't set an explicit width here, when the width
439
 
                // is set in line 368, it will auto-shrink the widths of
440
 
                // the other cells (because they dont have an explicit
441
 
                // width)
442
 
                thLiner.setStyle('width', (tdWidth - 20 + 'px'));
443
 
                tdLiner.setStyle('width', (tdWidth - 20 + 'px'));
444
 
                //stylesheet.set(className,{'width': (tdWidth - 20 + 'px')});
445
 
            }
446
 
                
447
 
            //}
448
 
 
449
 
        }
450
 
        */
451
 
        
452
 
        //stylesheet.enable();
453
 
 
454
 
    },
455
 
    
456
 
    /**
457
 
    *  Adds the approriate width to the liner divs of the TH nodes before they are appended to DOM
458
 
    *
459
 
    * @method _attachTheadThNode
460
 
    * @private
461
 
    */
462
 
    _attachTheadThNode: function(o) {
463
 
        var width = o.column.get('width');
464
 
        
465
 
        if (width) {
466
 
            o.th.one('.' + CLASS_LINER)
467
 
                .setStyles({
468
 
                    width: width,
469
 
                    overflow:'hidden'
470
 
                });
471
 
        }
472
 
    },
473
 
    
474
 
    /**
475
 
    *  Adds the appropriate width to the liner divs of the TD nodes before they are appended to DOM
476
 
    *
477
 
    * @method _attachTbodyTdNode
478
 
    * @private
479
 
    */
480
 
    _attachTbodyTdNode: function(o) {
481
 
        var width = o.column.get('width');
482
 
        
483
 
        if (width) {
484
 
            o.td.one('.' + CLASS_LINER)
485
 
                .setStyles({
486
 
                    width: width,
487
 
                    overflow: 'hidden'
488
 
                });
489
 
        }
490
 
    },
491
 
    
492
 
    /**
493
 
    *  Creates the body DIV that contains all the data. 
494
 
    *
495
 
    * @method _createBodyContainer
496
 
    * @private
497
 
    */
498
 
    _createBodyContainer: function() {
499
 
        var bd = YNode.create(CONTAINER_BODY);
500
 
            
501
 
        this._bodyContainerNode = bd;       
502
 
        this._setStylesForTbody();
503
 
        
504
 
        bd.appendChild(this._parentTableNode);
505
 
        this._parentContainer.appendChild(bd);
506
 
    },
507
 
    
508
 
    /**
509
 
    *  Creates the DIV that contains a &lt;table&gt; with all the headers. 
510
 
    *
511
 
    * @method _createHeaderContainer
512
 
    * @private
513
 
    */
514
 
    _createHeaderContainer: function() {
515
 
        var hd = YNode.create(CONTAINER_HEADER),
516
 
            tbl = YNode.create(TEMPLATE_TABLE);
517
 
            
518
 
        this._headerContainerNode = hd;
519
 
        
520
 
        //hd.setStyle('backgroundColor',this.get("COLOR_COLUMNFILLER"));
521
 
        this._setStylesForThead();
522
 
        tbl.appendChild(this._parentTheadNode);
523
 
        hd.appendChild(tbl);
524
 
        this._parentContainer.prepend(hd);
525
 
        
526
 
    },
527
 
    
528
 
    /**
529
 
    *  Creates styles for the TBODY based on what type of table it is.
530
 
    *
531
 
    * @method _setStylesForTbody
532
 
    * @private
533
 
    */
534
 
    _setStylesForTbody: function() {
535
 
        var dir = this.get('_scroll'),
536
 
            w = this.get('width') || "",
537
 
            h = this.get('height') || "",
538
 
            el = this._bodyContainerNode,
539
 
            styles = {width:"", height:h};
540
 
                
541
 
        if (dir === 'x') {
542
 
            //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.
543
 
            styles.overflowY = 'hidden';
544
 
            styles.width = w;
545
 
        } else if (dir === 'y') {
546
 
            //Y-Scrolling tables should not have a X-Scrollbar so overflow-x is hidden. The width isn't neccessary because it can be auto.
547
 
            styles.overflowX = 'hidden';
548
 
        } else if (dir === 'xy') {
549
 
            styles.width = w;
550
 
        } else {
551
 
            //scrolling is set to 'null' - ie: width and height are not set. Don't have any type of scrolling.
552
 
            styles.overflowX = 'hidden';
553
 
            styles.overflowY = 'hidden';
554
 
            styles.width = w;
555
 
        }
556
 
        
557
 
        el.setStyles(styles);
558
 
        return el;
559
 
    },
560
 
    
561
 
    
562
 
    /**
563
 
    *  Creates styles for the THEAD based on what type of datatable it is.
564
 
    *
565
 
    * @method _setStylesForThead
566
 
    * @private
567
 
    */
568
 
    _setStylesForThead: function() {
569
 
        var w = this.get('width') || "",
570
 
            el = this._headerContainerNode;
571
 
        
572
 
        //if (dir !== 'y') {
573
 
        el.setStyles({'width': w, 'overflow': 'hidden'});
574
 
        // }
575
 
    },
576
 
    
577
 
    /**
578
 
    *  Sets an auto width on the content box if it doesn't exist or if its a y-datatable.
579
 
    *
580
 
    * @method _setContentBoxDimensions
581
 
    * @private
582
 
    */
583
 
    _setContentBoxDimensions: function() {
584
 
        
585
 
        if (this.get('_scroll') === 'y' || (!this.get('width'))) {
586
 
            this._parentContainer.setStyle('width', 'auto');
587
 
        }
588
 
        
589
 
    },
590
 
    
591
 
    /////////////////////////////////////////////////////////////////////////////
592
 
    //
593
 
    // Scroll Syncing
594
 
    //
595
 
    /////////////////////////////////////////////////////////////////////////////
596
 
    
597
 
    /**
598
 
    *  Ensures that scrolling is synced across the two tables
599
 
    *
600
 
    * @method _onScroll
601
 
    * @private
602
 
    */
603
 
    _onScroll: function() {
604
 
        this._headerContainerNode.set('scrollLeft', this._bodyContainerNode.get('scrollLeft'));
605
 
    },
606
 
    
607
 
    /**
608
 
     *  Syncs padding around scrollable tables, including Column header right-padding
609
 
     * and container width and height.
610
 
     *
611
 
     * @method _syncScroll
612
 
     * @private 
613
 
     */
614
 
    _syncScroll : function() {
615
 
        this._syncScrollX();
616
 
        this._syncScrollY();
617
 
        this._syncScrollOverhang();
618
 
        if (YUA.opera) {
619
 
            // Bug 1925874
620
 
            this._headerContainerNode.set('scrollLeft', this._bodyContainerNode.get('scrollLeft'));
621
 
            
622
 
            if(!this.get("width")) {
623
 
                // Bug 1926125
624
 
                document.body.style += '';
625
 
            }
626
 
        }
627
 
    },
628
 
    
629
 
    /**
630
 
    *  Snaps container width for y-scrolling tables.
631
 
    *
632
 
    * @method _syncScrollY
633
 
    * @private
634
 
    */
635
 
    _syncScrollY : function() {
636
 
        var tBody = this._parentTbodyNode,
637
 
            tBodyContainer = this._bodyContainerNode,
638
 
            w;
639
 
            // X-scrolling not enabled
640
 
            if(!this.get("width")) {
641
 
                // Snap outer container width to content
642
 
                w = (tBodyContainer.get('scrollHeight') > tBodyContainer.get('clientHeight')) ?
643
 
                // but account for y-scrollbar since it is visible
644
 
                    (tBody.get('parentNode').get('clientWidth') + scrollbarWidth()) + "px" :
645
 
                    // no y-scrollbar, just borders
646
 
                    (tBody.get('parentNode').get('clientWidth') + 2) + "px";
647
 
                this._parentContainer.setStyle('width', w);
648
 
        }
649
 
    },
650
 
        
651
 
    /**
652
 
     *  Snaps container height for x-scrolling tables in IE. Syncs message TBODY width. 
653
 
     * Taken from YUI2 ScrollingDataTable.js
654
 
     *
655
 
     * @method _syncScrollX
656
 
     * @private
657
 
     */
658
 
    _syncScrollX: function() {
659
 
        var tBody = this._parentTbodyNode,
660
 
            tBodyContainer = this._bodyContainerNode,
661
 
            w;
662
 
 
663
 
        this._headerContainerNode.set('scrollLeft',
664
 
            this._bodyContainerNode.get('scrollLeft'));
665
 
        
666
 
        if (!this.get('height') && (YUA.ie)) {
667
 
            w = (tBodyContainer.get('scrollWidth') > tBodyContainer.get('offsetWidth')) ?
668
 
                (tBody.get('parentNode').get('offsetHeight') + scrollbarWidth()) + "px" : 
669
 
                tBody.get('parentNode').get('offsetHeight') + "px";
670
 
            
671
 
            tBodyContainer.setStyle('height', w);
672
 
        }
673
 
            
674
 
        if (tBody.get('rows').size()) {
675
 
            this._parentMsgNode.get('parentNode').setStyle('width', "");
676
 
        } else {
677
 
            this._parentMsgNode.get('parentNode').setStyle('width', this._parentTheadNode.get('parentNode').get('offsetWidth')+'px');
678
 
        }
679
 
            
680
 
    },
681
 
    
682
 
    /**
683
 
     *  Adds/removes Column header overhang as necesary.
684
 
     * Taken from YUI2 ScrollingDataTable.js
685
 
     *
686
 
     * @method _syncScrollOverhang
687
 
     * @private
688
 
     */
689
 
    _syncScrollOverhang: function() {
690
 
        var tBodyContainer = this._bodyContainerNode,
691
 
            padding = 1;
692
 
        
693
 
        //when its both x and y scrolling
694
 
        if ((tBodyContainer.get('scrollHeight') > tBodyContainer.get('clientHeight')) || (tBodyContainer.get('scrollWidth') > tBodyContainer.get('clientWidth'))) {
695
 
            padding = 18;
696
 
        }
697
 
        
698
 
        this._setOverhangValue(padding);
699
 
        
700
 
        // After the widths have synced, there is a wrapping issue in the
701
 
        // headerContainer in IE6. The header does not span the full length of
702
 
        // the table (does not cover all of the y-scrollbar). By adding this
703
 
        // line in when there is a y-scroll, the header will span correctly.
704
 
        // TODO: this should not really occur on this.get('_scroll') === y - it
705
 
        // should occur when scrollHeight > clientHeight, but clientHeight is
706
 
        // not getting recognized in IE6?
707
 
        if (YUA.ie !== 0 && this.get('_scroll') === 'y' && this._bodyContainerNode.get('scrollHeight') > this._bodyContainerNode.get('offsetHeight'))
708
 
        {
709
 
            this._headerContainerNode.setStyle('width', this._parentContainer.get('width'));
710
 
        }
711
 
    },
712
 
    
713
 
    
714
 
    /**
715
 
     *  Sets Column header overhang to given width.
716
 
     * Taken from YUI2 ScrollingDataTable.js with minor modifications
717
 
     *
718
 
     * @method _setOverhangValue
719
 
     * @param nBorderWidth {Number} Value of new border for overhang. 
720
 
     * @private
721
 
     */ 
722
 
    _setOverhangValue: function(borderWidth) {
723
 
        var host = this.get('host'),
724
 
            cols = host.get('columnset').get('definitions'),
725
 
            //lastHeaders = cols[cols.length-1] || [],
726
 
            len = cols.length,
727
 
            value = borderWidth + "px solid " + this.get("COLOR_COLUMNFILLER"),
728
 
            children = YNode.all('#'+this._parentContainer.get('id')+ ' .' + CLASS_HEADER + ' table thead th');
729
 
 
730
 
        children.item(len-1).setStyle('borderRight', value);
731
 
    }
732
 
    
733
 
});
734
 
 
735
 
Y.namespace("Plugin").DataTableScroll = DataTableScroll;
736
 
 
737
 
 
738
 
}, '3.5.1' ,{requires:['datatable-base-deprecated','plugin']});