2 Attachment(s)
Behaviour of the Viewport when zooming in/out in the browser
Ext version tested:
Adapter used:
css used:
Browser versions tested against:
- Firefox 3.6.10 (firebug 1.5.4 installed)
Operating System:
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: