PDA

View Full Version : Datefield in IE is not showing properly



bradelsky
18 May 2011, 9:37 PM
I am using extjs 3.3.2 and the datefield is not showing properly. I attached an image of it.
heres my code:

{
xtype : 'datefield',
name : 'dateFrom',
id : 'dateFrom',
width : 100
}

how can i fix this? :s :(
2613426135

friend
19 May 2011, 6:17 AM
It looks like you may have a layout problem. Please include a code sample which shows the config of the parent container.

bradelsky
24 May 2011, 4:19 PM
here is the rest of the code:

{
xtype: 'panel',
title: 'Search',
collapsed: false,
collapsible: true,
style: {padding: '10px'},
titleCollapse : true,
colspan: 3,
items: [
{
xtype: 'fieldset',
title: 'Filter List by',
style: {
padding: '10px',
border: '0px'
},
layout: 'table',
layoutConfig: {
columns:3
},
items: [
{
xtype: 'fieldset',
width: 330,
border: false,
items: [
{
xtype: 'textfield',
fieldLabel: 'Invoice Number',
name: 'invoice_id',
id: 'invoice_id',
listeners : {
specialkey : this.onEnter,
scope : this
}
}
]

},
{
xtype: 'fieldset',
border: false,
width: 330,
items: [
this.customers
]

},
{
xtype: 'fieldset',
border: false,
width: 350,
items: [
{
xtype: 'compositefield',
labelWidth: 120,
fieldLabel: 'Invoice Date From, To',
items: [
{
xtype : 'datefield',
name : 'dateFrom',
id : 'dateFrom',
width : 100,
listeners: {
select: this.onDateFromSelect.createDelegate(this)
}
},
{
xtype : 'datefield',
width : 100,
name : 'dateTo',
id : 'dateTo',
listeners: {
select: this.onDateToSelect.createDelegate(this)
}
}
]
}
]

},
{
xtype: 'fieldset',
border: false,
layout: 'table',
layoutConfig: {
columns:3
},
items: [
{
xtype: 'button',
text: 'Search',
padding: '10 10',
handler: this.onSearch.createDelegate(this)
},
{
xtype:'panel',
border:false,
width:10
},
{
xtype: 'button',
text: 'Clear Fields',
padding: '10 10',
handler: this.onClear.createDelegate(this)
}
]
}
]
}
]
}

as a quick solution I customized the css if the browser is IE.

friend
25 May 2011, 10:02 AM
I think your use of a CompositeField to wrap the two DateFields might be the culprit.

Try using a container Panel with an 'hbox' layout instead.

tameshwar
21 Sep 2012, 2:02 AM
Might you are looking for this.
http://www.sencha.com/forum/showthread.php?63677-FIXED-2.2-IE8-datefield-menu-gets-cut-off (http://www.sencha.com/forum/showthread.php?63677-FIXED-2.2-IE8-datefield-menu-gets-cut-off)

If that doesn't work use the below code.

Add this code in your css file.
.x-date-menu{width: auto!important;}

wm003
4 Jan 2013, 1:57 PM
or try DatePickerPlus (http://extjs.com/forum/showthread.php?p=148587). Those problems had been fixed there 2 years ago