Empilhando itens com accordion layout
Muitas aplicações precisam mostrar numa mesma tela vários paineis que só precisam aparecer um por vez, uma boa solução é usar o accordion layout, como no exemplo abaixo:
Como fazer isso:
1. Crie o panel principal:
panel1=new Ext.Panel({
title: 'Mail',
items: [{
xtype: 'treepanel',
id: 'inbox-tree',
autoScroll: true,
animate: true,
enableDD: true,
containerScroll: true,
border: false,
dataUrl: 'mail-folders.php',
root: {
nodeType: 'async',
text: 'MailBox',
draggable: false,
id: 'mailbox'
}
}]
});
Arquivo mail-folders.php
<?php
$node = "";
if (isset($_REQUEST["node"])) {
$node = $_REQUEST["node"];
}
if ($node == 'mailbox') {
echo "[{id: 0,text: 'Drafts'},{id: 1,text: 'Inbox'},{id: 2,text: 'Junk E-mail'},{id: 3,text: 'Sent Items'}]";
}
?>
2. Crie o panel do Calendário:
panel2=new Ext.Panel({
title: 'Calendar',
bodyStyle: 'padding:10px',
items: [{
xtype: 'datepicker',
style: 'border:0'
}]
});
3. Crie o panel de Contatos:
panel3=new Ext.Panel({
title: 'Contacts',
bodyStyle: 'padding:10px',
items: [{ xtype: 'fieldset',
title: 'Current View',
autoHeight: true,
bodyStyle: 'padding:3px',
items: [
{ xtype: 'radio', boxLabel: 'Address Cards',
hideLabel: true, name: 'contacts-view', checked: true },
{ xtype: 'radio', boxLabel: 'Phone List',hideLabel: true, name:'contacts-view' },
{ xtype: 'radio', boxLabel: 'By Category',hideLabel: true, name: 'contacts-view' },
{ xtype: 'radio', boxLabel: 'By Location',hideLabel: true, name: 'contacts-view'}]
}]
});
4. Agora posicione os panels num container e expanda os nós da raiz da árvore:
var container=new Ext.Panel({
title: 'Accordion Layout',
width: 200,
height: 350,
applyTo: 'accordion-panel',
// Displays one item at a time in a stacked layout.
layout: 'accordion',
items: [panel1, panel2, panel3]
});
// Expand the root node of the tree.
Ext.getCmp('inbox-tree').getRootNode().expand();
O truque para os painéis empilhados reside na especificação de um AccordionLayout como opção de layout para o panel (container) que contém os outros.
Leandro Santos
