Sencha Touch 2: Ícones e Botões com Notificação / Badge Text (Estilo Facebook)
Ei pessoal,
Mais um exemplo básico do Sencha Touch 2. Hoje vamos mostrar como adicionar um bagde text em algum botão da sua app mobile, no estilo dos ícones do facebook quando tem um request de novo amigo, ou mensagem, ou notificação como na figura abaixo:
Para fazer o mesmo é bem simples: basta adicionar a configuração "badgeText" com o valor (pode ser qualquer string - só ter senso de que não pode ser uma string grande, afinal é app mobile né?):
[code lang="js" firstline="1" toolbar="true" collapse="false" wraplines="false"]Ext.define('MyApp.view.MyContainer', {
extend: 'Ext.Container',
config: {
items: [
{
xtype: 'toolbar',
docked: 'top',
layout: {
pack: 'center',
type: 'hbox'
},
items: [
{
xtype: 'button',
badgeText: '3',
iconCls: 'user',
iconMask: true,
text: ''
},
{
xtype: 'button',
badgeText: '2',
iconCls: 'bookmarks',
iconMask: true,
text: ''
},
{
xtype: 'button',
badgeText: '1',
iconCls: 'maps',
iconMask: true,
text: ''
}
]
}
]
}
});[/code]
No final vai ficar assim:
Não fica igual, mas fica parecido. É claro que trabalhando com CSS dá pra ficar igualzinho!
Fica a idéia caso você precise fazer algo do tipo.
Até a próxima! :)