Behaviour of the Viewport when zooming in/out in the browser

Ext version tested:

• Ext 2.2

Adapter used:

• ext

css used:

• only default ext-all.css

Browser versions tested against:

• Firefox 3.6.10 (firebug 1.5.4 installed)

Operating System:

• Windows 7
• Linux Ubuntu 10

Description:

• When changing the zoom level in the browser (CTRL + '+' & CTRL + '-') many times, the height of the north item of the viewport is increased but never come back in place. (see screenshots)

Test Case:

Code:

---

Ext.onReady(function () {

    //Toolbar

    var mainToolbar = new Ext.Toolbar({
        region: 'north',
        baseCls: 'x-plain',
        items: [{
            id: 'btnHelp'
            , text: 'Help'
            , iconCls: 'x-menu-ico-help'
        }, {
            id: 'btnEdit'
              , text: 'Edit'
              , iconCls: 'x-menu-ico-edit'
        }, {
          id: 'btnCancel'
          , text: 'Cancel'
          , iconCls: 'x-menu-ico-cancel'
        }, {
            id: 'btnSave'
              , text: 'Save'
              , iconCls: 'x-menu-ico-save'
        }, {
            id: 'btnClose'
              , text: 'Close'
              , iconCls: 'x-menu-ico-close'
        }, {
            id: 'btnRefresh'
              , text: 'Refresh'
              , iconCls: 'x-menu-ico-refresh'
        }]
      });

    //Leftpanel

    var mainLeftPanel = new Ext.Panel({
        region: 'west',
        split: true,
        collapsible: true,
        collapseMode: 'mini',
        width: 230,
        minWidth: 100,
        maxSize: 400,
        layout: 'accordion',
        defaults: {
            bodyStyle: 'padding:5px;'
        },
        cls: 'leftPanel',
        layoutConfig: {
            animate: true,
            titleCollapse: true
        }
    });

    mainLeftPanel.add({
        title: '<h2>Features</h2>',
        border: false,
        items: [{
            border: false,
            links: [
            {
                text: '<b>Menu item 1</b>',
                cls: 'item1',
                iconCls: 'x-tab-ico-browser',
                href: 'javascript:;',
                id: 'lpm-item1'
            }, {
                text: '<b>Menu item 2</b>',
                cls: 'item2',
                iconCls: 'x-tab-ico-cardlist',
                href: 'javascript:;',
                id: 'lpm-item2'
            }, {
                text: '<b>Menu item 3</b>',
                cls: 'item3',
                iconCls: 'x-tab-ico-addressbook',
                href: 'javascript:;',
                id: 'lpm-item3'
            }],

            tpl: new Ext.XTemplate('<tpl for="links"><a id="{id}" class="lp-actionlink {cls} {iconCls}" style="padding-left: 20px;" href="{href}">{text}</a></tpl>'),

            afterRender: function () {
                Ext.Panel.superclass.afterRender.apply(this, arguments);

                this.tpl.overwrite(this.body, { links: this.links });
            }
        }]
    });

    //TabPanel

    var testData = {
        d: [{company: 'test', price: Math.random(), change: '2', pctChange: '3'},
            {company: 'test', price: Math.random(), change: '2', pctChange: '3'},
            {company: 'test', price: Math.random(), change: '2', pctChange: '3'},
            {company: 'test', price: Math.random(), change: '2', pctChange: '3'},
            {company: 'test', price: Math.random(), change: '2', pctChange: '3'},
            {company: 'test', price: Math.random(), change: '2', pctChange: '3'},
            {company: 'test', price: Math.random(), change: '2', pctChange: '3'},
            {company: 'test', price: Math.random(), change: '2', pctChange: '3'},
            {company: 'test', price: Math.random(), change: '2', pctChange: '3'}]
    };

    var store = new Ext.data.JsonStore({
        autoDestroy: true,
        storeId: 'myStore',
        root: 'd',
        idProperty: 'company',
        fields: ['company', {name:'price', type: 'float'}, {name:'change', type: 'float'}, {name:'pctChange', type: 'float'}],
        data: testData
    });

    var grid = new Ext.grid.GridPanel({
        store: store,
        colModel: new Ext.grid.ColumnModel({
            defaults: {
                width: 120,
                sortable: true
            },
            columns: [
                {id: 'company', header: 'Company', width: 200, sortable: true, dataIndex: 'company'},
                {header: 'Price', renderer: Ext.util.Format.usMoney, dataIndex: 'price'},
                {header: 'Change', dataIndex: 'change'},
                {header: '% Change', dataIndex: 'pctChange'}
            ],
        }),
        viewConfig: {
            forceFit: true,
        },
        sm: new Ext.grid.RowSelectionModel({singleSelect:true}),
        title: 'dummy data tab',
        iconCls: 'x-tab-ico-cardlist'
    });


    var mainTabPanel = new Ext.TabPanel({
        region: 'center',
        enableTabScroll: true,
        defaults: { autoScroll: true },
        activeTab: 0,
        items:[grid]
    });

    //Viewport

    var vp = new Ext.Viewport({
        id: 'mainViewport',
        layout: 'border',
        items: [mainToolbar, mainLeftPanel, mainTabPanel]
    });

});

---

Steps to reproduce the problem:

• Zoom in and out many times
• The height of north and south items is abnormal

Screenshot or Video:

• attached

I am having the same problem. Have you found any fix for it?

Hi janifer,

Try to give height config to your Toolbar(north region) like -

Code:

---


 var mainToolbar = new Ext.Toolbar({
        region: 'north',
      height : 100,
        baseCls: 'x-plain',
        items: [{
            id: 'btnHelp'
            , text: 'Help'
          , iconCls: 'x-menu-ico-help'
      },
      {
          id: 'btnEdit'
            , text: 'Edit'
            , iconCls: 'x-menu-ico-edit'
        }]
});

---

Thanks for your reply, but I already have height defined for my north region:

Code:

---

{
                region:'north',
                layout:'fit',
                height:30,
                items: [toolbar]
            }

---

where toolbar is defined as:

Code:

---

var toolbar=new Ext.Toolbar({
        enableOverflow: true,
        items:[

    new Ext.Button({
            text:'Go',
            handler:sub
        }),
        new Ext.Spacer({
            width:10
        }),
        new Ext.Button({
            text:'Select',
            handler:function(b,e){
                        //do something
            }
        }),
        new Ext.Spacer({
            width:20
        }),new Ext.Button({
            text:'Show Data',
            handler:function(){
                   
                }
        })       
        ]
    });

---

when I changed layout to auto (from fit), the toolbar width remains same but it adds white space between north and other regions.