Senhores,
O caso de uso era simples: colocar um Grid dentro de um Accordion.
Criei o grupo do grid, no modo tradicional:
// Variávl "Modelo de coluna", cria as colunas do grid.
var clModel = new Ext.grid.ColumnModel(this.gridColumns);
// Variável "Modelo de número de registros" cria as linhas do grid de acordo com a quantidade de registros
var rsModel = new Ext.grid.RowSelectionModel(this.gridSelection);
rsModel.addListener('rowselect', function(obj, rowIndex, record){
fmPanel.getForm().loadRecord(record);
formataPopups(record);
}, this);
// Variável "Guardadora de dados do banco", esta variável será colocada dentro do rsModel para popular o grid
var dtStoree = new Ext.data.Store({
url: '<<local onde está o reposítório>>',
reader: new Ext.data.JsonReader({
successProperty: 'success',
root: 'data',
totalProperty: 'total'
}, this.gridData)
});
dtStoree.addListener('load', function(store, records, options){
initView();
}, this);
dtStoree.addListener('beforeload', function(store, records, options){
var instruction = "dtStore.baseParams = { ";
var cont = 0;
if(tela.filterField1 != null){
cont++;
instruction += "\"" + tela.filterField1 + "\" : \"" + Ext.getCmp(tela.filterField1).getValue().split(' - ')[0] + "\",";
}
if(tela.filterField2 != null){
cont++;
instruction += "\"" + tela.filterField2 + "\" : \"" + Ext.getCmp(tela.filterField2).getValue().split(' - ')[0] + "\",";
}
if(tela.filterField3 != null){
cont++;
instruction += "\"" + tela.filterField3 + "\" : \"" + Ext.getCmp(tela.filterField3).getValue().split(' - ')[0] + "\",";
}
instruction += " }"
if(cont>0){
eval(instruction);
}
}, this);
// Variável de montagem do painel do grid. Essa variável junta todos os componentes
// e cria uma referencia ao grid pronto
var gdPanel = new Ext.grid.GridPanel({
layout: 'fit',
autoWidth: true,
height: 500,
anchor: '100% 100%',
autoScroll: true,
// trecho a seguir redesenha o grid após a pesquisa dos dados
view: new Ext.grid.GridView({
forceFit:true
}),
cm: clModel,
sm: rsModel,
store: dtStoree,
bbar: new Ext.PagingToolbar({
pageSize: this.gridSize,
store: dtStoree,
displayInfo: true,
displayMsg: 'Mostrando registros {0} - {1} de {2}',
emptyMsg: "Nenhum registro para mostrar",
})
});
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:
// Variável de montagem do painel dde Accordion's. Essa variável junta todos os componentes
// e cria uma referencia ao accordion pronto
var accordion = new Ext.Panel({
title: 'Accordion Layout',
layout:'accordion',
defaults: {
// Aplicado para cada painel
bodyStyle: 'padding:15px'
},
layoutConfig: {
// Configurações específicas do Grupo Accordion vão aqui
titleCollapse: false,
animate: true,
autoWidth: true,
autoHeight: 600
},
items: [{
title: 'Panel 1',
autoScroll: true,
autoWidth: true,
autoHeight: true,
items: gdPanel
},{
title: 'Panel 2',
html: '<p>Panel content!</p>'
},{
title: 'Panel 3',
html: '<p>Panel content!</p>'
}]
});
Por fim, utilizei o objeto do accordion para gerar um formField:
// Objeto dos "Campos do Form". Ao invés de criá-los diretamente no painel, cria-se ou juntam-se os objetos aqui.
// o nome da variável faz referência direta a todo grupo de elementos que aparecerão na tela.
// neste caso em específico, criou-se um objeto de grid;
// esse grid foi colocado dentro do objeto de accordion;
// o accordion foi colocado dentro do formFields;
// o formFields será utilizado dentro do fmPanel;
// o fmPanel será um objeto do painel que será criado dentro do initView, objeto que cria, efetivamente, a tela.
var formFields = [{
autoScroll: true,
layout: 'column',
width: 465,
heigth: 50,
labelWidth: 1,
items: [{
layout: 'form',
width: 350,
labelWidth: 85,
items: [ {
xtype: 'textfield',
id: 'id',
title: 'id',
fieldLabel: 'id',
width: 244,
scope: this,
editable: false,
allowBlank: false,
tabIndex: 4,
valueDto: null,
}]
},{
layout: 'form',
width: 115,
labelWidth: 5,
items: [{
xtype: 'button',
text: 'Botão',
minWidth : 110,
listeners:{
click:function(){
if ( Ext.getCmp('id').getValue() != '' && Ext.getCmp('id').getValue() != 'null') {
fmPanel.getForm().submit(searchAction);
} else {
Ext.Msg.alert('Atenção', 'Campo id em Branco.');
}
}
}
}]
}]
},
accordion
];
