Threaded View

  1. #1
    Ext User
    Join Date
    Jul 2008
    Posts
    3
    Vote Rating
    0
    Techwan is on a distinguished road

      0  

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

    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
    Attached Images

Similar Threads

  1. [2.2.1] Incorrect behavior of some components with browser zooming
    By grzegorz.borkowski in forum Ext 2.x: Bugs
    Replies: 1
    Last Post: 6 Mar 2009, 6:17 AM
  2. Strange behaviour with modal windows and viewport
    By throttle in forum Ext GWT: Help & Discussion (1.x)
    Replies: 3
    Last Post: 21 Oct 2008, 1:31 AM
  3. Browser scrollbars with viewport
    By carl23934 in forum Ext 2.x: Help & Discussion
    Replies: 3
    Last Post: 25 Sep 2008, 11:26 PM
  4. Strange behaviour : Dynamic Tabs with Grids using Viewport
    By pgraju in forum Ext 2.x: Help & Discussion
    Replies: 3
    Last Post: 10 Sep 2008, 10:35 PM
  5. Browser behaviour different in ie 7 vs firefox 2.0.0.7
    By finethic in forum Ext 2.x: Help & Discussion
    Replies: 0
    Last Post: 11 Oct 2007, 5:32 PM

Thread Participants: 2

Tags for this Thread