EXT – Inserindo elementos no Panel
No artigo anterior estudamos a criação de um Ext.Panel e vimos que nele podemos ter uma barra de menus superior e inferior. Também vimos que o conteúdo do Panel era formado de um texto HTML simples.
Neste artigo iremos mostrar como inserir elementos no Panel, de forma a criar telas mais elaboradas. Nosso primeiro exemplo será um Panel que possuirá o seguinte Layout:
No exemplo acima temos um Panel global e dois Panels menores que formam um menu e uma área com abas. O código deste Layout é :
<!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>Panel com menu</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() {
var PanelMenu = new Ext.Panel({
id : ´PanelMenu´
, title : ´MENU´
, region : ´west´
, width : 200
, collapsible : true
});
var PanelComAbas = new Ext.TabPanel({
id: ´PanelComAbas´
, region : ´center´
, activeTab : 0
, items : [{
title : ´Primeira Aba´
, html : ´Esta é a primeira ABA´
},{
title : ´Segunda Aba´
, html : ´Segunda aba´
},{
title : ´Terceira ABA´
, html : ´Terceira Aba´
, closable : true
}]
});
var PanelGlobal = new Ext.Panel({
id: ´PanelGlobal´
, title: ´Panel com Layout´
, collapsible:true
, renderTo: ´PanelGlobal´
, layout: ´border´
, width:700
, height: 500
, items: [PanelMenu,PanelComAbas]
});
});
</script>
<body style="margin:20px">
<div id="PanelMenu"></div>
</body>
</html>Neste código criamos três variáveis: PanelMenu, PanelComAbas e PanelGlobal. Somente o PanelGlobal se renderiza em uma <div>. Os outros dois serão incluídos pelo próprio PanelGlobal, através da propriedade items.
No primeiro Panel, chamado de PanelMenu, temos inicialmente um Panel vazio, mas que iremos incluir um menu em forma de árvore (Próximo Artigo). O segundo Panel, PanelComAbas, utilizamos o componente Ext.TabPanel para criar rapidamente uma Panel com abas, onde inserimos conteúdo HTML.
O terceiro Panel apresenta uma novidade, que é a propriedade layout. Nela, definimos o tipo de layout dos itens do Panel. O valor “border” indica um tipo de layout específico, no qual pode-se definir regiões da tela como se fossem regiões geográficas, definidas pelas propriedades:
- west: Oeste, parte esquerda
- east: Leste, parte direita
- north: norte, topo do site
- south: Sul, rodapé do site
- center: Região central. Esta região é obrigatória!
Resumindo, temos:
Podemos incluir mais Panels de forma a ter uma aplicação no seguinte layout:
O código para este Layout está no site oficial do EXT, no seguinte endereço:
http://www.extjs.com/deploy/dev/examples/layout/complex.html
Abraços!
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.
