PDA

View Full Version : Unnecessary horizontal scroll bar on form panel



Vartlok
16 Oct 2013, 1:31 AM
Hello,

I have problem with form panel which is contained into window.
Code:


Ext.create('Ext.window.Window', {
extend: 'Ext.window.Window',
title: 'Test window',
width: 360,
height: 150,
modal: true,
resizable: false,
layout: 'fit',
items: [{
xtype: 'form',
border: false,
autoScroll: true,
items : [{
xtype: 'combobox',
fieldLabel: 'TestCombo1',
anchor: '100%',
},
{
xtype: 'combobox',
fieldLabel: 'TestCombo2',
anchor: '100%'
},
{
xtype: 'form',
layout: 'fit',
items: [{
xtype: 'form',
title: 'Test Panel1',
items: {
xtype: 'button',
text: 'addBtn',
handler: function(btn) {
btn.ownerCt.insert(btn.ownerCt.items.length + 1,Ext.create('TestPanel')); }
}
}]
}]
}]
}).show();

Ext.define('TestPanel',{
extend: 'Ext.form.Panel',
title: 'Test Panel',
closable: true,
labelWidth: 170,
layout: 'absolute',
autoHeight: true,
items: [{
x: 5,
y: 5,
xtype: 'textarea',
fieldLabel: 'TestCombo',
},
{
x: 5,
y: 45,
xtype:'button',
text: 'delete',
handler: function(btn) {
btn.ownerCt.close();
}
},
{
x: 5,
y: 65,
xtype:'button',
text: 'add',
handler: function(btn) {
btn.ownerCt.insert(0,{
x: 5,
y: 75,
xtype: 'textarea',
fieldLabel: 'TestCombo',
}); ;
}
}]
});


Problem that in some cases horisontal scroll bar is appeared on form when it's unnsecessary(and vertical scroll is needed in this case).
Steps:
1) Press twice on button 'addBtn'
2) Press button 'add' on any appeared panel
3) Close panel on which wasn't pressed button 'add'

ExtJS version: 4.1.1

Result should be like that:
46351

ettavolt
16 Oct 2013, 2:37 AM
Have you tried creating form with frame:true, floating:true, modal:true and without a window?

Vartlok
16 Oct 2013, 3:04 AM
Have you tried creating form with frame:true, floating:true, modal:true and without a window?

Without window result looks same. But before deleting panel need scroll to end and after that delete any panel, after that horizontal scroll bar is appeared(all it with frame:true, modal:true, if i add floating:true no one scrollbar is appeared and that is not what i want).

ettavolt
16 Oct 2013, 5:40 AM
I'm afraid that only bodyPadding for form will help with your case.

Vartlok
16 Oct 2013, 10:36 PM
I'm afraid that only bodyPadding for form will help with your case.

How i should use this config option to fix this issue?

And maybe some other opinion?

ettavolt
17 Oct 2013, 9:41 PM
bodyPadding:'0 18 0 0' will add 18px right padding for right scrollbar.
I've seen some code in layouts, that handles scrollbars, but I don't remember, if it was 4.1 or 4.2.

P.S. Very interesting... I've posted your code to Fiddle (http://fiddle.sencha.com) (wrapped in Ext.onReady, of course), selected v.4.1.1 and.... there were only vertical scrollbar after adding subpanels. Maybe you have overwritten some layout-specific css?

Vartlok
17 Oct 2013, 10:19 PM
bodyPadding:'0 18 0 0' will add 18px right padding for right scrollbar.
Thank you, I will try it to fix my problem.


P.S. Very interesting... I've posted...
Did you do all steps which i describe in first post? after only adding subpanel everything is okey, but if you delete one of panels so problem is appear.
46393

ettavolt
17 Oct 2013, 10:48 PM
No, unfortunately I've missed the instruction to delete.
FYI, 4.2 is working correctly in this scenario.

P.S. Just another idea - have you tried to specify only overflowY:'auto' instead of autoScroll:true?

Vartlok
18 Oct 2013, 12:12 AM
FYI, 4.2 is working correctly in this scenario.
Yep, but unfortunately i can't switch on version 4.2


Just another idea - have you tried to specify only overflowY:'auto' instead of autoScroll:true?
Yes, and in this case horisontal scrollbar isn't appeared but vertical scrollbar is appered under components which are on panel.


bodyPadding:'0 18 0 0' will add 18px right padding for right scrollbar.
At the moment it's the best solution which I tried to use, but in this case when scrollbar isn't exist i have empty line on right side of panel what isn't good.

I think that it possible to try to fix this issue in even on scrollbar's appearing, but i didn't find this event (only event on 'scroll' which isn't what i need).

Vartlok
21 Oct 2013, 12:39 AM
I found one more case, when calling event on validation for added panel is happened similar behaviour.
Also after check into ExtJS code i found that it is happened because layout call recoverProp and set old value for width which was before scrollbar is appeared.

So, do anyone know how to avoid it?