Utilizando ViewPorts
Um componente muito interessante do EXT é o ViewPort. Ele mostra todo o poder do EXT no desenvolvimento de sistemas e representa toda a área útil de sua aplicação (browser).
OBS: Todo Viewport é renderizado na tag BODY do documento HTML e não há como renderizá-lo em outro lugar. Pode-se ter somente um Viewport por página.
Suponhamos que iremos criar uma aplicação com as seguintes áreas:
- Lado esquerdo: Menu
- Área central: Aplicação
- Rodapé: Mensagens e outras funcionalidades
Com ViewPort é possível criar esta configuração rapidamente, sem esforço. Inicialmente criamos o HTML, 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>Exemplo com viewport</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>
<div id="menu">Este é o menu</div>
<div id="content">Este é o conteúdo</div>
<div id="footer">Este é o rodapé</div>
</body>
<html>Criamos três DIVs para o nosso exemplo e usamos o Viewport para inserir cada div em seu devido lugar. Veja:
Ext.onReady(function() {
new Ext.Viewport({
id: ´viewport´
, layout: ´border´
, items: [
{
id: ´westRegion´
, title: ´Menu´
, region:´west´
, contentEl:´menuDiv´
, width: 200
, collapsible: true
, split:true
},
{
id: ´centerRegion´
, region:´center´
, contentEl:´contentDiv´
, autoHeight: true
, split:true
},
{
id: ´footerRegion´
, region:´south´
, contentEl:´footerDiv´
, collapsible: true
, title: "Footer"
, split:true
}
]
});
});No código acima, criamos um Viewport com o Layout “border”. A utilização do Layout “border” permite que criemos regiões definidas na aplicação, que são configuradas como: east (leste, parte esquerda da aplicação), West (oeste, parte direta da aplicação), North (Norte, cabeçalho da aplicação), South (Sul, rodapé da aplicação) e Center (Centro, parte central da aplicação)
A propriedade “items” determina os itens do Viewport. Cada item é considerado um Panel e para cada item configuramos a sua região. Também configuramos outras propriedades tais como “collapsible” e “title”.
Agora vamos criar outro viewport, sem a utilização de tags 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>Exemplo com viewport</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 pnl1 = new Ext.Panel({
id: ´pnl1´
, title: ´Menu´
, region:´west´
, width: 200
, collapsible: true
, split:true
});
var pnl2 = new Ext.TabPanel({
id: ´pnl2´
, title: ´Conteúdo´
, region:´center´
, activeTab:0
, items: [{title:"Aba 1",html:"<h1>Aba 1</h1>"},{title:"Aba 2"}]
});
new Ext.Viewport({
id: ´viewport´
, layout: ´border´
, items: [pnl1,pnl2]
});
});
</script>
<body></body>
</html>No exemplo acima, criamos dois Panels e utilizamos o Viewport para configurar estes panels em seus devidos lugares. Veja que criamos um componente chamado TabPanel, no qual possui dois items. No resultado, o Ext renderiza o TabPanel em abas, onde o conteúdo de cada aba pode ser definido através de diversos métodos. Neste exemplo, usamos a prorpiedade “html” para inserir um conteúdo HTML qualquer.
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.
