PDA

View Full Version : [OPEN-657] Ext.Panel with margin jumps when using Ext's slideIn effect



dzwillia
24 Feb 2010, 12:15 PM
Hello,

When trying to use the slideIn effect (and presumably other effects) with an Ext.Panel which has a margin, the panel slides in fine, however, the margin isn't included in this calculation and after the panel finishes sliding in, the margin is then applied to the panel and it jerks into position. The code below can be used to replicate the problem. I've also included a button to show how jQuery (gracefully) handles the margin -- if you don't have the jQuery adapter installed, feel free to comment out that code.

I was able to replicate this problem on all major browsers across the Mac/Windows platforms while using ExtJS 3.1.1.


var testPanel = new Ext.Panel({
renderTo: Ext.getBody(),
style: 'margin-top: 50px',
bodyStyle: 'padding: 20px',
layout: 'form',
title: 'Panel Fx Test',
width: 500,
height: 350,

items: [{
xtype: 'combo',
fieldLabel: 'Combo #1'
},{
xtype: 'textfield',
fieldLabel: 'TextField #1'
},{
xtype: 'textarea',
fieldLabel: 'TextArea #1'
},{
xtype: 'combo',
fieldLabel: 'Combo #2'
},{
xtype: 'textfield',
fieldLabel: 'TextField #2'
},{
xtype: 'textarea',
fieldLabel: 'TextArea #2'
}]
});

var buttonPanel = new Ext.Toolbar({
renderTo: Ext.getBody(),
width: 500,

items: [{
text: 'Test jQuery slideToggle',
width: 140,
handler: function() {
// jQuery
$('#' + testPanel.getId()).slideToggle(2000);
}
},{
text: 'Test ExtJS slideIn',
width: 120,
handler: function() {
// ExtJS
Ext.get(testPanel.getId()).slideIn('t', {
easing: 'easeOutStrong',
duration: 3.0,
useDisplay: true
});
}
},{
text: 'Test ExtJS slideOut',
width: 120,
handler: function() {
// ExtJS
Ext.get(testPanel.getId()).slideOut('t', {
easing: 'easeOutStrong',
duration: 2.0,
useDisplay: true
});
}
},{
text: 'Reset',
width: 80,
handler: function() {
Ext.get(testPanel.getId()).show();
}
}]
});

Ebpo
4 Aug 2010, 5:03 AM
Same problem here.

Any patch yet?