Feeds
Newsletter
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
}
]
});
});Resultado:
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>Resultado:
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.
Interação
3 comentários
Ian Liu Rodrigues
20/08/2008 12h28
Interessante
É interessante como as coisas "giram". No GTK, por exemplo, é recomendado que se use um arquivo XML para montar o layout, evitando utilizar códigos. O HTML é exatamente isso, uma interface para não se utilizar códigos para montar um layout. Agora bibliotecas em JS foram criadas para montar os layouts via código. Será que surgirá um novo padrão XML para representar layouts em EXT?!
Bom... não é bem um padrãooooooooo em XML, mas é uma tag library que fizeram para Java. É o Exttld: Uma library escrita em java para criar layouts em EXT Js.
Bom.. eu nunca usei... ehehehe mas se eu soubesse Java, com certeza estaria fazendo horrores com isso.. euheueuhe.
Segue o link: http://www.exttld.com/
Raphael Augusto Ferroni Cardoso
20/08/2008 14h24
Interessante sim, padrão não
Também acho muito interessante, porem penso que não chegaria a ser um padrão XML porque esse é JavaScript. Apesar da praticidade, prefiro a portabilidade de se utiliza HTML e CSS.
JavaScript - Guia de Consulta Rápida - 3ª Edição
jQuery em Ação
Ajax - Guia Prático para Windows
O Melhor do JavaScript
iMasters
- Sobre o iMasters
- Política de privacidade
- Anuncie
- Feeds iMasters
- Fóruns iMasters
- Fale conosco
2001 - iMasters FFPA Informática Ltda - Todos os direitos reservados.