1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95

// Appcelerator Titanium (JS) code to produce multiple selection type data entry in a single window.

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);