hatched/gist:807205

## gistfile1.html
<!DOCTYPE HTML>
<html>
  <head>
      <script src="http://yui.yahooapis.com/3.3.0/build/yui/yui-min.js" charset="utf-8"></script>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script>
        YUI.add('editable-field', function(Y){
            var _EDIT_CLASS = 'yui3-editable-field',
            STATE = 'state',
            STATES = {
                editing: 'editing',
                editable: 'editable'
            },
            editableField = null,
            TEMPLATES = {
                text: '<input name="{name}"  type="text" class="{classes}" value="{value}" />',
                textarea: '<textarea class="{classes}">{value}</textarea>',
                option: '<option value="{value}">{display_value}</option>',
                select: '<select name="{name}" class="{classes}">{options}</select>',
                radio: '<input name="{name}"  type="radio" class="{classes}" value="{value}" />',
                checkbox: '<input name="{name}" type="checkbox" class="{classes}" value="{value}" />'
            };

            var EditableField = function(config){
                config.host.on('click', this._renderToEdit, this);
                EditableField.superclass.constructor.apply(this, arguments);
            };

            EditableField.NS = 'ef';

            EditableField.NAME = 'editable-field';

            EditableField.ATTRS = {
                state: {
                    value: 'editable'
                },
                type: {
                    value: 'text',
                    validator: function(val, name){
                        return TEMPLATES[val] ? true : false;
                    }
                }
            };

            Y.extend(EditableField, Y.Plugin.Base, {
                _renderToEdit: function(){
                   var host = this.get('host'),
                        type = this.get('type'),
                        content = host.getContent(),
                        template = TEMPLATES[type];

                    this.set(STATE, STATES.editing);
                    host.setContent(Y.substitute(template, {value: content}));
                    host.detach('click');
                    host.on('clickoutside', this._renderToEditable, this);
                    host.one(':first-child').focus();
                },
                _renderToEditable: function(){
                    var host = this.get('host'),
                        type = this.get('type'),
                        content = this._getContent(type);

                    this.set(STATE, STATES.editable);
                    host.setContent(content);
                    host.detach('clickoutside');
                    host.on('click', this._renderToEdit, this);
                },
                _getContent: function(type){
                    var host = this.get('host'),
                        node;
                    switch(type){
                        case 'textarea':
                            node = host.one('textarea');
                            break;
                        default:
                            node = host.one('input[type='+type+']');
                            break;
                    }

                    return node.get('value');
                },
                _findTemplate: function(type){
                        return this.TEMPLATES[type];
                }
            });

            Y.namespace('Plugin');
            Y.Plugin.EditableField = EditableField;

        },'0.1', {requires: ['node', 'event', 'plugin', 'substitute', 'gallery-outside-events']});
/*
        YUI().use('node', 'editable-field', function(Y){
            Y.one('.editable').plug({fn: Y.Plugin.EditableField, cfg: {type: 'textarea'}});
        });
*/


        YUI({filter: "raw", combine: false}).use('datatable-base', 'editable-field', function(Y) {
                var calculate = function(o) {
                        Y.log(o);
                        return '<a _id="'+o.data.id+'">More</a>';
                    },
                    cols = ["Date","Credits","Amount", "Note", "Reference Id", {key: "More", formatter: calculate }],
                    data = [
                        {id: 1, Date:'January 23, 2010', Credits:"3", Amount:"$10.00", Note:"Reference to listing spent on", "Reference Id":"asdfasdffsd", More:"<a href=''>>>></a>"},
                        {id: 1, Date:"January 23, 2010", Credits:"3", Amount:"$10.00", Note:"Reference to listing spent on", "Reference Id":"asdfasdffsd", More:"<a href=''>>>></a>"},
                        {id: 1, Date:"January 23, 2010", Credits:"3", Amount:"$10.00", Note:"Reference to listing spent on", "Reference Id":"asdfasdffsd", More:"<a href=''>>>></a>"}
                    ],
                    table = new Y.DataTable.Base({
                        columnset: cols,
                        recordset: data,
                        width: '700px'
                    });

                table._createTbodyTdNode = function(o) {
                    var column = o.column;
                    o.headers = column.headers;
                    o.classnames = column.get("classnames");
                    o.value = this.formatDataCell(o);
                    o.refId = o.data.id; //Bringing the id up to be the first child of the o object
                    return Y.Node.create(Y.substitute('<td headers="{headers}" class="{classnames}" _id="{refId}"><div class="yui3-datatable-liner editable">{value}</div></td>', o)); //added in refId substitute string
                }

                table.render("#table");
                table.get('boundingBox').one('table').setStyle('width', '700px');

                Y.delegate('click', function(e) {
                    Y.log(e);
                    e.currentTarget.plug({fn: Y.Plugin.EditableField, cfg: {type: 'div'}});
                }, Y.one('#table'), '.yui3-datatable-liner');
        });
    </script>
  </head>
  <body class="yui3-skin-sam">
      <div id="table"></div>
  </body>
</html>
	<!DOCTYPE HTML>
	<html>
	<head>
	<script src="http://yui.yahooapis.com/3.3.0/build/yui/yui-min.js" charset="utf-8"></script>
	<title></title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<script>
	YUI.add('editable-field', function(Y){
	var _EDIT_CLASS = 'yui3-editable-field',
	STATE = 'state',
	STATES = {
	editing: 'editing',
	editable: 'editable'
	},
	editableField = null,
	TEMPLATES = {
	text: '<input name="{name}" type="text" class="{classes}" value="{value}" />',
	textarea: '<textarea class="{classes}">{value}</textarea>',
	option: '<option value="{value}">{display_value}</option>',
	select: '<select name="{name}" class="{classes}">{options}</select>',
	radio: '<input name="{name}" type="radio" class="{classes}" value="{value}" />',
	checkbox: '<input name="{name}" type="checkbox" class="{classes}" value="{value}" />'
	};

	var EditableField = function(config){
	config.host.on('click', this._renderToEdit, this);
	EditableField.superclass.constructor.apply(this, arguments);
	};

	EditableField.NS = 'ef';

	EditableField.NAME = 'editable-field';

	EditableField.ATTRS = {
	state: {
	value: 'editable'
	},
	type: {
	value: 'text',
	validator: function(val, name){
	return TEMPLATES[val] ? true : false;
	}
	}
	};

	Y.extend(EditableField, Y.Plugin.Base, {
	_renderToEdit: function(){
	var host = this.get('host'),
	type = this.get('type'),
	content = host.getContent(),
	template = TEMPLATES[type];

	this.set(STATE, STATES.editing);
	host.setContent(Y.substitute(template, {value: content}));
	host.detach('click');
	host.on('clickoutside', this._renderToEditable, this);
	host.one(':first-child').focus();
	},
	_renderToEditable: function(){
	var host = this.get('host'),
	type = this.get('type'),
	content = this._getContent(type);

	this.set(STATE, STATES.editable);
	host.setContent(content);
	host.detach('clickoutside');
	host.on('click', this._renderToEdit, this);
	},
	_getContent: function(type){
	var host = this.get('host'),
	node;
	switch(type){
	case 'textarea':
	node = host.one('textarea');
	break;
	default:
	node = host.one('input[type='+type+']');
	break;
	}

	return node.get('value');
	},
	_findTemplate: function(type){
	return this.TEMPLATES[type];
	}
	});

	Y.namespace('Plugin');
	Y.Plugin.EditableField = EditableField;

	},'0.1', {requires: ['node', 'event', 'plugin', 'substitute', 'gallery-outside-events']});
	/*
	YUI().use('node', 'editable-field', function(Y){
	Y.one('.editable').plug({fn: Y.Plugin.EditableField, cfg: {type: 'textarea'}});
	});
	*/


	YUI({filter: "raw", combine: false}).use('datatable-base', 'editable-field', function(Y) {
	var calculate = function(o) {
	Y.log(o);
	return '<a _id="'+o.data.id+'">More</a>';
	},
	cols = ["Date","Credits","Amount", "Note", "Reference Id", {key: "More", formatter: calculate }],
	data = [
	{id: 1, Date:'January 23, 2010', Credits:"3", Amount:"$10.00", Note:"Reference to listing spent on", "Reference Id":"asdfasdffsd", More:"<a href=''>>>></a>"},
	{id: 1, Date:"January 23, 2010", Credits:"3", Amount:"$10.00", Note:"Reference to listing spent on", "Reference Id":"asdfasdffsd", More:"<a href=''>>>></a>"},
	{id: 1, Date:"January 23, 2010", Credits:"3", Amount:"$10.00", Note:"Reference to listing spent on", "Reference Id":"asdfasdffsd", More:"<a href=''>>>></a>"}
	],
	table = new Y.DataTable.Base({
	columnset: cols,
	recordset: data,
	width: '700px'
	});

	table._createTbodyTdNode = function(o) {
	var column = o.column;
	o.headers = column.headers;
	o.classnames = column.get("classnames");
	o.value = this.formatDataCell(o);
	o.refId = o.data.id; //Bringing the id up to be the first child of the o object
	return Y.Node.create(Y.substitute('<td headers="{headers}" class="{classnames}" _id="{refId}"><div class="yui3-datatable-liner editable">{value}</div></td>', o)); //added in refId substitute string
	}

	table.render("#table");
	table.get('boundingBox').one('table').setStyle('width', '700px');

	Y.delegate('click', function(e) {
	Y.log(e);
	e.currentTarget.plug({fn: Y.Plugin.EditableField, cfg: {type: 'div'}});
	}, Y.one('#table'), '.yui3-datatable-liner');
	});
	</script>
	</head>
	<body class="yui3-skin-sam">
	<div id="table"></div>
	</body>
	</html>