Trabalhando com EXTJS
Autor: Arthur Tavares | Publicado: 2011-03-15T10:24:00-07:00

Senhores,

O caso de uso era simples: colocar um Grid dentro de um Accordion.

Criei o grupo do grid, no modo tradicional:

&nbsp;&nbsp;&nbsp; // Variávl "Modelo de coluna", cria as colunas do grid.
&nbsp;&nbsp;&nbsp; var clModel = new Ext.grid.ColumnModel(this.gridColumns);

&nbsp;&nbsp;&nbsp; // Variável "Modelo de número de registros" cria as linhas do grid de acordo com a quantidade de registros&nbsp; 
&nbsp;&nbsp;&nbsp; var rsModel = new Ext.grid.RowSelectionModel(this.gridSelection);
&nbsp;&nbsp;&nbsp; rsModel.addListener('rowselect', function(obj, rowIndex, record){
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; fmPanel.getForm().loadRecord(record);
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; formataPopups(record);
&nbsp;&nbsp;&nbsp; }, this);

&nbsp;&nbsp;&nbsp; // Variável "Guardadora de dados do banco", esta variável será colocada dentro do rsModel para popular o grid
&nbsp;&nbsp;&nbsp; var dtStoree = new Ext.data.Store({
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; url: '&lt;&lt;local onde está o reposítório&gt;&gt;',
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; reader: new Ext.data.JsonReader({
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; successProperty: 'success',
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; root: 'data',
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; totalProperty: 'total'
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }, this.gridData)
&nbsp;&nbsp;&nbsp; });
&nbsp;&nbsp;&nbsp; 
&nbsp;&nbsp;&nbsp; dtStoree.addListener('load', function(store, records, options){
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; initView();
&nbsp;&nbsp;&nbsp; }, this);

&nbsp;&nbsp;&nbsp; dtStoree.addListener('beforeload', function(store, records, options){
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var instruction = "dtStore.baseParams = { ";
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; var cont = 0;
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; if(tela.filterField1 != null){
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; cont++;
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; instruction += "\"" + tela.filterField1 + "\" : \"" + Ext.getCmp(tela.filterField1).getValue().split(' - ')[0] + "\",";
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; }
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; if(tela.filterField2 != null){
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; cont++;
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; instruction += "\"" + tela.filterField2 + "\" : \"" + Ext.getCmp(tela.filterField2).getValue().split(' - ')[0] + "\",";
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; }
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; if(tela.filterField3 != null){
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; cont++;
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; instruction += "\"" + tela.filterField3 + "\" : \"" + Ext.getCmp(tela.filterField3).getValue().split(' - ')[0] + "\",";
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; }
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; instruction += " }"
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; if(cont&gt;0){
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; eval(instruction);
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; }
&nbsp;&nbsp;&nbsp; }, this);

&nbsp;&nbsp;&nbsp; // Variável de montagem do painel do grid. Essa variável junta todos os componentes
&nbsp;&nbsp;&nbsp; // e cria uma referencia ao grid pronto
&nbsp;&nbsp;&nbsp; var gdPanel = new Ext.grid.GridPanel({
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; layout: 'fit',
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; autoWidth: true,
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; height: 500,
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; anchor: '100% 100%',
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; autoScroll: true,
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; // trecho a seguir redesenha o grid após a pesquisa dos dados
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; view: new Ext.grid.GridView({
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; forceFit:true
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }),
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; cm: clModel,
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; sm: rsModel,
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; store: dtStoree,
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; bbar: new Ext.PagingToolbar({
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; pageSize: this.gridSize,
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; store: dtStoree,
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; displayInfo: true,
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; displayMsg: 'Mostrando registros {0} - {1} de {2}',
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; emptyMsg: "Nenhum registro para mostrar",
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; })
&nbsp;&nbsp;&nbsp; });

Logo após, coloquei a variável gdPanel dentro do construtor do Accordion:
Aqui é importante mencionar que fiz algo que não encontrei em nenhum exemplo por ai:
Ajuste de Grid dentro de Accordion em EXTJS.
Ao tentar arrumar o Grid dentro do Accordion, comecei tentando pelo próprio Grid, afinal, era este objeto que não tinha o comportamento que eu desejava.
Porém, por mais que eu tratasse o Grid, não havia como fazê-lo aparecer completo, com scroll, de forma satisfatória para o usuário final.
Então, suspeitei que o objeto do Accordion estivesse "espremendo" o Grid, não fornecendo lugar adequado para sua apresentação.
Mas o problema não foi no objeto do Accordion. Embora este tenha grupo "defaults", indicado para o conteúdo ser extendido por todos os items, o layout é controlado diretamente dentro de cada item do accordion.
O código do accordion ficou assim:

&nbsp;&nbsp;&nbsp; // Variável de montagem do painel dde Accordion's. Essa variável junta todos os componentes
&nbsp;&nbsp;&nbsp; // e cria uma referencia ao accordion pronto&nbsp;&nbsp;&nbsp; 
&nbsp;&nbsp;&nbsp; var accordion = new Ext.Panel({
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; title: 'Accordion Layout',
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; layout:'accordion',
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; defaults: {
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; // Aplicado para cada painel
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; bodyStyle: 'padding:15px'
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; },
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; layoutConfig: {
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; // Configurações específicas do Grupo Accordion vão aqui
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; titleCollapse: false,
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; animate: true,
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; autoWidth: true,
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; autoHeight: 600
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; },
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; items: [{
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; title: 'Panel 1',
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; autoScroll: true,
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; autoWidth: true,
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; autoHeight: true,
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; items: gdPanel
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; },{
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; title: 'Panel 2',
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; html: '&lt;p&gt;Panel content!&lt;/p&gt;'
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; },{
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; title: 'Panel 3',
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; html: '&lt;p&gt;Panel content!&lt;/p&gt;'
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; }]
&nbsp;&nbsp;&nbsp; });

Por fim, utilizei o objeto do accordion para gerar um formField:

&nbsp;&nbsp;&nbsp; // Objeto dos "Campos do Form". Ao invés de criá-los diretamente no painel, cria-se ou juntam-se os objetos aqui.
&nbsp;&nbsp;&nbsp; // o nome da variável faz referência direta a todo grupo de elementos que aparecerão na tela.
&nbsp;&nbsp;&nbsp; // neste caso em específico, criou-se um objeto de grid;
&nbsp;&nbsp;&nbsp; // esse grid foi colocado dentro do objeto de accordion;
&nbsp;&nbsp;&nbsp; // o accordion foi colocado dentro do formFields;
&nbsp;&nbsp;&nbsp; // o formFields será utilizado dentro do fmPanel;
&nbsp;&nbsp;&nbsp; // o fmPanel será um objeto do painel que será criado dentro do initView, objeto que cria, efetivamente, a tela.
&nbsp;&nbsp;&nbsp; var formFields = [{
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; autoScroll: true,
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; layout: 'column',
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; width: 465,
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; heigth: 50,
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; labelWidth: 1,
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; items: [{
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; layout: 'form',
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; width: 350,
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; labelWidth: 85,
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; items: [ {
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; xtype: 'textfield',
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; id: 'id',
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; title: 'id',
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; fieldLabel: 'id',
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; width: 244,
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; scope: this,
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; editable: false,
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; allowBlank: false,
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; tabIndex: 4,
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; valueDto: null,
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; }]
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; },{
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; layout: 'form',
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; width: 115,
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; labelWidth: 5,
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; items: [{
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; xtype: 'button',
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; text: 'Botão',
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; minWidth : 110,
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; listeners:{
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; click:function(){
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; if ( Ext.getCmp('id').getValue() != '' &amp;&amp; Ext.getCmp('id').getValue() != 'null') {
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; fmPanel.getForm().submit(searchAction);
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; } else {
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; Ext.Msg.alert('Atenção', 'Campo id em Branco.');
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; }
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; }
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; }&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp; 
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; }]
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; }]
&nbsp;&nbsp;&nbsp; },
&nbsp;&nbsp;&nbsp; accordion
&nbsp;&nbsp;&nbsp; ];