PDA

View Full Version : [INFOREQ] FormPanel header shifts up



extjser12
21 Feb 2012, 8:19 AM
REQUIRED INFORMATION


Ext version tested:

Ext 4.07

Browser versions tested against:


Google Chrome 17.0.963.56 m

Description:

If you click on a record in the "GridPanel" the header of the "FormPanel" shifts up

Steps to reproduce the problem:

Click on a record of the "GridPanel"

The result that was expected:

Header of "FormPanel" doesn't shift up

The result that occurs instead:

Header of "FormPanel" shifts up

Test Case:



<<Viewport>>
Ext.define('rmt.view.Viewport', {
extend: 'Ext.container.Viewport',
layout: 'border',
items: [{
region: 'north',
html: '<h1 class="x-panel-header">This causes the layout problem</h1>', //I think this line causes the layout problem
autoHeight: true,
border: false,
margins: '0 0 5 0'
}, {
region: 'west',
collapsible: true,
title: 'Navigation',
width: 180,
split: true,
layout: 'fit'
}, {
region: 'center',
xtype: 'panel'
}]
});

<<FormPanel>>
Ext.define('rmt.view.form.UserSearchFormPanel', {
extend: 'Ext.form.Panel',
title: 'Search Form',
items: [{
xtype: 'textfield',
name: 'searchfield1',
fieldLabel: 'Searchfield 1',
enableKeyEvents: true,
listeners: {
keyup: function() {
Ext.Ajax.request({
url: 'users/listUsers',
method: 'POST',
success: function(result, request) {
var jsonData = Ext.decode(result.responseText);
rmt.store.UsersStore.loadData(jsonData.msg)
}
})
}
}
}, {
xtype: 'textfield',
name: 'searchfield2',
fieldLabel: 'Searchfield 2',
enableKeyEvents: true,
listeners: {
keyup: function() {
Ext.Ajax.request({
url: 'users/listUsers',
method: 'POST',
success: function(result, request) {
var jsonData = Ext.decode(result.responseText);
rmt.store.UsersStore.loadData(jsonData.msg)
}
})
}
}
}, {
xtype: 'textfield',
name: 'first_name',
fieldLabel: 'Searchfield 3',
enableKeyEvents: true,
listeners: {
keyup: function() {
Ext.Ajax.request({
url: 'users/listUsers',
method: 'POST',
success: function(result, request) {
var jsonData = Ext.decode(result.responseText);
rmt.store.UsersStore.loadData(jsonData.msg)
}
})
}
}
}, {
xtype: 'button',
text: 'Search'
}]
});

<<GridPanel>>
Ext.define('rmt.view.UsersGridPanel', {
extend: 'Ext.grid.Panel',
store: rmt.store.UsersStore,
title: 'Grid',
height: 800,
forceFit: true,
listeners: {
itemdblclick: function(view, record, item, index, e, eOpts) {
alert('alert');
}
},
columns: [
{ header: 'Last name', dataIndex: 'lastname' },
{ header: 'First name', dataIndex: 'firstname' },
]
});

<<Store>>
Ext.define('rmt.store.UsersStore', {
extend: 'Ext.data.Store',
singleton: true,
model: 'rmt.model.UserModel'
});

<<Model>>
Ext.define('rmt.model.UserModel', {
extend: 'Ext.data.Model',
fields: [
{name: 'lastname', type: 'string'},
{name: 'firstname', type: 'string'}
]
});







HELPFUL INFORMATION


Screenshot or Video:

attached 31989 31990

Debugging already done:

none

Possible fix:

I think the header of the "Viewport" causes the layout problem, because there is some custom HTML-code with a CSS-class set.

Additional CSS used:

only default ext-all.css

Operating System:

WinXP Pro

mitchellsimoens
21 Feb 2012, 12:15 PM
If you give it a set height does the issue go away? Have you tried with 4.1.0 beta2?

extjser12
22 Feb 2012, 7:09 AM
No it does not go away. No I don't have tested my application with Ext JS 4.1.0 beta2. But I want to use my application with Ext JS 4.0.7.

Mentionable a friend of me told me that he has a same problem like mine. He tested his web application with Ext JS 4.1.0 beta2 but the bug still appears. I think there must be a bug in layout calculation of Ext JS 4.0.7!?

rpieter
28 Jan 2014, 7:07 AM
I've experience the same thing in ExtJS 4.2;
when looking at the HTML-source, I see that a class "x-viewport" is added to the html-tag.
This class has got "position: static" set.
If you disable this line in the css (in chrome debugger for example) and re-apply it, then the layout is ok again.

In my app, I had to apply this hacky code to work around this problem;

if (!tab.rendered && window.chrome) {
Ext.defer(function () {
$('.x-viewport, .x-viewport body').css('position', 'relative');
Ext.defer(function () {
$('.x-viewport, .x-viewport body').css('position', 'static');
}, 10);
}, 10);
}

Not pretty, but it does the trick.

If anybody can come up with a cleaner solution I'd like to hear about it, because I've currently encountered 3 triggers that cause this behavior.
Last one is using an HtmlEditor-field in a form that is shown in an Ext.Window (modal dialog).

[Edit] It appears that this behavior is triggered every time the HtmlEditor receives focus....