Titanium sample: Multiple selection types in a window form

gistfile1.js

// Appcelerator Titanium (JS) code to produce multiple selection type data entry in a single window.
// via @CJ_Reed
// and Dan Tamas : http://cssgallery.info/making-a-combo-box-in-titanium-appcelerator-code-and-video




var win = Titanium.UI.currentWindow;

// build custom tableView data/layout
var array = [];
var titleRow = Titanium.UI.createTableViewRow({height:46, className:'titleRow'}); 
var valueRow = Titanium.UI.createTableViewRow({height:46, className:'valueRow'}); 
var dateRow = Titanium.UI.createTableViewRow({height:46, className:'dateRow'});
var titleLabel = Ti.UI.createLabel({color:'#000000', text:"Name", font:{fontSize:21, fontWeight:'bold'}, top:8, left:12, height:24, width:99});
var titleText = Titanium.UI.createTextField({value:"", color:'#336699', borderColor:'#888', borderWidth:1, font:{fontSize:16, fontWeight:'bold'},top:8, left:100, height:32, width:184});
var valueLabel = Ti.UI.createLabel({color:'#000000', text:"Value", font:{fontSize:21, fontWeight:'bold'}, top:8, left:12, height:24, width:170});
var dateLabel = Ti.UI.createLabel({color:'#000000', text:"Date", font:{fontSize:21, fontWeight:'bold'}, top:8, left:12, height:24, width:170});
var valueData = Ti.UI.createLabel({color:'#3D4460', text:"", font:{fontSize:17, fontWeight:'normal'}, top:11, left:102, height:20, width:180, textAlign:'right'});	
var dateData = Ti.UI.createLabel({color:'#3D4460', text:"", font:{fontSize:17, fontWeight:'normal'}, top:11, left:102, height:20, width:180, textAlign:'right'});	
titleRow.add(titleLabel);
titleRow.add(titleText);
valueRow.add(valueLabel);
valueRow.add(valueData);
dateRow.add(dateLabel);
dateRow.add(dateData);
array.push(titleRow);
array.push(valueRow);
array.push(dateRow);

// view initialisation
var tableView = Titanium.UI.createTableView({data:array, style:Titanium.UI.iPhone.TableViewStyle.GROUPED});
var pickerView = Titanium.UI.createView({height:248,bottom:-248});
var datePickerView = Titanium.UI.createView({height:248,bottom:-248});

// value picker initialisation
var picker = Titanium.UI.createPicker({top:0});
picker.selectionIndicator=true;
var pickerValues = [
	Titanium.UI.createPickerRow({title:'John'}),
	Titanium.UI.createPickerRow({title:'Alex'}),
	Titanium.UI.createPickerRow({title:'Marie'}),
	Titanium.UI.createPickerRow({title:'Eva'}),
	Titanium.UI.createPickerRow({title:'James'})
];
picker.add(pickerValues);
pickerView.add(picker);

// date picker initialisation
var datePicker = Titanium.UI.createPicker({top:0, type:Titanium.UI.PICKER_TYPE_DATE});
datePicker.selectionIndicator=true;
datePickerView.add(datePicker);

// animations
var slideIn =  Titanium.UI.createAnimation({bottom:-43});
var slideOut =  Titanium.UI.createAnimation({bottom:-251});

// event functions
tableView.addEventListener('click', function(eventObject){
	if (eventObject.rowData.className == "valueRow")
	{
		titleText.blur();
		datePickerView.animate(slideOut);	
		pickerView.animate(slideIn);		
	}
	else if (eventObject.rowData.className == "titleRow")
	{
		pickerView.animate(slideOut);
		datePickerView.animate(slideOut);
		titleText.focus();	
	}
	else if (eventObject.rowData.className == "dateRow")
	{
		pickerView.animate(slideOut);
		datePickerView.animate(slideIn);
		titleText.blur();	
	};
});

datePicker.addEventListener('change',function(e)
{
	dateData.text = e.value;
	tableView.setData(array);
});

picker.addEventListener('change',function(e)
{
	valueData.text = picker.getSelectedRow(0).title;;
	tableView.setData(array);
});

titleText.addEventListener('focus',function() {
	pickerView.animate(slideOut);
	datePickerView.animate(slideOut);
});

// build display
win.add(tableView);
win.add(pickerView);
win.add(datePickerView);

Thank you