PDA

View Full Version : [3.0] Checkbox on toolbar rendering issue



mschwartz
16 Apr 2009, 7:16 AM
Not exactly a bug. Or maybe it is. Feel free to move it to the bugs forum.

In 2.x, a checkbox as a toolbar item was rendered vertically centered nicely. In 3.x, the checkbox is top aligned and the top of the boxLabel is aligned with the bottom of the checkbox.

Example:


bbar: new Ext.Toolbar({
items: [
'some text',
'-',
{
text: 'a button'
},
{
xtype: 'checkbox',
boxLabel: 'some text'
}
]
})

16 Apr 2009, 7:21 AM
i would suggets posting in bugs.

Condor
16 Apr 2009, 7:24 AM
Could you do me a favor? Could you test if my themed checkbox/radio user extension (http://extjs.com/forum/showthread.php?t=64689) also has this problem?

mschwartz
16 Apr 2009, 7:30 AM
Could you do me a favor? Could you test if my themed checkbox/radio user extension (http://extjs.com/forum/showthread.php?t=64689) also has this problem?

I see no checkbox at all with your css and overrides.

Your post wasn't clear whether to include both sets of overrides or to pick one...

Condor
16 Apr 2009, 7:36 AM
You don't see a checkbox because you didn't adjust the image paths in the css.

ps. You need the first javascript part and the css. The second javascript part is only required when you want validation support.

mjlecomte
16 Apr 2009, 7:40 AM
I can already tell this change in behavior is going to have to be stickied or be advertised more in some changelog if it ever comes to fruition.

Did this one come up in the Conference as to why this change was made, other than (from memory) "..blah..using the OS native blah..." ?

mschwartz
16 Apr 2009, 7:40 AM
Fixed the css paths

Seems like you might want to put some margin on the right so the boxLabel isn't butt up against the checkbox.

mschwartz
28 Apr 2009, 6:07 AM
Need to bump this.

With your themed checkbox/radio extension, checkboxes on forms are really messed up. See attached image #1. The checkbox in this form is on top of the field label.

I removed your extension and css, and the toolbar checkbox is messed up (see image in my previous post), but the checkbox works in the form. However, the vertical alignment of the checkbox with the box label looks weird to me (label too low/checkbox too high). See image #2.

I think the CSS for this needs to be worked on/fixed in 3.x

(Images are from FF 3.0.9/XP)

Condor
29 Apr 2009, 12:35 AM
The 'classic' checkbox will need some CSS adjustment.

Your problem with my themed checkboxes is not really related to this thread, but I would like to fix it. Can you post the layout you used to get the checkbox misalignment in the extension thread (http://extjs.com/forum/showthread.php?t=64689)?

Animal
29 Apr 2009, 1:44 AM
IIRC, the ToolbarLayout uses a table.

Try poking the vertical-align style of the cells in that table.

mschwartz
29 Apr 2009, 4:48 AM
The 'classic' checkbox will need some CSS adjustment.

Your problem with my themed checkboxes is not really related to this thread, but I would like to fix it. Can you post the layout you used to get the checkbox misalignment in the extension thread (http://extjs.com/forum/showthread.php?t=64689)?

It's a form panel in a window, plain vanilla stuff.


var form = new Ext.form.FormPanel({
items: [
{
xtype: 'checkbox',
boxLabel: 'yes',
fieldLabel: 'zzz'
}
...
]
});
var win = new Ext.Window({
layout: 'fit',
items: form,
...
});