Results 1 to 6 of 6

Thread: Scroll Bar in IE with GridPanels inside Accordion

  1. #1
    Ext User
    Join Date
    Dec 2008
    Posts
    10
    Vote Rating
    0
      0  

    Default Scroll Bar in IE with GridPanels inside Accordion

    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:

    HTML 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: "Participao 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: "Participao 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?

  2. #2
    Ext User
    Join Date
    Dec 2008
    Posts
    10
    Vote Rating
    0
      0  

    Default

    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:

    Code:
    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,
                ........
    });

  3. #3
    Ext User
    Join Date
    Jul 2009
    Posts
    4
    Vote Rating
    0
      0  

    Default Thank you!!! Thank you!!! Thank you!!!

    Thank you , it did the job iris hadar

  4. #4
    Ext User
    Join Date
    Jun 2010
    Posts
    1
    Vote Rating
    0
      0  

    Default

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

  5. #5
    Ext User
    Join Date
    Dec 2008
    Posts
    10
    Vote Rating
    0
      0  

    Default

    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. =)

  6. #6
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    118
      0  

    Default

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

    This override works much better.

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •