Formatar data na Ext.grid.GridPanel usando ASP NET MVC

Fala Galera..

Hoje antes de ir para a academia, fui ver os acessos do blog e tinha um comentário do Thiago relatando que ele não estava conseguindo formatar uma data dentro de uma Grid do Ext

Fazendo uma pesquisa no Google vi alguns códigos fazendo a seguinte configuração

[sourcecode language=”js”]
var dateRenderer = Ext.util.Format.dateRenderer(‘d/m/Y’);

var grid = new Ext.grid.GridPanel({
width: 900,
height: 395,
title: ‘List People’,
store: store,
stripeRows: true,
// grid columns
columns: [{
id: ‘id’,
header: "Id",
dataIndex: ‘Id’,
width: 50,
sortable: true
}, {
id: ‘company’,
header: "Company",
dataIndex: ‘Company’,
width: 160,
sortable: true
}, {
id: "email",
header: "Email",
dataIndex: ‘Email’,
width: 160,
sortable: true
}, {
id: ‘first’,
header: "First",
dataIndex: ‘First’,
width: 160,
sortable: true
}, {
id: ‘last’,
header: "Last",
dataIndex: ‘Last’,
width: 165,
sortable: true
}, {
id: ‘date’,
header: "Date",
dataIndex: ‘Date’,
renderer: dateRenderer,
width: 150,
sortable: true
}],

// paging bar on the bottom
bbar: new Ext.PagingToolbar({
pageSize: 15,
store: store,
displayInfo: true,
displayMsg: ‘Displaying topics {0} – {1} of {2}’,
emptyMsg: "No topics to display"
})
});
[/sourcecode]

Pensei comigo, fácil!! vamos para academia!! 😀

Porém quando fui executar o projeto, recebi o seguinte resultado:

Veja que a data fica Nan/Nan/Nan 🙁

Voltei as pesquisas no Google… e descobri que a forma que o .NET trata as datas e retorna para o Json é diferente, veja como essa data está no retorno do Json

Achei vários posts explicando o porque dessa formatação na data, e depois de algumas horas de pesquisas e testes também achei esse post no fórum do ExtJs que resolvia esse problema

Resolução

Temos que formatar o objeto JsonStore, veja abaixo

[sourcecode language=”js”]
var store = new Ext.data.JsonStore({
url: ‘@Url.Content("~/Pessoa/GetAll")’,
root: ‘pessoas’,
totalProperty: ‘total’,
fields: [
{ name: ‘Id’ },
{ name: ‘Company’ },
{ name: ‘Email’ },
{ name: ‘First’ },
{ name: ‘Last’ },
{ name: ‘Date’, type: ‘date’, dateFormat: ‘M$’}]
});
[/sourcecode]

Veja que na formatação colocamos um tipo “especial” para o .NET que o pessoal da Ext chamou de M$ (rsrsrsrs)

Veja o resultado:

Resultado

Não fui para academia, mas resolvi o problema! rsrsrs

Fica aí a dica!

Aquele Abraço!

Sobre Leandro Prado

Leandro Silveira Prado é Premier Field Engineer na Microsoft especializado em Application Lifecycle Management.