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

  2. #2
    Sencha User
    Join Date
    Dec 2011
    Posts
    20
    Vote Rating
    2
    jennifer123 is on a distinguished road

      0  

    Default


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

  3. #3
    Sencha - Community Support Team sword-it's Avatar
    Join Date
    May 2012
    Location
    Istanbul
    Posts
    1,333
    Vote Rating
    85
    sword-it is a jewel in the rough sword-it is a jewel in the rough sword-it is a jewel in the rough sword-it is a jewel in the rough

      0  

    Default


    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'
            }]
    });
    sword-it.com, Sencha Developer House in Turkey - Istanbul University Technopark Suite 204.

  4. #4
    Sencha User
    Join Date
    Dec 2011
    Posts
    20
    Vote Rating
    2
    jennifer123 is on a distinguished road

      0  

    Default


    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.

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

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..."