Luke Smith lsmith

DataTable design overview

These are my early thoughts on how to structure DataTable in 3.5.0. Feedback is welcome in the comments.

new Y.DataTable({...});
new Y.DataTable.Base({...});

	YUI.add('datatabledatasource-350-preview-patch', function (Y) {

	// Or just put this in your code directly
	Y.Plugin.DataTableDataSource.prototype.onDataReturnInitializeTable = function (e) {
	this.get('host').set('data', (e.response && e.response.results) \|\| []);
	};

	}, '0.1', { requires: ['datatable-datasource'] });

	// See ticket #2531567

	// Use the current support for SuperClass._buildCfg.custom.{anyName} = handlerFunction to look for
	// a new property Ext._buildCfg.buildFn on each class extension. If there, execute it. The extension
	// then uses that function to manually migrate its static properties of interest.

	// Two approaches are shown, but both rely on the Ext._buildCfg.buildFn static. This property and
	// name are arbitrary. What matters is that the handlerFunction assigned to the superclass's
	// _buildCfg.custom collection establishes the contract for where to find this attribute on each
	// class extension.

	Y.DataTable.Base.ATTRS.recordset.setter = function (val) {
	var current = this.get('recordset');

	if (val) {
	if (val instanceof Y.Recordset) {
	if (current && val !== current) {
	// Transfer plugins (untested, YMMV)
	Y.Object.each(current._plugins \|\| {}, function (plugin) {
	val.plug(plugin.constructor, plugin.getAttrs());
	});

	<!doctype html>
	<!-- See http://jsfiddle.net/VYzXx/ for a live example -->
	<html>
	<head>
	<meta charset="utf-8">
	<title>Live filtering a 3.4.1 DataTable from an input field</title>
	</head>
	<body class="yui3-skin-sam">
	<p>The following table is sortable and searchable, and will preserve sort order across filter operations.</p>

	// For Y.Foo

	// Class extensions that will be used in the base class
	function ExtA() {}
	...
	Y.namespace('Foo').ExtA = ExtA;

	// Base Class definition
	function FooBase() {}
	...

	YUI({
	modules: {
	somemodule: {
	fullpath: '/path/to/somemodule.js',
	requires: ['somemodule-css']
	},
	somemodule-css: {
	type: 'css',
	fullpath: '/path/to/somemodule.css'
	}

	/*
	You probably shouldn't use this. It relies on no other code on the page setting the
	document.(documentElement/body).onscroll property. If other code is on the page before
	this patch is executed, it will be clobbered. If after this patch is executed, all
	e.pageX/Y values will be wrong in IE 6-8 if the window is scrolled.

	Every major library handles IE's e.pageX/Y deficiency the same way today. Yes, it might
	cause a reflow, but the 90%+ case will be that the document's scrollTop/Left properties
	are accessed, but no reflow is triggered. DOM access sucks and all, but it's incredibly
	unlikely this will show up on your performance profiling.

	var scrollbarWidth = Y.cached(function () {
	var testNode = Y.one('body').appendChild('<div style="position:absolute;visibility:hidden;overflow:scroll;width:20px;"><p style="height:1px"/></div>'),
	width = testNode.get('offsetWidth') - testNode.get('clientWidth');

	testNode.remove(true);

	return width;
	});