PDA

View Full Version : xtype: 'datecolumn' does not work properly for Internet Explorer



ppatel2
10 Jun 2013, 6:42 AM
The xtype: 'datecolumn' does not work in internet explorer 9.0.2.

ExtJs version is ext-4.2.1.883

44267


Ext.define('alertsGrid', { extend: 'Ext.grid.Panel',
alias: 'widget.alertsGrid',
store: alertsStore,
selType: 'checkboxmodel',
width: '100%',
scroll: 'false',
forceFit: true,
columns: [
{text: "Playbook", dataIndex: 'playbook', sortable: true},
{text: "Company", dataIndex: 'company', sortable: true},
{text: "Brand", dataIndex: 'brand', sortable: true},
{text: "Launch", dataIndex: 'launch', sortable: true},
{text: "Geography", dataIndex: 'geo', sortable: true},
{text: "Date", dataIndex: 'date',xtype: 'datecolumn', format: 'd-M-Y', sortable: true},
{text: "Initiator", dataIndex: 'initiator', sortable: true},
{text: "Type", dataIndex: 'type', sortable: true},
{text: "Item", dataIndex: 'item', sortable: true},
{text: "Change", dataIndex: 'change',sortable: false}
],
initComponent: function(){
Ext.apply(this, {
dockedItems: [{
xtype: 'toolbar',
dock: 'top',
items: [{
iconCls: 'icon-delete',
text: 'Delete Alerts',
disabled: false,
itemId: 'delete',
scope: this,
handler: function(){
deleteAlerts(this.getView().getSelectionModel().getSelection())
}
}]
},{
xtype: 'toolbar',
dock: 'bottom',
items: [{
iconCls: 'icon-delete',
text: 'Delete Alerts',
disabled: false,
itemId: 'delete',
scope: this,
handler: function(){
deleteAlerts(this.getView().getSelectionModel().getSelection())
}
}]
}]
});
this.callParent();
}
});

slemmon
10 Jun 2013, 8:47 AM
I wasn't able to test your test case in IE9 as it didn't have the store / data, but using the below test case it seemed to work fine. Does the below test case work ok for you? If not can do you see any errors thrown? If so, can you modify it such that it fails like you're seeing in your app - or provide an inclusive test case that demonstrates the error you're seeing?



Ext.create('Ext.data.Store', {
storeId:'sampleStore',
fields:[
{ name: 'symbol', type: 'string' },
{ name: 'date', type: 'date' },
{ name: 'change', type: 'number' },
{ name: 'volume', type: 'number' },
{ name: 'topday', type: 'date' }
],
data:[
{ symbol: "msft", date: '2011/04/22', change: 2.43, volume: 61606325, topday: '04/01/2010' },
{ symbol: "goog", date: '2011/04/22', change: 0.81, volume: 3053782, topday: '04/11/2010' },
{ symbol: "apple", date: '2011/04/22', change: 1.35, volume: 24484858, topday: '04/28/2010' },
{ symbol: "sencha", date: '2011/04/22', change: 8.85, volume: 5556351, topday: '04/22/2010' }
]
});


Ext.create('Ext.grid.Panel', {
title: 'Date Column Demo',
store: Ext.data.StoreManager.lookup('sampleStore'),
columns: [
{ text: 'Symbol', dataIndex: 'symbol', flex: 1 },
{ text: 'Date', dataIndex: 'date', xtype: 'datecolumn', format:'Y-m-d' },
{ text: 'Change', dataIndex: 'change', xtype: 'numbercolumn', format:'0.00' },
{ text: 'Volume', dataIndex: 'volume', xtype: 'numbercolumn', format:'0,000' },
{ text: 'Top Day', dataIndex: 'topday', xtype: 'datecolumn', format:'l' }
],
height: 200,
width: 450,
renderTo: Ext.getBody()
});

evant
10 Jun 2013, 2:21 PM
See: http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.data.Field-cfg-dateFormat

ppatel2
11 Jun 2013, 7:22 AM
The issue was related to the date column. The date I was receiving was not parsed properly. And this resulted in the misalignment of all the columns in the grid.