PDA

View Full Version : IE8 DateField width too small



ajohan75
4 Jul 2009, 2:18 AM
Good day guys,

I'm having a slight problem with IE8 and the DateField in a toolbar. The width of the datefield is too small in IE8 and the dates are not shown (see attached image). no problems with FF3.5 and Chrome.

I've searched the forums for the past week and have not been able to find a solution. would really appreciate the help.

Ext version 2.2.1. Here's the panel code.


layout: 'border'
, defaults: {border: false}
, items: [{
region: 'center'
, layout: 'border'
, minHeight: 200
, items: [{
region: 'center'
, layout: 'fit'
, border: false
, autoScroll: true
, items: [{
xtype: 'grid'
, border: true
, autoScroll: true
, store: summaryStore
, tbar: new Ext.Toolbar({
items: [{
xtype: 'tbtext'
, text: 'Start Date: '
}, ' ', {
xtype: 'datefield'
}, ' ', {
xtype: 'tbtext'
, text: 'End Date: '
}, ' ', {
xtype: 'datefield'
}, '-', {
text: 'View Summary'
}]
})
}]
]}
}]

advanced thanks!

AJ

Animal
4 Jul 2009, 2:47 AM
Major overnesting there.

ajohan75
4 Jul 2009, 3:01 AM
Major overnesting there.

animal,

noted. am not sure of another way to get the layout that the customers wanted. the posted code is a snippet.

anyway, could it be the reason for the datefield to be chopped off?

aj

Animal
4 Jul 2009, 3:09 AM
I'd suggest trying your code wit hthe 3.0 RC3 release.

But if you do not understand why that is outrageous overnesting, then you are storing up probems due to not fully understanding what you are writing.

ajohan75
4 Jul 2009, 3:26 AM
3.0RC3 Fixed the problem. Thanks

AJ

Animal
4 Jul 2009, 4:04 AM
OK, show us the new code with the redundant nesting reoved.

ajohan75
4 Jul 2009, 7:14 AM
OK, show us the new code with the redundant nesting reoved.

animal,

you make me feel like a kid in school waiting to go see the principal :(

i didnt have to change any code to have the datefield problem fixed but taking into consideration what you said i reworked the code to the following. would appreciate some pointers in the right direction though.


layout: 'border'
, defaults: {border: false}
, items: [{
region: 'center'
, minHeight: 200
, xtype: 'grid'
, border: true
, autoScroll: true
, store: summaryStore
, tbar: new Ext.Toolbar({
items: [{
xtype: 'tbtext'
, text: 'Start Date: '
}, ' ', {
xtype: 'datefield'
}, ' ', {
xtype: 'tbtext'
, text: 'End Date: '
}, ' ', {
xtype: 'datefield'
}, '-', {
text: 'View Summary'
}]
})
, bbar: new Ext.PagingToolbar({
store: summaryStore
})
, columns: createCols()
}, {
region: 'south'
, height: 250
, collapsible: true
, split: true
, minHeight: 200
, title: 'Details'
, layout: 'fit'
}]

Animal
4 Jul 2009, 2:23 PM
Good work.

10/10;)