Exemplo de Uso do Accordion Layout em ExtJS

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