Neste artigo iremos estudar como funcionam as janelas de diálogo. A forma de exibi-las é bastante simples, e você pode criá-las a qualquer momento do seu código.
Existe um exemplo completo no seguinte endereço:
http://extjs.com/deploy/dev/examples/message-box/msg-box.html
Não há necessidade de reproduzir os mesmos exemplos aqui, mas iremos criar um exemplo que engloba algumas técnicas utilizadas.
Se você leu os nossos artigos anteriores e baixou o Ext, crie um arquivo chamado mensagens.html na pasta de exemplos do Ext e adicione o seguinte conteúdo:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Exemplo com mensagens</title>
<!-- EXT Início -->
<link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css" />
<script type="text/javascript" src="../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../ext-all.js"></script>
<!-- EXT Fim -->
<script language="javascript">
Ext.onReady(function() {
});
</script>
<body>
<input type="button" id="btn1" value=" Um simples alert "/><br/><br/>
<input type="button" id="btn2" value=" Perguntando ao usuário "/> <br/><br/>
</body>
<html>Temos então três botões, aos quais iremos atribuir funcionalidades do ext. O código abaixo será inserido dentro do método onReady do Ext.
<script language="javascript">
Ext.onReady(function() {
var btn1 = Ext.get("btn1");
var btn2 = Ext.get("btn2");
btn1.on("click",function(e){
Ext. MessageBox.alert(´Alert´, ´Simples Alert....´);
});
});
</script>Veja que, para o “btn1”, inserimos um código muito simples, passando dois parâmetros, que são o Título e a mensagem ao usuário. Para que possamos criar uma mensagem melhor, com diversos parâmetros, ícones e com uma resposta personalizada, devemos configurar a caixa de diálogo da seguinte forma:
btn2.on("click",function(e){
Ext.MessageBox.show({
id: "msg2"
,title:´Salvar?´
,msg: ´Deseja Salvar?´
,buttons: Ext. MessageBox.YESNO
,icon: Ext.MessageBox.QUESTION
});
});Atribuímos ao segundo botão um conjunto de propriedades para a sua configuração. Definimos o título, mensagem, quais são os botões da mensagem e qual o ícone que será utilizado.
Os botões disponíveis para uma caixa de diálogo são:
Ext. MessageBox.YESNO
Ext. MessageBox.YESNOCANCEL
Ext. MessageBox.OKCANCEL
Ext. MessageBox.OK
Ext. MessageBox.CANCEL
Os ícones disponíveis são:
Ext. MessageBox.Error
Ext. MessageBox.INFO
Ext. MessageBox.QUESTION
Ext. MessageBox.WARNING
Além destas propriedades, é possível atribuir um método que será chamado quando o usuário clicar em um botão da caixa de mensagem. Este método é atribuído pela propriedade “fn”. Veja:
btn2.on("click",function(e){
Ext.MessageBox.show({
id: "msg2"
,title:´Salvar?´
,msg: ´Deseja Salvar?´
,buttons: Ext.Msg.YESNO
,fn: msgBoxClick
,icon: Ext.MessageBox.QUESTION
});
});
function msgBoxClick(button){
Ext.MessageBox.alert("Resposta","Você clicou em: " + button);
}Abraços!
De 0 a 10, o quanto você recomendaria este artigo para um amigo?