View Full Version : Adding a new grid row to a store which has an auto-increment ID

15 Mar 2011, 5:36 AM
Sorry if this questions has been asked before - but I've searched the forum and came up empty.

I'm new to Ext and trying to get a grid working with a mySQL back-end. I've got deletes and updated working via a JSONWriter. My problem is when I'm trying to add a new record - I have a button on the tbar with the following code for click -

function addNewEmployee(){
var e = new Emp();
_empDataStore.insert(0, e);

the Emp record is -

var Emp = Ext.data.Record.create( [
{name: 'id', type:'int', mapping:'employee_id'}
,{name: 'employee_num', type:'string'}
,{name: 'division', type:'string'}
,{name: 'division_id', type:'string'}
,{name: 'name', type:'string'}
,{name: 'role', type:'string'}
,{name: 'compare', type:'bool'}

note: the employee_id is an auto-increment field in the employee table.

My column model is -

empColModel = new Ext.grid.ColumnModel([
header: 'Employee Number'
, dataIndex: 'employee_num'
, editor: new Ext.form.TextField({allowBlank:false})
header: 'Name'
, dataIndex: 'name'
, editor: new Ext.form.TextField({allowBlank:false})
, maskRe: /([a-zA-Z0-9\s]+)$/
, maxLength: 150
header: 'Role'
, dataIndex:'role'
, editor: new Ext.form.TextField({allowBlank:false})
, maskRe: /([a-zA-Z0-9\s]+)$/
, maxLength: 150
header: 'Division'
, dataIndex: 'division'
, {
header: 'Compare?'
, xtype: 'checkcolumn'
, dataIndex:'compare'
, editor: new Ext.form.Checkbox()

Store code -

empDataStore = new Ext.data.Store({
id: 'empDataStore'
, proxy: new Ext.data.HttpProxy({
url: 'lib/employee.php'
, method: 'POST'
, api: {update: 'lib/employee.php?a=update', destroy: 'lib/employee.php?a=delete'}
, reader: new Ext.data.JsonReader({root:'result', totalProperty:'total',id:'employee_id', messageProperty: 'message', successProperty:'success'}, _emp)
, writer: new Ext.data.JsonWriter({encode: true, writeAllFields: false, listful: true})
, sortInfo: {field: 'employee_num', direction:'ASC'}
, autoSave: false

When I trigger the "Add new" button, I get the following error via Firebug -

c is undefined
isCellEditable(colIndex=undefined, rowIndex=0)ext-all-debug.js (line 49144)
colIndex = undefined
rowIndex = 0
startEditing(row=0, col=undefined)ext-all-debug.js (line 50391)
row = 0
col = undefined
addNewEmployee()memployee.js (line 199)
onClick(e=Object { browserEvent=, button=0, more...})ext-all-debug.js (line 31113)
h(e=Object { browserEvent=, button=0, more...})ext-all-debug.js (line 4615)
[Break On This Error] ed = c.editable;

It seems like this has something to do with the Employee_id field not being displayed on the grid and not being editable? How do I go about adding a 'phantom' row?

Any pointers would be much appreciated...spent a whole day trying to figure this one out!

Thanks! :)

15 Mar 2011, 8:28 AM
OK, I managed to fix the issue by changing the following -

function addNewEmployee(){

var e = new empDataStore.recordType();
_empDataStore.insert(0, e);
_empGrd.startEditing(0, 1);

However, now I'm having another issue with an exception being thrown when I return the data for the create method -

uncaught exception: Ext.data.DataReader: #realize was called with invalid remote-data. Please see the docs for DataReader#realize and review your DataReader configuration.

ext-base-debug.js (line 1956)

I've checked the docx and made sure all my response fields and order are matching the request, and I've got my ID value in there as well.

The post data is -

result : [{"employee_num":"765","name":"test","role":"test","compare":true,"division":"Data","division_id":"3"}]

My response data is -

{"success":true, "message":"Recore created!", "root": {"employee_num":"765","name":"test","role":"test","compare":true,"division":"Data","division_id":"3","id":384}}

Any clues as to what I'm doing wrong? I read the the following post -http://www.sencha.com/forum/showthread.php?84398-FIXED-466-3.1-3.1.1-DirectStore-reader-bug, but I'm lost with all that! I tried variations of putting the returned field data as result.data = { ...fields.. }, but no matter what I tried, keep getting the same exception.

Is there a simple fix that's available for this?


15 Mar 2011, 11:34 AM
Hi zuw,
Your problem is related to your JsonReader config that doesn't match the response you send from the server.
In your reader you specified root:'result'. So your response should looks like:

{"success":true, "message":"Recore created!", "result": {"employee_num":"765","name":"test","role":"test","compare":true,"division":"Data","division_id":"3","id":384}}
This way you shouldn't get the invalid remote-data error.

For a great implementation of what you're doing, have a look at this example:http://dev.sencha.com/deploy/dev/examples/writer/writer.html
Open a firebug console and observe what happens when a new record is added, updated, deleted...

15 Mar 2011, 4:07 PM
Thanks, zetvio - sorry that was my mistake! When I pasted the response as I was trying to see if putting root would fix it, I forgot to change it back. I actually do have it as "result", but that doesn't work either...doesn't work in the sense Ext throws the exception, but the record is created on the DB. Just that the grid doesn't "realize" the "phantom" row with the returned ID.

So just to clarify the point, following is my response -

{"success":true, "message":"Recore created!", "result": {"employee_num":"765","name":"test","role":"test","compare":true,"division":"Data","division_id":"3","id":384}}

17 Mar 2011, 8:01 PM