Marcos Junior

Olá Pessoal, como estão??

De volta ao blog, coloco hoje pra vocês um componente que precisei desenvolver para suprir a necessidade de um cliente em um projeto web mobile, com o Sencha Touch 2.0.
Um dos módulos do projeto é uma agenda de compromissos, com a necessidade de informar a Data, e o Horario do compromisso,  porém a grande suíte de componentes prontos do Sencha Touch não inclui um componente do tipo TimePicker.

Pesquisando no Google, encontrei um ótimo componente, porém não é compatível com a versão 2.0 do Sencha Touch.

O Código Fonte do componente pode ser encontrado no meu BitBucket.

Exemplos de uso:

Em um formulário ficaria assim:

1
2
3
4
5

{
    xtype: 'timepickerfield',
    label: 'Hora:',
    value: new Date()
}

Você também pode alterar as configurações do TimePicker pelo field, por exemplo:

1
2
3
4
5
6
7
8
9
10
11
12

{
    xtype: 'timepickerfield',
    label: 'Hora:',
    value: new Date(),
    picker: {
        slotOrder: ['hour', 'minute'],
        hourText: 'Hora',
        minuteText: 'Minuto',
        hourFrom: 8,
        hourTo: 16
    }
}

A Outra forma de usar o TimePicker é criando a instancia manualmente.

1
2
3
4
5

var picker = Ext.create('Ext.ux.TimePicker',{
    // aqui vai as configurações do time picker
 
    minuteScale: 5 // esta configuração faz com que os minutos utilizem uma scala.. neste exemplo, ficaria assim: 5,10,15,20,... .. o Default é 1
});

É isso ai pessoal, super simples!
Qualquer dúvida deixem comentário. Bug’s, informe pelo BitBucket

Espero que tenha ajudado, grande abraço!