Hi!
Ive the following structure:
Record => Reader => Store => Grid
I load the grid like a charm, populating with json data, with date format : "d-m-Y H:i
", but when i add a new record, with same dateFormat, it brokes my date column (new record only).
The Code:
Record:
Code:
var veicRecord = Ext.data.Record.create([
{ name : 'Id'},
{ name : 'Status'},
//{ name : 'deviceType', mapping: 'properties.deviceType'},
{ name : 'Grupo'},
{ name : 'Veiculo'},
{ name : 'Placa'},
{ name : 'Modelo'},
{ name : 'Ignicao'},
{ name : 'Gps'},
{ name : 'Gprs'},
{ name : 'Cerca'},
{ name : 'Risco'},
{ name : 'Tec'},
{ name : 'Velocidade'},
{ name : 'Cidade'},
{ name : 'Referencia'},
{ name : 'Evento', type: 'date', dateFormat: 'd-m-Y H:i:s' },
{ name : 'Latitude'},
{ name : 'Longitude'},
{ name : 'Dir'},
{ name : 'VCerca'},
{ name : 'Cor'}
]);
Reader:
Code:
var veicReader = new Ext.data.JsonReader({
root : "veiculos",
totalProperty : "total",
id : "id"
}, veicRecord);
Store:
Code:
var veicStore = new Ext.data.GroupingStore({
nocache : true,
sortInfo:{field: 'Evento', direction: "DESC"},
// groupField:'Grupo', // Grupo padrao
reader : veicReader,
timeout: 300000,
autoLoad : false,
remoteSort : false,
listeners: {
loadexception: function(proxy, store, response, e) {
alert(e.message);
}
},
proxy : new Ext.data.HttpProxy({
url : 'http://'+CGIFOLDER+'/RadarOne/veiculos.pl',
timeout: 300000,
method : 'POST'
})
});
Grid:
Code:
var veiculos = new Ext.grid.GridPanel({
ds: veicStore,
//stripeRows: true, // enzebra a grid
id: 'veicGrid',
loadMask: true,
cm: new xg.ColumnModel([
new xg.RowNumberer(),
{id:'Status',header: "Status", width: 3, sortable: true, dataIndex: 'Status', tooltip: 'Legenda', renderer:function(data) {
return '<span style=\"color:'+data+'\">|||||||||||||||||</span>';
}
},
{header: "Veiculo", width: 6, sortable: true, dataIndex: 'Veiculo'},
{header: "Placa", width: 6, sortable: true, dataIndex: 'Placa', hidden:true },
{header: "Codigo", width: 5, sortable: true, dataIndex: 'Id', hidden:true, tooltip: 'Codigo do cadastro' },
{header: "Modelo", width: 6, sortable: true, dataIndex: 'Modelo', hidden:true },
{header: "Grupo", width: 4, sortable: true, dataIndex: 'Grupo', tooltip: 'Grupo o qual o veiculo pertence' },
{header: "IGN", width: 2, sortable: true, dataIndex: 'Ignicao', tooltip: 'Ignicao', renderer:function(data){
if (data > 0) { return '<img src=\"images/ignicao.png\">'; } else { return '<img src=\"images/key_red.png\">'; }
}
},
{header: "GPS", width: 2, sortable: true, dataIndex: 'Gps', tooltip: 'Status do GPS', renderer:function(data){
if (data > 0) { return '<img src=\"images/transmissao.png\">'; } else { return '<img src=\"images/transmissao_off.png\">';}
}
},
{header: "GPRS", width:2, sortable:true, dataIndex: 'Gprs', hidden: true, tooltip: 'Status do GPRS', renderer:function(data){
if (data > 0) { return '<img src=\"images/gprs.png\">'; }
}
},
{header: "Cerca", width: 2, sortable:true, dataIndex: 'Cerca', tooltip: 'Cerca Eletronica', renderer:function(data){
if (data == '1') { return '<img src=\"images/cerca_f.png\">'; }
if (data == '2') { return '<img src=\"images/cerca_open.png\">'; }
}
},
{header: "Risco", width: 2, sortable: true, dataIndex: 'Risco', tooltip: 'Area de Risco', renderer:function(data){
if (data > 0) { return '<img src=\"images/risco.png\">'; }
}
},
{header: "Tec", width: 2, sortable: true, dataIndex: 'Tec', tooltip: 'Possui teclado acoplado', renderer:function(data){
if (data > 0) { return '<img src=\"images/operadores.png\">'; }
}
},
{header: "Velocidade", width: 3, sortable: true, dataIndex: 'Velocidade', tooltip: 'Velocidade Atual', renderer:function(data) { return data+' km'; } },
{header: "Cidade", width: 10, sortable: true, dataIndex: 'Cidade'},
{header: "Referencia", width: 10, sortable: false, dataIndex: 'Referencia', tooltip: 'Ponto de referencia mais proximo'},
{id:'Evento', header: "Evento", width:10, sortable:true, dataIndex: 'Evento', tooltip: 'Horario que o evento chegou a central', type: 'date', dateFormat: 'd-m-Y H:i:s', renderer: Ext.util.Format.dateRenderer('d-m-Y H:i:s') },
{header: "Latitude", width:10, sortable:true, dataIndex: 'Latitude', hidden:true },
{header: "Longitude", width:10, sortable:true, dataIndex: 'Longitude', hidden: true},
{header: "Direcao", width:10, sortable:true, dataIndex: 'Dir', hidden: true},
{header: "Cor", width:1, sortable:true, dataIndex: 'Cor', hidden: true, renderer: function(data) {
if (data.match('y') ) { alertas+=1; }
if (data.match('r') ) { panico+=1; }
if (data.match('g') ) { lacres+=1; }
return data;
}
}
]),
viewConfig: {
forceFit:true
},
view: new Ext.grid.GroupingView({
forceFit:true,
groupTextTpl: '{text} ({[values.rs.length]} {[values.rs.length > 1 ? "Items" : "Item"]})'
}),
sm: new Ext.grid.RowSelectionModel({singleSelect:true}),
height: (document.documentElement.clientHeight/2)-77,
iconCls:'icon-grid',
autoScroll: true,
border: false,
enableDragDrop: true,
ddGroup: 'addmap',
trackMouseOver: true
// renderTo: document.body
});
JSON(store.load):
Code:
{"veiculos":[{"Id":"7062","Longitude":"-46.822979","Ignicao":"","Status":"green","Veiculo":"(BXH9067
) V23220","Placa":"BXH9067","Modelo":"V23220","Grupo":"Donatti","Gps":"","Gprs":"1","Cerca":"","Risco"
:"","Tec":"","Velocidade":"0","Cidade":"ITAPIRA/SP","Referencia":"16 metros de GARAGEM DONATTI","Evento":"28-05-2008 19:58:32","Latitude":"-22.426399","Dir":"nordeste","VCerca":"","Cor":""},{"Id":"8376","Longitude"
:"-46.823189","Ignicao":"","Status":"purple","Veiculo":"(BXF0883) 24250E WORKER","Placa":"BXF0883","Modelo"
:"24250E WORKER","Grupo":"Donatti","Gps":"","Gprs":"1","Cerca":"","Risco":"","Tec":"","Velocidade":"0"
,"Cidade":"ITAPIRA/SP","Referencia":"9 metros de GARAGEM DONATTI","Evento":"28-05-2008 18:29:08","Latitude":"-22.426376","Dir":"nordeste","VCerca":"","Cor":""}]}
NEW Record:
Code:
function test(data) {
var json = Ext.util.JSON.decode(data);
var posicao = veicStore.find('Placa', json.Placa);
// se for novo n tera posicao, entao jogaremos na 0 e adicionaremos
if ( posicao >= 0 ) {
veicStore.remove(veicStore.getAt(posicao));
} else {
posicao = 0;
}
var r = new veicRecord({
Id: json.Id,
Status: json.Status,
Grupo: json.Grupo,
Veiculo: json.Veiculo,
Placa: json.Placa,
Modelo: json.Modelo,
Ignicao: json.Ignicao,
Gps: json.Gps,
Gprs: json.Gprs,
Cerca: json.Cerca,
Risco: json.Risco,
Tec: json.Tec,
Velocidade: json.Velocidade,
Cidade: json.Cidade,
Referencia: json.Referencia,
Evento: json.Evento,
Latitude: json.Latitude,
Longitude: json.Longitude,
Cor: json.Cor
});
if (json.Cor.match('r')) {
Ext.getCmp('southCard').getBottomToolbar().items.item(2).setText(panico+' Panico');
}
if (json.Cor.match('y')) {
Ext.getCmp('southCard').getBottomToolbar().items.item(0).setText(alertas+' Alertas');
}
if (json.Cor.match('g')) {
Ext.getCmp('southCard').getBottomToolbar().items.item(0).setText(lacres+' Lacres');
}
veiculos.stopEditing();
// veicStore.insert(posicao, r);
// var sortfield = veicStore.getSortState();
// veicStore.sort(sortfield.field, sortfield.direction);
veicStore.addSorted(r);
veiculos.getView().refresh();
};
I put an alert before creating the second record to make sure its in correct dateFormat, and its.
Any help would be great!
Thanks!
[SOLVED] Grid + DateTime Column + add new record = NaN-NaN-NaN
Reply With Quote