PDA

View Full Version : [3.1] DateField mysterious cls bug (IE)



mono blaine
17 Dec 2009, 4:26 AM
I'm extending the DateField and I'm using an extended DateMenu for this field. When I configure a css class (whether there exists such a class or not) for the extended DateMenu, white spaces appear around the picker. (in all IE versions)

http://i36.photobucket.com/albums/e25/oehh/iedatemenu.png

I can remove the spaces except for the bottom one by adding the following class:


.dateintervalfield-iefix .x-menu-list {
padding: 0px;
}

http://i36.photobucket.com/albums/e25/oehh/iedatemenuwcls.png

But the bottom one never disappears no matter what I do.

Why on earth do those spaces around the picker appear by just adding a css class (again, that might not even be a real class)?

Below is a part of the code:


Ext.ux.form.DateIntervalField = function (config) {
this.menu = new Ext.ux.menu.DateIntervalMenu();
Ext.ux.form.DateIntervalField.superclass.constructor.call(this, config);
}

Ext.extend(Ext.ux.form.DateIntervalField, Ext.form.DateField, {
showToday: false
});

Ext.ux.menu.DateIntervalMenu = Ext.extend(Ext.menu.DateMenu, {
hideOnClick: false,
cls: 'dateintervalfield-iefix',
initComponent: function () {
Ext.ux.menu.DateIntervalMenu.superclass.initComponent.call(this);
...
}
}));

...

Animal
17 Dec 2009, 4:47 AM
Strange. Just a thought: did you upgrade your ext-all.css?

mono blaine
17 Dec 2009, 4:52 AM
Strange. Just a thought: did you upgrade your ext-all.css?

Yes.

evant
17 Dec 2009, 4:54 AM
It's not possible to say without seeing a reproducible example.

evant
17 Dec 2009, 4:57 AM
The behaviour isn't exhibited in the samples with IE6/7/8, moving this to help.

mono blaine
17 Dec 2009, 5:04 AM
css:


.dateintervalfield-iefix .x-menu-list {
padding: 0px;
}
.check-box-label label.x-form-cb-label {
font-size: 11px !important;
top: 4px !important;
}
.ext-ie .check-box-label label.x-form-cb-label {
font-size: 11px !important;
top: 1px !important;
}

code:


Ext.ux.form.DateIntervalField = function (config) {
this.menu = new Ext.ux.menu.DateIntervalMenu();
Ext.ux.form.DateIntervalField.superclass.constructor.call(this, config);
}

Ext.extend(Ext.ux.form.DateIntervalField, Ext.form.DateField, {
showToday: false
});

Ext.ux.menu.DateIntervalMenu = Ext.extend(Ext.menu.DateMenu, {
hideOnClick: false,
cls: 'dateintervalfield-iefix',
initComponent: function () {
Ext.ux.menu.DateIntervalMenu.superclass.initComponent.call(this);
this.picker.on('render', function (c) {
var tr1 = c.el.child('tr');
var tr0 = tr1.insertSibling({
tag: 'tr',
children: [{
tag: 'td',
cls: 'x-date-bottom',
style: 'font-size: 12px;',
html: 'Date:'
},
{
tag: 'td',
colspan: 2,
cls: 'x-date-bottom'
}]
},
'before', true);
var tr3 = tr1.next().insertSibling({
tag: 'tr',
children: [{
tag: 'td',
colspan: 3,
cls: 'x-date-bottom',
children: [{
tag: 'table',
width: '100%',
cellspacing: 0,
children: [{
tag: 'tr',
children: [{
tag: 'td',
align: 'left'
},
{
tag: 'td',
align: 'left'
},
{
tag: 'td',
align: 'right'
}]
}]
}]
}]
},
'after', true);
var hen = Ext.fly(tr3).child('tr').dom;
var nameId = 'dateInterval-' + Ext.id();
Ext.apply(this, {
dateToEdit: new Ext.form.RadioGroup({
renderTo: Ext.fly(tr0).dom.childNodes[1],
hideLabel: true,
columns: 2,
items: [{
boxLabel: 'From',
name: nameId,
inputValue: 0,
checked: true
},
{
boxLabel: 'To',
name: nameId,
inputValue: 1
}]
}),
timeCheck: new Ext.form.Checkbox({
renderTo: hen.childNodes[0],
hideLabel: true,
ctCls: 'check-box-label',
scope: this,
handler: this.timeCheckHandler,
boxLabel: 'Time:'
}),
timeField: new Ext.form.TimeField({
disabled: true,
renderTo: hen.childNodes[1],
fieldLabel: 'Time',
width: 60,
format: 'H:i',
listClass: 'timefield-list-zindex',
listeners: {
scope: this,
collapse: function () {
this.un('beforehide', this.beforeHide);
},
expand: function () {
this.on('beforehide', this.beforeHide);
}
}
}),
saveBtn: new Ext.Button({
renderTo: hen.childNodes[2],
text: 'Save',
scope: this,
handler: this.saveDates
})
});
},
this);
},
timeCheckHandler: function (c, checked) {
this.timeField.setDisabled(!checked);
},
saveDates: function () {

},
beforeHide: function () {
return false;
}
});