2012-06-27 2 views
0

Im a Titanium Beginner, который пытается создать страницу формы с двумя текстовыми полями имени и адреса и DateTimePicker. Я столкнулся с двумя проблемами:
Titanium Android Simple Form Creation

1) DateTimePicker успешно показан, но я хотел бы обоим, а также включая 2 текстовых поля, которые будут в одном окне, с одной и той же кнопкой отправки.

2) Я пробовал много раз, но не смог создать простое текстовое поле, даже просто создав его на одной странице. Он просто не появляется. Кто-нибудь может предложить конструктивную помощь?

Заранее спасибо. Ниже приведен мой текущий код.

var winTimePicker = Titanium.UI.createWindow ({}); winTimePicker.backgroundColor = 'черный';

var doneBtn = Ti.UI.createButton({ 
    title: 'Done', 
}); 

doneBtn.addEventListener('click', function() { 
    winTimePicker.hide(); 
}); 

winTimePicker.add(doneBtn); 

var timePicker = Ti.UI.createPicker({ 
    type:Ti.UI.PICKER_TYPE_TIME, 
    bottom:0, 
}); 


// turn on the selection indicator (off by default) 
timePicker.selectionIndicator = true; 

timePicker.addEventListener('change', function(e) { 
    //your code 
}); 

winTimePicker.add(timePicker); 


//open window 
winTimePicker.open(); 

var winDatePicker = Titanium.UI.createWindow ({}); winDatePicker.backgroundColor = 'black';

var doneBtn = Ti.UI.createButton({ 
    title: 'Done', 
}); 

doneBtn.addEventListener('click', function() { 
    winDatePicker.hide(); 
}); 

winDatePicker.add(doneBtn); 

var datePicker = Ti.UI.createPicker({ 
    type:Ti.UI.PICKER_TYPE_DATE, 
    bottom:0, 
}); 


// turn on the selection indicator (off by default) 
datePicker.selectionIndicator = true; 

datePicker.addEventListener('change', function(e) { 
    //your code 
}); 

winDatePicker.add(datePicker); 


//open window 
winDatePicker.open(); 

вар TextField = Titanium.UI.createTextField ({ цвет: '# 336699', ширина: "авто", высота: "авто", BorderStyle: Titanium.UI.INPUT_BORDERSTYLE_ROUNDED, });

вар = Titanium.UI.createTextField текстового поля 2 ({ цвет: '# 336699', ширина: "авто", высота: "авто", BorderStyle: Titanium.UI.INPUT_BORDERSTYLE_ROUNDED, });

ответ

2

Проверьте этот код и сделать изменения, как вы найдете подходящий к нему:

var timePickerWin = Ti.UI.createWindow({ 
      navBarHidden : true, 
      backgroundColor : '#fff' 
     }); 

var startTime = Ti.UI.createPicker({ 
     top : '15dp', 
     left : '50dp', 
     useSpinner : false, 
     selectionIndicator : true, 
     type : Ti.UI.PICKER_TYPE_TIME, 
     format24 : false, 
     height : '130dp', 
     // width:'auto' 

    }); 


var endTime = Ti.UI.createPicker({ 
      top : '15dp', 
      left : '50dp', 
      useSpinner : false, 
      selectionIndicator : true, 
      type : Ti.UI.PICKER_TYPE_TIME, 
      format24 : false, 
      height : '130dp' 
     }); 

var nextButton = Ti.UI.createButton({ 
      width : '220dp', 
      height : '45dp', 
      top : '15dp', 
      title : 'Next', 
      backgroundColor : '#294079', 
      font : { 
       fontSize : '18dp', 
       fontWeight : 'bold' 
      }, 
      color : '#fff' 
     }); 

startTime.addEventListener('change', function(e) { 
     //alert("User selected date: " + e.value); 
     startPickerValue = e.value; 
    }); 

    endTime.addEventListener('change', function(e) { 
     //alert("User selected date: " + e.value); 
     endPickerValue = e.value 
    }); 
var fullNameTextBox = Ti.UI.createTextField({ 
     borderStyle : Titanium.UI.INPUT_BORDERSTYLE_ROUNDED, 
     width : '275dp', 
     height : '45dp', 
     //value : '', 
     top : '15dp', 
     color : '#000000', 
     hintText : 'Enter full name' 
     // backGroundColor:'gray', 

    }); 
    var emailTextBox = Ti.UI.createTextField({ 
     borderStyle : Titanium.UI.INPUT_BORDERSTYLE_ROUNDED, 
     width : '275dp', 
     height : '45dp', 
     //value : '', 
     top : '15dp', 
     color : '#000000', 
     hintText : 'Enter email' 

    }); 

Наконец, добавьте все эти элементы пользовательского интерфейса к окну, которое является timePickerWin использованием добавить функцию

timePickerWin.add(startTime); 

и так для всех элементов пользовательского интерфейса. После этого раскройте timePickerWin как ниже

timePickerWin.open() 

Ma ke подходящие изменения компоновки, изменяя свойства слева, справа, высоты и ширины каждого элемента.

+0

Спасибо за помощь Мукунд! отлично работает, но появляется только одно из текстовых полей. Почему? – Jayden

+0

Элементы пользовательского интерфейса перекрывают друг друга. Есть ли способ отформатировать их? – Jayden

+0

Привет, Jayden. Все, что вам нужно сделать, это внести изменения в верхнее свойство каждого элемента пользовательского интерфейса. Например, в приведенном выше примере вносите изменения в верхнее свойство текстовых полей, и вы будете в порядке (появятся 2 текстовых поля). Пожалуйста, примите это как ответ, если он вам помог. Спасибо. –

Смежные вопросы