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é?):
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: ''
}
]
}
]
}
});
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! 
Loiane, tem essa opção para o extjs4?
Oi Valdinei, nativamente não. Só se alguém criar uma extensão para isso.
[]‘s
Bom… dá pra fazer utilizando Ext.direct. Podemos aproveitar o que foi mostrado nesse post e usando o direct:
Ext.direct.Manager.addProvider(Ext.app.REMOTING_API, {
type:’polling’,
url: ‘php/poll.php’,
listeners: {
data: function(provider, event){
// função que irá atualizar os ícones da toolbar
updateToolBar(event.data);
}
}
});
Veja no link http://docs.sencha.com/extjs/4.1.3/#!/example/direct/direct.html o exemplo do funcionamento do Ext.direct.
Como eu faço um botão CANCELAR? Com uma ação de cancelar ele.
Oi Sylvio,
Vc pode fazer qualquer botão, só precisa implementar a lógica correta dentro do controller. Aí vai depender o que vc quer cancelar, se vai fazer reset em form, voltar para alguma outra tela, etc.
[]‘s