PDA

View Full Version : Scroll Bar in IE with GridPanels inside Accordion



jorgeandrems
17 Feb 2010, 11:05 AM
Hi,

I am having a problem with the scroll bars (horizontal and vertical) using IE7 + ExtJS 3.0. I am using four Grid panels as items of an Accordion panel. It works fine in FF, not in IE7. Here is the code:


var gridPanel1 = new Ext.grid.GridPanel({
store: new Ext.data.GroupingStore({
autoLoad: false,
baseParams: {
controller: "GeraRelatorio",
action: "getReportData"
},
proxy: new Ext.data.HttpProxy({
method: 'post',
url: Application.URL.APP + 'application/index.php'
}),
reader: new Ext.data.JsonReader({
root: "items_origem",
totalProperty: "total_origem"
}, Ext.data.Record.create([
{name: 'NomeGrupoConta', type: 'string'},
{name: 'NomeSubGrupoRelatorio', type: 'string'},
{name: 'OrdemSubGrupoRelatorio', type: 'int'},
{name: 'NomeGrupoRelatorio', type: 'string'},
{name: 'OrdemGrupoRelatorio', type: 'int'},
{name: 'FlagGrupo', type: 'string'},
{name: 'Valor', type: 'float'},
{name: 'Custo', type: 'float'},
{name: 'ParticipacaoTotal', type: 'float'},
{name: 'CustoPorcentagem', type: 'float'},
{name: 'PorcentagemSobreCDI', type: 'float'},
{name: 'ParticipacaoTotalGeral', type: 'float'}
])),
sortInfo:{field: 'OrdemSubGrupoRelatorio', direction: "ASC"},
groupField: 'OrdemSubGrupoRelatorio'
}),

columns: [
{header: "Recursos", align: 'left', width: 220, sortable: true, dataIndex: 'NomeGrupoConta', renderer: this.renderRecursoOrigem, scope: this},
{dataIndex: 'OrdemSubGrupoRelatorio', hidden: true, renderer: this.renderGroupOrigem, scope: this},
{header: "R$ Valor", align: 'right', width: 130, sortable: true, dataIndex: 'Valor', renderer: this.renderValorOrigem, scope: this},
{header: "Participação do Total", align: 'right',width: 130, sortable: true, dataIndex: 'ParticipacaoTotal', renderer: this.renderPartValorTotalOrigem, scope: this},
{header: "% Custo", align: 'right', width: 130, sortable: true, dataIndex: 'CustoPorcentagem', renderer: this.renderPorcentagemCustoOrigem, scope: this},
{header: "% Sobre CDI", align: 'right', width: 130, sortable: true, dataIndex: 'PorcentagemSobreCDI', renderer: this.renderPorcentagemCDIOrigem, scope: this},
{header: "R$ Custo", align: 'right', width: 130, sortable: true, dataIndex: 'Custo', renderer: this.renderCustoOrigem, scope: this},
{header: "Participação do Total", align: 'right', width: 130, sortable: true, dataIndex: 'ParticipacaoTotalGeral', renderer: this.renderPartCustoTotalOrigem, scope: this}
],

view: new Ext.grid.GroupingView({
showGroupName: false,
startCollapsed: false,
groupTextTpl: '{text}'
}),

autoWidth: false,
autoHeight: false,
width: 650,
height: 350,
autoScroll: true,
loadMask: true,
stripeRows: true,
title: "Origem dos Recursos"
});

var accordionPanel = new Ext.Panel({
layout: 'accordion',
autoWidth: false,
autoHeight: false,
width: 650,
height: 350,
border: false,
split: true,
activeItem: 0,
layoutConfig:{
animate: true,
hideCollapseTool: true,
titleCollapse: true
},
plugins: new Ext.ux.layout.AccordionKeepActive(),
items: [
gridPanel1,
gridPanel2,
gridPanel3,
gridPanel4
]
......
});

Here are two images showing the problem in IE7 and the right result in FF.

IE7 Scroll Bar Problem:
http://www.esnips.com/nsdoc/0679cf7d-adc5-4e43-be34-cfbb71ca029b

Firefox Working Fine:
http://www.esnips.com/nsdoc/00ca9c19-1790-498d-a0ec-08c6c340da26

Anyone?

jorgeandrems
17 Feb 2010, 11:43 AM
I found the problem! The 'autoWidth' property should be used INSIDE the 'layoutConfig' array property, then the scroll bar appears in IE and FF. The fixed code is:


var accordionPanel = new Ext.Panel({
layout: 'accordion',
//autoWidth: false, NOT NECESSARY HERE
autoHeight: false,
width: 650,
height: 350,
border: false,
split: true,
activeItem: 0,
layoutConfig:{
animate: true,
hideCollapseTool: true,
titleCollapse: true,
autoWidth: false // HERE IS THE RIGHT PLACE TO SET THE AUTOWIDTH PROPERTY
},
plugins: new Ext.ux.layout.AccordionKeepActive(),
items: [
gridPanel1,
gridPanel2,
........
});

birdface
21 Feb 2010, 2:32 AM
Thank you , it did the job iris hadar

taranis
24 Jun 2010, 11:38 PM
Could you explain what 's do the following code:
plugins: new Ext.ux.layout.AccordionKeepActive(),

jorgeandrems
25 Jun 2010, 4:05 AM
Hi taranis,

This code initiates a Ext Plugin called "AccordionKeepActive". It works with the accordion panel, keeping at least one panel activated.

Let me know if you need other infos. =)

Condor
25 Jun 2010, 7:44 AM
autoWidth:false also doesn't always do what you want.

This override (http://www.sencha.com/forum/showthread.php?31069-UNKNOWN-2.x-3.x-BUG-GridPanel-inside-accordion-layout-forceFit-problem-IE6&p=396044#post396044) works much better.