Scroll Bar in IE with GridPanels inside Accordion

[jorgeandrems]

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:


Firefox Working Fine:


Anyone?

[jorgeandrems]

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]

Thank you , it did the job iris hadar

[taranis]

Could you explain what 's do the following code:
plugins: new Ext.ux.layout.AccordionKeepActive(),

[jorgeandrems]

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]

autoWidth:false also doesn't always do what you want.

This override works much better.