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!
