sandbox/loader/2in3_datatable.html

	2in3_datatable.html revision b39897a381c2203466da5568bfd2862a54a81311
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html debug="true">
<head>
<style type="text/css">
body {
	margin:0;
	padding:0;
}
  #container { position: relative; padding: 6px; background-color: #eeeeee; width: 420px; height:220px; }
  /* custom styles for this example */
.yui-skin-sam .yui-dt-liner { white-space:nowrap; }
</style>
<title>use('yui2-datatable') and then get dependencies</title>
<script src="/build/yui/yui-debug.js" type="text/javascript" charset="utf-8"></script>
<!--
<script type="text/javascript" src="/yui2-docs/templates/examples/datatable/assets/js/data.js"></script>
-->
<script type="text/javascript" charset="utf-8">
YUI({
    combine: true, // running locally, so I need to force combo handling
    yui2: '2.8.1',
    '2in3': '4',

    groups: {
        yui2: {
            base: '/2in3/dist/2.8.1/build/',
            patterns:  {
                'yui2-': {
                    configFn: function(me) {
                        if(/-skin|reset|fonts|grids|base/.test(me.name)) {
                            me.type = 'css';
                            me.path = me.path.replace(/\.js/, '.css');
                            me.path = me.path.replace(/\/yui2-skin/, '/assets/skins/sam/yui2-skin');
                        }
                    }
                }
            }
        }
    },

    modules: {
        // this file creates 'YAHOO.example.Data' when loaded, so it can't be used inline
        // or dyamically loaded until a YAHOO global has been created (which we don't
        // do by default
        data: {
            fullpath: '/yui2-docs/templates/examples/datatable/assets/js/data.js',
            requires: ['yui2-yahoo']
        },

        // YUI3 module
        'example-data': {
            fullpath: 'data.js'
        }

    }
    // gallery: 'gallery-2010.02.22-22'
}).use('yui2-dragdrop', 'yui2-datatable', 'example-data', 'base', 'gallery-yql', function (Y) {
    // Need to break out of the sandbox if we are going to allow modules
    // to add to the global YAHOO directly.  It is better when you don't need
    // to do this.
    // YAHOO = Y.YUI2;
    var YAHOO = Y.YUI2;
    // Modules that access the global directly should be loaded
    // after the YUI2 environment is set up.
    // Y.use('data', function() {
        // YAHOO.namespace('example.Data');
        // The window load event has fired
        // YAHOO.util.Event.addListener(window, "load", function() {
        YAHOO.util.Event.onAvailable("basic", function() {
        YAHOO.example.Basic = function() {
            var myColumnDefs = [
                {key:"id", sortable:true, resizeable:true},
                {key:"date", formatter:YAHOO.widget.DataTable.formatDate, sortable:true, sortOptions:{defaultDir:YAHOO.widget.DataTable.CLASS_DESC},resizeable:true},
                {key:"quantity", formatter:YAHOO.widget.DataTable.formatNumber, sortable:true, resizeable:true},
                {key:"amount", formatter:YAHOO.widget.DataTable.formatCurrency, sortable:true, resizeable:true},
                {key:"title", sortable:true, resizeable:true}
            ];

            var myDataSource = new YAHOO.util.DataSource(YAHOO.example.Data.bookorders);
            myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY;
            myDataSource.responseSchema = {
                fields: ["id","date","quantity","amount","title"]
            };

            var myDataTable = new YAHOO.widget.DataTable("basic",
                    myColumnDefs, myDataSource, {caption:"DataTable Caption"});

            return {
                oDS: myDataSource,
                oDT: myDataTable
            };
            }();
        });
    // });
});
</script>
</head>
<body class="yui-skin-sam">
<div id="basic"></div>
</body>
</html>