Создаем TimePicker для Sencha Touch

6 Сен
2011

Мобильная разработка становится все популярнее и популярнее. Уже появилась огромная туча мобильных framework’ов, упрощаюших разработку.
Один из таких framework’ов это Sencha Touch. О нем уже не раз писалось, поэтому рассуждать о его плюсах и минусах я не буду. При работе с ним возникает проблема: отсутствует реализация поля формы, для выбора времени(интервала времени). Ниже описан прием, как создать некий аналог ‘datepickerfield’, только оперирующий со временем.

Итак сформилируем задачу четко:
Дизайнер присылает макет мобильного приложения, а там следующий контрол
Контрол
Обнаруживаеться что в sencha touch такого контрола нет.
Код ниже реализует подобный контрол.
//Расширяем класс
Ext.form.TimePicker = Ext.extend(Ext.form.Field, {
ui: ‘select’,
destroyPickerOnHide: false,
initComponent: function() {
this.picker=this.getPicker();//Ключевой момент
this.tabIndex = 1;
this.useMask = true;
this.value=»;
Ext.form.Text.superclass.initComponent.apply(this, arguments);//Родитель
},
getPicker: function() {//Функция которая задает кастомный Picker
if (!this.picker) {
this.picker = new Ext.Picker({
slots: [{
name : ‘fromlbl’,//Просто текст
title: ‘От’,
data : [
{
text: ‘От’,
value: ‘От’
}
]
},
{
name : ‘timefrom’, //Поле со временем
title: ‘Час от’,
data : [
/*Намеренно сократил количество часов, для удобства публикации кода*/
{text: ’12:00′, value: 12},
{text: ’11:00′, value: 11}
]
},
{
name : ‘tolbl’,
title: ‘До’,
data : [
{
text: ‘До’,
value: ‘До’
}
]
},{
name : ‘timeto’,
title: ‘Час до’,
data : [
{text: ’12:00′, value: 12},
{text: ’11:00′, value: 11}
]
}],
listeners: {
change: this.onPickerChange,//Пользователь что то выбрал
scope: this
}
});
}
return this.picker;
},
onMaskTap: function() { //События тапа по полю ввода
this.picker.show();
},
onPickerChange : function(picker, value) {//При изменении Pickera устанавливаем значение
this.setValue(value);
},
onPickerHide: function() {
if (this.destroyPickerOnHide && this.picker) {
this.picker.destroy();
}
},
/*Берем данные из Picker и устанавливаем их в качестве значения поля
предварительно их обработав*/

setValue: function(value) {
if(value){
this.value =value[‘timefrom’]+‘:00 — ‘+value[‘timeto’]+‘:00’;
}
else{
this.value=»;
}
if (this.rendered) {
this.fieldEl.dom.value = this.value;
}
},

onDestroy: function() {
if (this.picker) {
this.picker.destroy();
}
Ext.Picker.superclass.onDestroy.call(this);
}
});
Ext.reg(‘timepickerfield’, Ext.form.TimePicker);
Теперь вы можете использовать этот контрол в любых формах, просто напишите что то вроде:
{
xtype: ‘timepickerfield’,
name : ‘time’,
id: ‘time’,
label: ‘Время:’,
useClearIcon: true,
value:»
}
И вас появиться поле выбора интервала времени.
Плюс его в том что его можно менять как угодно под себя, делать какие угодно сложные контролы выбора.
Если у кого есть предложения по улучшению, пишите!
Всем удачных разработок.
По материалам Хабрахабр.



загрузка...

Комментарии:

Наверх