Sample expense repor widget

expenseReportDemo.js

({
	// name must be present for widgets, 
	// and it must be unique
	name:"Expense report demo",
	id:"in.ExpenseReportDemo",
	
	// Default data
	data:{
		ERROR:false,	// holds overall error state, true if form has errors
		title:"",
		date:"",
		items:[]
	},
	
	// Init can be both function or array of strings
	// or formgen array (see http://bit.ly/1V4TZB0)
	init: [
		'<div class="pb5">',
			'<span>',
				'<input type="text" id="title" class="fs120 bold" placeholder="Title" />',
			'</span>',
			'<span>',
				'<input type="text" id="date" class="w160 ml4 fs120" placeholder="Date" />',
				'<span class="pt6 fs130 ml-20"></span>',
			'</span>',
		'</div>',
		'<div id="items"></div>',
		'<div class="ml2 pl30">',
			'<div id="total" class="fr w160 pr5 tar fs120 o70 pt5"></div>',
			'<button id="btn-add-item">Add row</button>',
			'<div id="ERROR" class="hide"></div>',
		'</div>'
	],
	
	// UI bindings
	ui:{
		'#title': 'title',
		'#date':{
			bind:'date',
			init:function($o){
				// Init datepicker pugin of jQuery UI
				$o.datepicker({ dateFormat: "yy/mm/dd" });
			}
		},
		'#items':{
			init: function ($o) {
				// Init sortable plugin of jQuery UI
				$o.sortable({handle:'.fi-list'});
			},
			bind:'items',
			manifest:"this.Item",	
			id:['id'],
			list:'<div class="pt2 pb2"></div>',
			recalc:'#total'
		},
		'#total': function(d){
			return d.items
			.reduce(function(a,b){
				var n = parseFloat(b.sum+'');
				return isNaN(n)?a:a+n;
			},0)
			.format(2, '&nbsp;', '.');
		},
		'#btn-add-item':function(d,v,$o){
			if (v!=null) {
				$o.my('find','#items')
				.trigger('insert',{
					what:{id:Number.random(1e6,1e12)+'',desc:'',sum:''},
					where:1e6 // It means 'at the end'
				});
			}
		},
		'#ERROR':{
			bind:function(d,v,$o){
				d.ERROR = $o.my().root.my("valid");
			},
			watch:'#items,#title,#date'		
		}
	},
	
	// Item manifest
	Item:{
		init:[
			'<span class="dib vam fi-list w32 fs120 o50 pl8 blue"></span>',
			'<input type="text" id="desc" class="w500" placeholder="Description" />',
			'<span><input type="text" id="sum"class="w160 ml4 tar" placeholder="Sum"/></span>',
		],
		data:{id:"", desc:"", sum:0},
		ui:{
			'#desc':'desc',
			'#sum':{
				bind:'sum',
				check:/^(|-?\d+(\.\d+)?)$/
			}
		}
	},
	style:{
		' .fi-list':'cursor:move',
		' input':'margin:0;',
		' #title':'width:532px;'
	}
})