O Panel é um componente muito utilizado no Ext, sendo responsável por renderizar as janelas no navegador. Um exemplo simples de Panel pode ser descrito no código abaixo:
<!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 de Panel</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 PanelSimples = new Ext.Panel({
id: ´PanelSimples´
, title: ´Panel Simples´
, collapsible:true
, renderTo: ´PanelSimples´
, width:400
, html: "Este é um Panel simples do Ext."
});
});
</script>
<body>
<div id="PanelSimples"></div>
</body>
<html>No exemplo acima, criamos um Panel que se renderiza na div “PanelSimples“. O uso da propriedade collapsible gera um botão na barra de títulos do Panel fazendo com que o seu conteúdo possa ser fechado (detalhe abaixo).
Podemos incluir no cabeçalho do Panel um menu de opções, como no exemplo abaixo:
<!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 p = new Ext.Panel({
id: ´PanelMenu´
, title: ´Panel com menus´
, collapsible:true
, renderTo: ´PanelMenu´
, width:400
, html: "Este é um Panel simples do Ext, mas com um menu"
, tbar : [
{ text: ´Arquivo´, menu: [{text: ´Novo´},{text: ´Salvar´},{text: ´Salvar Como´},{text: ´Fechar´}]},
{ text: ´Editar´, menu: [{text: ´Copiar´},{text: ´Recortar´},{text: ´Colar´}]}
]
});
});
</script>
<body style="margin:20px">
<div id="PanelMenu"></div>
</body>
<html>No exemplo acima, a propriedade tbar diz ao Panel para criar uma barra de menus com os itens informados. Uma característica importante do Ext é a criação de objetos genéricos que podem ser de um tipo padrão. Por exemplo, quando criamos a seguinte estrutura na propriedade tbar:
[
{ text: ´Arquivo´, menu: [{text: ´Novo´},{text: ´Salvar´},{text: ´Salvar Como´},{text: ´Fechar´}]},
{ text: ´Editar´, menu: [{text: ´Copiar´},{text: ´Recortar´},{text: ´Colar´}]}
]O Ext assume que os objetos genéricos criados são do tipo Menu. A estrutura acima representa o seguinte objeto:
Um Array com dois Objetos, sendo que cada Objeto possui na propriedade menu um outro Array de objetos. Todos são do tipo menu.
Da mesma forma que existe o tbar (Top Bar), também temos o bbar (Bottom bar) onde é possível incluir além de menus, uma barra de status. Por exemplo:
<!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 p1 = new Ext.Panel({
id: ´PanelMenu´
, title: ´Panel com menus´
, collapsible:true
, renderTo: ´PanelMenu´
, width:400
, html: "Este é um Panel simples do Ext, mas com um menu"
, bbar : [
{ text: ´Arquivo´, menu: [{text: ´Novo´},{text: ´Salvar´},{text: ´Salvar Como´},{text: ´Fechar´}]},
{ text: ´Editar´, menu: [{text: ´Copiar´},{text: ´Recortar´},{text: ´Colar´}]}
]
});
var p2 = new Ext.Panel({
id: ´PanelMenu´
, title: ´Panel com menus´
, collapsible:true
, renderTo: ´PanelStatusBar´
, width:400
, html: "Este é um Panel simples do Ext, mas com um menu e uma barra de status"
, bbar: new Ext.StatusBar({
id: ´statusbar´
, defaultText: ´Barra de status´
, items: [{text:´Um botão´},´-´,{text:´Um outro botão´}]
})
});
});
</script>
<body style="margin:20px">
<div id="PanelMenu"></div>
<br/><br/><br/>
<div id="PanelStatusBar"></div>
</body>
<html>
O código acima cria 2 panels, veja:
No primeiro Panel, apenas trocamos tbar para bbar. No segundo Panel, atribuímos ao bbar um objeto do tipo Ext.StatusBar onde incluímos um texto padrão e dois botões.
Veja também que em todos os nossos exemplos utilizamos a propriedade “HTML” para preencher a parte central do Panel. Mas existem outras formas de preenchimento, como um formulário, uma tabela, um conjunto de janelas organizado através de abas etc, que serão vistas no nosso próximo artigo!
De 0 a 10, o quanto você recomendaria este artigo para um amigo?