EXT – Desenvolvendo menus
Neste artigo iremos criar um menu simples, imitando os famosos menus do Windows. Você poderá criar diversos tipos de menus e inseri-los em determinadas áreas de componentes do Ext.
Inicialmente, criamos um menu que se renderiza em uma tag div. Veja:
<!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>Menu renderizado em uma DIV</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() {
//Criamos o menu
var menu = new Ext.menu.Menu({
id: ´menu´
,items: [´Item 1´,´Item 2´,´Item 3´,´-´,´Item 4´]
});
//Criamos uma toolbar, que contem um botão que carrega o menu acima
var toolBar = new Ext.Toolbar({
id:´toolBar´
, renderTo: ´MenuDiv´
, items:[new Ext.Button({text:´Arquivo´,menu:menu})]
});
});
</script>
<body>
<div id="MenuDiv"></div>
</body>
</html>O arquivo acima produz o seguinte resultado:
Temos um belo menu no topo da nossa aplicação. É claro que criamos um menu de forma muito rápida, mas sem nenhuma utilidade.
No exemplo abaixo incluímos alguns ícones nos itens de menu. O ideal é incluir estes ícones através de CSS.
<!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>Menu renderizado em uma DIV</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 -->
<style type="text/css">
.icon1 {
background-image: url(icones/application.png) !important;
}
.icon2 {
background-image: url(icones/application_cascade.png) !important;
}
</style>
<script language="javascript">
Ext.onReady(function() {
//Criamos o menu
var menu = new Ext.menu.Menu({
id: ´menu´
,items: [
{text:´Item 1´,iconCls:´icon1´}
,{text:´Item 2´,iconCls:´icon2´}
]
});
//Criamos uma toolbar, que contem um botão que carrega o menu acima
var toolBar = new Ext.Toolbar({
id:´toolBar´
, renderTo: ´MenuDiv´
, items:[new Ext.Button({text:´Arquivo´,menu:menu})]
});
});
</script>
<body>
<div id="MenuDiv"></div>
</body>
</html>O resultado é:
Também podemos adicionar ações aos clicks do menu. Por exemplo:
//Criamos o menu
var menu = new Ext.menu.Menu({
id: ´menu´
,items: [
{text:´Item 1´
,iconCls:´icon1´
,handler:function(e){
Ext.MessageBox.alert(´Click..´, ´Você clicou no item 1´);
}}
,{text:´Item 2´,iconCls:´icon2´}
]
});O atributo “handler” é disparado assim que clicamos no item do menu. Existem diversas formas de criar um menu, inclusive em diversos componentes do EXT. Veremos outros exemplos em um próximo artigo.
trabalha com desenvolvimento web desde 1998 e atualmente dedica-se a escrever livros sobre programação e desenvolvimento de sistemas, disponíveis no seu site.
