[2.2] Fx 3 (3.0.1) Checkbox scrollbars

[hAmpzter]

I found that there is a scrollbar to the right of checkbox in Firefox using boxLabel.. I tried to search and found this tread:

http://extjs.com/forum/showthread.php?t=33555&highlight=checkbox

The error is the same with the scrollbar part is visible but the label is at right level.



var cbxTest = new Ext.form.Checkbox({
boxLabel:"Testing a checkbox with rather long boxLabel"
, labelSeparator:''
, name:"cbxTest"
, checked:false
});
I use the FormPanel in a modal window.

[jay@moduscreate.com]

can you post your ENTIRE window code please? I don't have the same issue :(

[hAmpzter]

This is the complete code of the window:


PAM.Catalogs.ManageAlbumWindow = Ext.extend(Ext.Window, {
// *** CONSTRUCTOR ***
constructor:function(config) {
this.cbxCategoryBasedName = new Ext.ux.form.XCheckbox({
boxLabel:"Name based on category name"
, labelSeparator:''
, name:"cbxCategoryBasedName"
, checked:true
, listeners: {
'check':function(item, checked) {
this.txtName.setDisabled(checked);
}
, scope:this
}
});

this.txtName = new Ext.form.TextField({
fieldLabel:"Name"
, name:"txtName"
, allowBlank:false
, selectOnFocus:true
, disabled:true
});

this.startDate = new Ext.form.DateField({
fieldLabel:'Start date'
, id:'startDate'
, name:'startDate'
, allowBlank:false
, vtype:'daterange'
, endDateField:'endDate'
});

this.cbxMoreThanOneDay = new Ext.ux.form.XCheckbox({
boxLabel:"More than one day event"
, labelSeparator:''
, name:"cbxMoreThanOneDay"
, checked:false
, listeners: {
'check':function(item, checked) {
this.endDate.setDisabled(!checked);
}
, scope:this
}
});

this.endDate = new Ext.form.DateField({
fieldLabel:'End date'
, id:'endDate'
, name:'endDate'
, allowBlank:false
, disabled:true
, vtype:'daterange'
, startDateField:'startDate'
});

this.form = new Ext.form.FormPanel({
url:'json/album.php?do=addAlbum'
, items:[ this.cbxCategoryBasedName, this.txtName, this.startDate, this.cbxMoreThanOneDay, this.endDate ]
, border:false
, labelAlign:"right"
, autoHeight: true
//, defaults:{
// anchor:"95%"
// }
, bodyStyle:"background:transparent;padding:10px;"
});

config = Ext.apply({
id:'pam_catalogs_addwindow'
, url:'json/catalogs.php?do=Add'
, title:"Add catalog"
, plain:true
, width:400
, modal:true
, layout:'fit'
// , autoHeight: true
, closeAction:"hide"
, items: this.form
, buttons: [{
text:'Add'
, scope:this
, handler: this.doSubmit
},{
text:'Cancel'
, handler:this.hide.createDelegate(this, [])
}]
, keys:{
key:[10, 13]
, fn:this.doSubmit
, scope:this
}
}, config); //eo apply

PAM.Catalogs.ManageAlbumWindow.superclass.constructor.call(this, config);

//this.addEvents({add:true});
} //eo constructor
// *** OVERRIDDEN EVENTS ***
, show:function(){
//Empty value if form is shown again
if(this.rendered) {
this.txtName.setValue('');
}
PAM.Catalogs.ManageAlbumWindow.superclass.show.apply(this, arguments);
this.form.getForm().items.itemAt(0).focus(true, 100);
this.form.getForm().isValid();
}
// *** EVENTS ***
, doSubmit:function() {
if(this.form.getForm().isValid()) {
this.hide();
return this.fireEvent('addalbum', this.txtName.getValue());
}
}
});And to create it I use:

var test = new PAM.Catalogs.ManageAlbumWindow();
test.show();Even though my code uses XCheckbox the same "unknown feature" appears when using normal Checkbox... Adding a ss this time!

[andrew.howard@gtri.gatech.edu]

I reported an issue exactly the same as this one. View this post:

Scrollbars on form fields in a window (http://extjs.com/forum/showthread.php?p=291049#post291049)

It appears to only be a problem on Mac with firefox v2.x and v3.x. If you add this line:

<style type="text/css">
.ext-gecko .x-window-body .x-form-item {
overflow:hidden;
}
</style>

to your HTML page after you import ext-all.css, it will fix the problem. I dont know if this breaks anything though.

[Condor]

Could you check if this fixpack for CheckBox (http://extjs.com/forum/showthread.php?t=44603) also solves the problem (I don't have a Mac to test it on)?

[andrew.howard@gtri.gatech.edu]

I added the fixpack:


<style type="text/css">
.x-form-check-group .x-form-check-wrap,.x-form-radio-group .x-form-radio-wrap{height:auto;}
.ext-ie .x-form-check-group .x-form-check-wrap,.ext-ie .x-form-radio-group .x-form-radio-wrap{height:auto;}
.x-form-check-wrap,.x-form-radio-wrap{padding:1px 0 3px;line-height:18px;}
.ext-ie .x-form-check-wrap,.ext-ie .x-form-radio-wrap{padding-top:3px;}
.ext-strict .ext-ie7 .x-form-check-wrap,.ext-strict .ext-ie7 .x-form-radio-wrap{padding-bottom:1px;}
.x-form-check-wrap-inner,.x-form-radio-wrap-inner{display:inline;padding:0;}
.x-form-check,.x-form-radio{height:13px;width:13px;vertical-align:bottom;margin:2px 0;}
.ext-ie .x-form-check,.ext-ie .x-form-radio{margin-top:1px;}
.ext-strict .ext-ie7 .x-form-check,.ext-strict .ext-ie7 .x-form-radio{margin-bottom:4px;}
.ext-opera .x-form-check,.ext-opera .x-form-radio{margin-top:3px;}
.x-form-check-focus .x-form-check,.x-form-check-over .x-form-check,.x-form-check-focus .x-form-radio,.x-form-check-over .x-form-radio{background-position:-13px 0;}
.x-form-check-down .x-form-check,.x-form-check-down .x-form-radio{background-position:-26px 0;}
.x-item-disabled .x-form-check,.x-item-disabled .x-form-radio{background-position:-39px 0;}
.x-form-check-checked,.x-form-radio-checked{background-position:0 -13px;}
.x-form-check-focus .x-form-check-checked,.x-form-check-over .x-form-check-checked,.x-form-check-focus .x-form-radio-checked,.x-form-check-over .x-form-radio-checked{background-position:-13px -13px;}
.x-form-check-down .x-form-check-checked,.x-form-check-down .x-form-radio-checked{background-position:-26px -13px;}
.x-item-disabled .x-form-check-checked,.x-item-disabled .x-form-radio-checked{background-position:-39px -13px;}
.x-form-check-wrap-inner input,.x-form-radio-wrap-inner input{position:absolute;-ms-filter:"alpha(opacity=0)";filter:alpha(opacity=0);-moz-opacity:0;opacity:0;}
</style>

To my code and it fixed the problem for the checkboxes and radiobuttons. But I still have the problem with the fileUploadField. (See attached image). I believe it is because of the button that is rendered with the field that is causing the problem for the uploadField.