PDA

View Full Version : [SOLVED] Component Width Problem



sportda
1 Jan 2011, 10:51 AM
[Update, I don't think this is a dup of 1132, it's not browser specific, see last post]

Can someone tell me why when the window containing the formPanel is resized about an inch of space is reserved to the right?

24043

As the window is resized the width of the fieldsets is automatically adjusted by something and that one inch or so is always maintained. It seems like maybe there is an anchor in play but I don't know if/where/or how.

24045

The formpanel is generated by a plugin...


var win = new Ext.Window
({
id : 'sc-win',
title : 'Test',
height: 225,
width : 400,
layout: 'fit',
resizable: true,
autoScroll: true,
modal : false,
plain :true,
items:
[
{
xtype : 'container',
plugins: new Ext.ux.Plugin.LiteRemoteComponent({
url : 'plugin_fees.php?show_no=123'// + selected_show.unique_no
})
}
]
});
Ext.onReady(function() {
win.show();
});
Here is the code gerated by the plugin...


(function(){
var fee_panel = new Ext.form.FormPanel({
bodyStyle: 'padding: 5px 5px 0; background-color: #DFE8F6;',
labelAlign: 'right',
hideBorders: false,
autoScroll: true,
bodyBorder: false,
frame: false,
items:
[
{
xtype: 'Ole.fees.fixedFee',
label: 'Required 1',
value: '$150'
},
{
xtype: 'Ole.fees.fixedFee',
label: 'Required 2',
value: '$35'
},
{
xtype: 'Ole.fees.optionalFee',
label: 'Optional 1: $6',
value: '$6'
},
{
xtype: 'Ole.fees.optionalFee',
label: 'Optional 2: $7',
value: '$7'
},
{
xtype: 'Ole.fees.optionalFee',
label: 'Optional 3: $135',
value: '$135'
}
]
});
return fee_panel;
})()
If the height of the window is adjusted a horizontal scroll bar appears I'm guessing because the width of the vertical scroll bar that has also appeared is not being accounted for. This is also problematic.

24042

Also, can anyone tell me why when the form panel is plugged into an accordian panel rather than the window that the widths on the spinner controls would go haywire and the margins/padding would be different?

24044

Here is the spinner related code...


Ole.fees.optionalFee = Ext.extend(Ext.form.FieldSet,
{
value: '?',
label: '?',
initComponent: function()
{
var config =
{
layout: 'hbox',
collapsible: false,
forceLayout: true,
style: 'padding:2px;margin:5px',
items: [{
xtype:'spinnerfield',
value: '0',
fieldLabel: '',
labelSeparator:'',
minValue: 0,
maxValue: 100,
decimalPrecision: 0,
incrementValue: 1,
width: 55
},
{
xtype:'label',
html: '  ' + this.label,
hideLabel: true,
margins: {top:5, right:0, bottom:0, left:0},
style: 'white-space: nowrap',
flex: 1
}]
};
Ext.apply(this, Ext.apply(this.initialConfig, config));
Ole.fees.fixedFee.superclass.initComponent.apply(this, arguments);
}
});
Ext.reg('Ole.fees.optionalFee',Ole.fees.optionalFee);
If anyone can help I'd very much appreciate it.

sportda
2 Jan 2011, 6:18 AM
Setting autoWidth: true on the fieldsets changes things briefly for the better...

24050

24051

But when the window is sized back down the fieldsets stay at the wider width and a horizonatal scroll bar appears.
24052

This is with firefox. With with IE8 the fieldsets stay wide but no scroll bar appears.

sportda
2 Jan 2011, 9:36 AM
I'm playing with anchor now. The top 2 fieldsets have anchor: '100%' set which does nothing and seems to tell me that there is a hidden inner component that is one inch shorter than the window somehow.


24054


The bottom 3 fieldsets have anchor: '-10' which seems to support the idea that we're anchored to something apx. an inch from the right edge. I can set the anchors to > 100% and the fieldsets will widen toward the width of the form panel which also seems to indicate that there is an inner box. But there is nothing in the html that corresponds to the width of the fieldsets. The formpanel is width: 363px and the fieldsets are width: 242px and there's no container in between.


24055


I've simplified the code, eliminated the plugin, to make it a show case for this problem...




<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Show Case</title>
<link rel="stylesheet" type="text/css" href="../ext-3.2.1/resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="../shared/icons/silk.css" />
<link rel="stylesheet" type="text/css" href="../shared/icons/Spinner.css" />
<script type="text/javascript" src="../ext-3.2.1/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../ext-3.2.1/ext-all-debug.js"></script>
<script type="text/javascript" src="../ext-3.2.1/examples/ux/SpinnerField.js"></script>
<script type="text/javascript" src="../ext-3.2.1/examples/ux/Spinner.js"></script>
</head>
<body>
<script type="text/javascript">
Ext.ns('Ole.fees');
function formatFloat(v)
{
return (parseFloat(v) / 100.0).toString();
}
Ole.fees.fixedFee = Ext.extend(Ext.form.FieldSet,
{
value: '?',
label: '?',
initComponent: function()
{
var config =
{
layout: 'hbox',
anchor: '100%',
style: 'padding:2px;margin:5px',
items: [{
xtype:'textfield',
readOnly: true,
value: this.value,
fieldLabel: '',
labelSeparator:'',
boxMaxWidth: '45',
width: 55
},
{
xtype:'label',
html: this.label,
hideLabel: true,
margins: {top:5, right:0, bottom:0, left:0},
flex: 1
}]
};
Ext.apply(this, Ext.apply(this.initialConfig, config));
Ole.fees.fixedFee.superclass.initComponent.apply(this, arguments);
}
});
Ext.reg('Ole.fees.fixedFee',Ole.fees.fixedFee);
Ole.fees.optionalFee = Ext.extend(Ext.form.FieldSet,
{
value: '?',
label: '?',
initComponent: function()
{
var config =
{
layout: 'hbox',
collapsible: false,
forceLayout: true,
anchor: '-10',
style: 'padding:2px;margin:5px',
items: [{
xtype:'spinnerfield',
value: '0',
fieldLabel: '',
labelSeparator:'',
minValue: 0,
maxValue: 100,
decimalPrecision: 0,
incrementValue: 1,
width: 55
},
{
xtype:'label',
html: '&nbsp;&nbsp;' + this.label,
hideLabel: true,
margins: {top:5, right:0, bottom:0, left:0},
style: 'white-space: nowrap',
flex: 1
}]
};
Ext.apply(this, Ext.apply(this.initialConfig, config));
Ole.fees.fixedFee.superclass.initComponent.apply(this, arguments);
}
});
Ext.reg('Ole.fees.optionalFee',Ole.fees.optionalFee);


var fee_panel = new Ext.form.FormPanel({
bodyStyle: 'background-color: #DFE8F6;',
labelAlign: 'right',
hideBorders: false,
autoScroll: true,
bodyBorder: false,
frame: false,
items:
[
{
xtype: 'Ole.fees.fixedFee',
label: 'Required 1',
value: '$150'
},
{
xtype: 'Ole.fees.fixedFee',
label: 'Required 2',
value: '$35'
},
{
xtype: 'Ole.fees.optionalFee',
label: 'Optional 1: $6',
value: '$6'
},
{
xtype: 'Ole.fees.optionalFee',
label: 'Optional 2: $7',
value: '$7'
},
{
xtype: 'Ole.fees.optionalFee',
label: 'Optional 3: $135',
value: '$135'
}
]
});


var win = new Ext.Window
({
id : 'sc-win',
title : 'Test',
height: 225,
width : 400,
layout: 'fit',
resizable: true,
autoScroll: true,
modal : false,
plain :true,
items:
[fee_panel]
});
Ext.onReady(function() {
win.show();
});
</script>
</body>
</html>


Can somebody please help me understand this? :-/

sportda
3 Jan 2011, 10:11 AM
So I discoved that if I set anchor: '100' (not 100%, 100!) on my fieldsets I get pretty much what I was after...

24065

The question is why?? At some point even though you find what might be an answer to a problem I think you really need to understand it before you can consider it solved.



<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Show Case</title>
<link rel="stylesheet" type="text/css" href="../ext-3.2.1/resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="../shared/icons/silk.css" />
<link rel="stylesheet" type="text/css" href="../shared/icons/Spinner.css" />
<script type="text/javascript" src="../ext-3.2.1/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../ext-3.2.1/ext-all-debug.js"></script>
<script type="text/javascript" src="../ext-3.2.1/examples/ux/SpinnerField.js"></script>
<script type="text/javascript" src="../ext-3.2.1/examples/ux/Spinner.js"></script>
</head>
<body>
<script type="text/javascript">
Ext.ns('Ole.fees');
function formatFloat(v)
{
return (parseFloat(v) / 100.0).toString();
}
Ole.fees.fixedFee = Ext.extend(Ext.form.FieldSet,
{
value: '?',
label: '?',
initComponent: function()
{
var config =
{
layout: 'hbox',
anchor: '100',
style: 'padding:2px;margin:5px',
items: [{
xtype:'textfield',
readOnly: true,
value: this.value,
fieldLabel: '',
labelSeparator:'',
boxMaxWidth: '45',
width: 55
},
{
xtype:'label',
html: this.label,
hideLabel: true,
margins: {top:5, right:0, bottom:0, left:0},
flex: 1
}]
};
Ext.apply(this, Ext.apply(this.initialConfig, config));
Ole.fees.fixedFee.superclass.initComponent.apply(this, arguments);
},
getAmt: function get_amt()
{
var amt = this.value.slice(1);
amt = Number(amt) * 100;
return amt;
}
});
Ext.reg('Ole.fees.fixedFee',Ole.fees.fixedFee);
Ole.fees.optionalFee = Ext.extend(Ext.form.FieldSet,
{
value: '?',
label: '?',
initComponent: function()
{
var config =
{
layout: 'hbox',
collapsible: false,
forceLayout: true,
anchor: '100',
style: 'padding:2px;margin:5px',
items: [{
xtype:'spinnerfield',
value: '0',
fieldLabel: '',
labelSeparator:'',
minValue: 0,
maxValue: 100,
decimalPrecision: 0,
incrementValue: 1,
width: 55,
listeners:
{
spin: function(s)
{
this.value = this.getValue();
update_total();
}
}
},
{
xtype:'label',
html: '&nbsp;&nbsp;' + this.label,
hideLabel: true,
margins: {top:5, right:0, bottom:0, left:0},
style: 'white-space: nowrap',
flex: 1
}]
};
Ext.apply(this, Ext.apply(this.initialConfig, config));
Ole.fees.fixedFee.superclass.initComponent.apply(this, arguments);
},
getAmt: function get_amt()
{
var amt = this.value.slice(1);
amt = Number(amt) * 100;
var count = Number(this.get(0).value);
var n = amt * count;
return n;
}
});
Ext.reg('Ole.fees.optionalFee',Ole.fees.optionalFee);

var fee_panel = new Ext.form.FormPanel({
id: 'fees_panel',
bodyStyle: 'background-color: #DFE8F6;',
labelAlign: 'right',
hideBorders: false,
autoScroll: true,
bodyBorder: false,
frame: false,
items:
[
{
xtype: 'Ole.fees.fixedFee',
label: 'Required 1',
value: '$150'
},
{
xtype: 'Ole.fees.fixedFee',
label: 'Required 2',
value: '$35'
},
{
xtype: 'Ole.fees.optionalFee',
label: 'Optional 1: $6',
value: '$6'
},
{
xtype: 'Ole.fees.optionalFee',
label: 'Optional 2: $7',
value: '$7'
},
{
xtype: 'Ole.fees.optionalFee',
label: 'Optional 3: $135',
value: '$135'
}
]
});
function update_total()
{
var total = 0;
Ext.getCmp('fees_panel').items.each(function(item){
total += item.getAmt();
});
Ext.getCmp('entry_total').setText('Total: $' + formatFloat(total));
}
function onSubmit()
{
update_total();
}

var panel = new Ext.Panel
({
id: 'overnest',
layout: 'fit',
items:
[fee_panel],
bbar:
[
{
xtype: 'tbtext',
id: 'entry_total',
text: 'Total: $0.00'
},'->','-',
{
xtype: 'button',
text: 'Submit Entry',
iconCls: 'silk-add',
scope: this,
handler: onSubmit
}
]
});
var win = new Ext.Window
({
id : 'sc-win',
title : 'Test',
height: 250,
width : 400,
layout: 'fit',
resizable: true,
autoScroll: true,
modal : false,
plain :true,
items:
[panel]
});
Ext.onReady(function() {
win.show();
});
</script>
</body>
</html>

sportda
7 Jan 2011, 9:56 AM
With the anchor set at '100' the fieldsets size properly (for reasons that are not understood) but if the height is sized to require a scroll bar the fieldset widths are not adjusted to allow for the vertical scroll bar so an unwanted horizontal scroll bar appears. Am I doing something wrong or are their bugs here?

24162

What does [DUPE-1132] mean in the title of this thread? I didn't put it there.

sportda
7 Jan 2011, 10:19 PM
I found out what [DUPE 1132] means...

http://www.sencha.com/forum/showthread.php?104282-OPEN-1132-3.3.0-Layout-form-and-anchor-problem-in-IE8&highlight=BUG+1132

Although I do think this is a bug, and there is a simple test case contained in this thread, this is not browser specific and probably not related to bug 1132.

Condor
8 Jan 2011, 1:40 AM
1. The container in which you use LiteRemoteComponent needs a layout ('fit'?).
2. Do NOT use autoWidth:true. The fieldsets are in a form layout, so you should configure them with anchor:'0' if you want them to stretch.

miketyson986
8 Jan 2011, 2:41 AM
Thanks for sharing really useful info.

sportda
8 Jan 2011, 7:53 AM
First of all thanks for helping. I had eliminated the plug in to simplify the example but Condor is right about the layout. autoWidth: true is something I had tried but Condor is correct it didn't work.

Setting anchor: '0' exhibits the original problem, the one inch right "margin" appears, the same effect as if I set anchor: '100%'. Below the top 2 fieldsets are set at anchor: '100' and the bottom 3 are set at anchor: '0'...

24173

Here is the current simplified test case that shows this problem...


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Show Case</title>
<link rel="stylesheet" type="text/css" href="../ext-3.2.1/resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="../shared/icons/silk.css" />
<link rel="stylesheet" type="text/css" href="../shared/icons/Spinner.css" />

<script type="text/javascript" src="../ext-3.2.1/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../ext-3.2.1/ext-all-debug.js"></script>

<script type="text/javascript" src="../ext-3.2.1/examples/ux/SpinnerField.js"></script>
<script type="text/javascript" src="../ext-3.2.1/examples/ux/Spinner.js"></script>
</head>
<body>
<script type="text/javascript">

Ext.ns('Ole.fees');

function formatFloat(v)
{
return (parseFloat(v) / 100.0).toString();
}

Ole.fees.fixedFee = Ext.extend(Ext.form.FieldSet,
{
value: '?',
label: '?',
initComponent: function()
{
var config =
{
layout: 'hbox',
anchor: '100',
style: 'padding:2px;margin:5px',
items: [{
xtype:'textfield',
readOnly: true,
value: this.value,
fieldLabel: '',
labelSeparator:'',
boxMaxWidth: '45',
width: 55
},
{
xtype:'label',
html: this.label,
hideLabel: true,
margins: {top:5, right:0, bottom:0, left:0},
flex: 1
}]
};
Ext.apply(this, Ext.apply(this.initialConfig, config));
Ole.fees.fixedFee.superclass.initComponent.apply(this, arguments);
},
getAmt: function get_amt()
{
var amt = this.value.slice(1);
amt = Number(amt) * 100;
return amt;
}
});
Ext.reg('Ole.fees.fixedFee',Ole.fees.fixedFee);

Ole.fees.optionalFee = Ext.extend(Ext.form.FieldSet,
{
value: '?',
label: '?',
initComponent: function()
{
var config =
{
layout: 'hbox',
collapsible: false,
forceLayout: true,
anchor: '0',
style: 'padding:2px;margin:5px',
items: [{
xtype:'spinnerfield',
value: '0',
fieldLabel: '',
labelSeparator:'',
minValue: 0,
maxValue: 100,
decimalPrecision: 0,
incrementValue: 1,
width: 55,
listeners:
{
spin: function(s)
{
this.value = this.getValue();
update_total();
}
}
},
{
xtype:'label',
html: '&nbsp;&nbsp;' + this.label,
hideLabel: true,
margins: {top:5, right:0, bottom:0, left:0},
style: 'white-space: nowrap',
flex: 1
}]
};
Ext.apply(this, Ext.apply(this.initialConfig, config));
Ole.fees.fixedFee.superclass.initComponent.apply(this, arguments);
},
getAmt: function get_amt()
{
var amt = this.value.slice(1);
amt = Number(amt) * 100;
var count = Number(this.get(0).value);
var n = amt * count;
return n;
}
});
Ext.reg('Ole.fees.optionalFee',Ole.fees.optionalFee);


var fee_panel = new Ext.form.FormPanel({
id: 'fees_panel',
bodyStyle: 'background-color: #DFE8F6;',
labelAlign: 'right',
hideBorders: false,
autoScroll: true,
bodyBorder: false,
frame: false,
items:
[
{
xtype: 'Ole.fees.fixedFee',
label: 'Required 1',
value: '$150'
},
{
xtype: 'Ole.fees.fixedFee',
label: 'Required 2',
value: '$35'
},
{
xtype: 'Ole.fees.optionalFee',
label: 'Optional 1: $6',
value: '$6'
},
{
xtype: 'Ole.fees.optionalFee',
label: 'Optional 2: $7',
value: '$7'
},
{
xtype: 'Ole.fees.optionalFee',
label: 'Optional 3: $135',
value: '$135'
}
]
});

function onSubmit()
{
}

var panel = new Ext.Panel
({
id: 'overnest',
layout: 'fit',
items:
[fee_panel],
bbar:
[
{
xtype: 'tbtext',
id: 'entry_total',
text: 'Total: $0.00'
},'->','-',
{
xtype: 'button',
text: 'Submit Entry',
iconCls: 'silk-add',
scope: this,
handler: onSubmit
}
]
});

var win = new Ext.Window
({
id : 'sc-win',
title : 'Test',
height: 250,
width : 400,
layout: 'fit',
resizable: true,
autoScroll: true,
modal : false,
plain :true,
items:
[panel]
});

Ext.onReady(function() {
win.show();
});
</script>
</body>
</html>

Condor
8 Jan 2011, 8:35 AM
That 105px empty space is the label (you set labelAlign:'right')!

(you shouldn't name your property 'label'; it's already used by FormLayout)

sportda
8 Jan 2011, 10:44 AM
Thanks Condor! The main problem here was the use of 'label' as a property name, once that was corrected the anchor worked properly.

I would like to use anchor: '-' + Ext.getScrollBarWidth() which I see used in many posts but it behaves like anchor: '0' even though I have verified that Ext.getScrollBarWidth() == 19 and anchor: '-19' works as expected.