PDA

View Full Version : Row Editor w/ JSON Writer using Restful



ivanleblanc
19 Oct 2009, 11:54 AM
I am trying to use the Row Editor with a JSON writer and Restful as true.

Here is mt Record object:



var Asset = Ext.data.Record.create([
{name: 'id', type: 'int'},
{name: 'type_id', type: 'int', allowBlank: false},
{name: 'control', tpye: 'int', allowBlank: false},
{name: 'sn', type: 'string', allowBlank: false},
{name: 'make', type: 'string', allowBlank: false},
{name: 'model', type: 'string', allowBlank: false},
{name: 'description', type: 'string', allowBlank: false},
{name: 'status_id', type: 'int', allowBlank: false},
{name: 'daysBeforeDue'},
{name: 'daysBeforeWarning'},
{name: 'dueDate', type:'date', dateFormat:'Y-m-d'}
]);


Each field in the above object is a column in the Assets tabel in my DB except for dueDate. It is a calculated field pulled from another table, the calucalation is done on the server side and just passed in the SELECT statement.

Heres my dataProxy, Reader, Writer, and Store



var dataProxy = new Ext.data.HttpProxy({
url: site_url+'/assets'
});
var reader = new Ext.data.JsonReader({
totalProperty: 'total',
successProperty: 'success',
idProperty: 'id',
root: 'data',
fields: Asset
});
var writer = new Ext.data.JsonWriter();
var store = new Ext.data.Store({
restful: true,
proxy: dataProxy,
reader: reader,
writer: writer,
id: 'asset',
listeners: {
write : function(store, action, result, response, rs) {
App.setAlert(response.success, response.message);
}
}
});


Here is my column configuration:



var cm = new Ext.grid.ColumnModel([
{header: "ID", dataIndex: 'id', hidden:true, editable:false},
{
header: 'Type',dataIndex: 'type_id',sortable:true,
editor: new fm.ComboBox({
typeAhead: true,
triggerAction: 'all',
lazyRender:true,
store: dsAssetType,
valueField: 'id',
displayField: 'name'
}),
renderer: function(data) {
record = dsAssetType.getById(data);
if(record) return record.data.name;
else return 'Err';
}
},
{
header: 'Control',dataIndex: 'control',sortable:true,
// use shorthand alias defined above
editor: new fm.TextField({
allowBlank: false
})
},
{
header: 'Serial #',dataIndex: 'sn',sortable:true,
editor: new fm.TextField({
allowBlank: false
})
},
{
header: 'Make',dataIndex: 'make',sortable:true,
editor: new fm.TextField({
allowBlank: false
})
},
{
header: 'Model',dataIndex: 'model',sortable:true,
editor: new fm.TextField({
allowBlank: false
})
},
{
header: 'Description',dataIndex: 'description',width: 150,sortable:true,
editor: new fm.TextField({
allowBlank: false
})
},
{
header: 'Status',dataIndex: 'status_id',sortable:true,
editor: new fm.ComboBox({
triggerAction: 'all',
lazyRender:true,
store: dsAssetStatus,
valueField: 'id',
displayField: 'status'
}),
renderer: function(data) {
record = dsAssetStatus.getById(data);
if(record) return record.data.status;
else return 'Err';
}
},
{
header: 'Due Date',dataIndex: 'dueDate',width: 70,sortable:true, editable: false,
renderer: formatDueDate
}

//checkColumn
]);


Here is the formatDueDate callback function, nothing special here:



function formatDueDate(value,metaData,record) {
if(value) {
value = value.dateFormat('m/d/Y');
if(record.data.daysBeforeDue <= 0)
value = '<span style="color:red">' + value + '</span>';
if(record.data.daysBeforeDue <= record.data.daysBeforeWarning)
value = '<span style="color:orange">' + value + '</span>';
return value;
}
}


And finally the Grid code with the 2 handlers for adding and deleting rows:



var assetGrid = new Ext.grid.GridPanel({
renderTo: 'user-grid',
iconCls: 'icon-grid',
frame: true,
title: 'Assets',
autoScroll: true,
height: 500,
width: 900,
store: store,
cm : cm,
plugins: [editor],
tbar: [
{
iconCls: 'icon-user-add',
text: 'Add Asset',
handler: onAdd
},
{
ref: '../removeBtn',
iconCls: 'icon-user-delete',
text: 'Remove Asset',
disabled: true,
handler: onDelete
}
],
viewConfig: {
forceFit: true
}
});

assetGrid.getSelectionModel().on('selectionchange', function(sm){
assetGrid.removeBtn.setDisabled(sm.getCount() < 1);
});

/**
* onAdd
*/
function onAdd(btn, ev) {
var r = new assetGrid.store.recordType({
id: 'null',
type_id: 1,
control: '',
sn: '',
make: '',
model: '',
description: '',
status_id: 1
});
editor.stopEditing();
assetGrid.store.insert(0, r);
editor.startEditing(0);
}
/**
* onDelete
*/
function onDelete(grid) {
var rec = assetGrid.getSelectionModel().getSelected();
if (!rec) {
return false;
}
assetGrid.store.remove(rec);
}
});


The deleting and updating work fine, its when i go to create a new row wher i run into problems. When a row is added this is what the Writer sends to the server:

data=%7B%22id%22%3A%22ext-record-1%22%2C%22type_id%22%3A1%2C%22control%22%3A%22ddd%22%2C%22sn%22%3A%22ddd%22%2C%22make%22%3A%22ddd%22%2C%22model%22%3A%22ddd%22%2C%22description%22%3A%22ddd%22%2C%22status_id%22%3A1%2C%22dueDate%22%3A%22%22%7D

This decoded gives you:

data={"id":"ext-record-1","type_id":1,"control":"ddd","sn":"ddd","make":"ddd","model":"ddd","description":"ddd","status_id":1,"dueDate":""}

1st problem is why is "id" getting a string and not the id of the row?

2nd and most important is how do i not send dueDate back? When is comes back I will get an error in my php update function because dueDate is not a field in the Asset table in the DB. I first thought if i didnt put an editor on dueDate and make it not editable would fix it, but it did not.

Thank you for any assistance.