PDA

View Full Version : Problem with null JSON server side on store.sync (ExtJS 4x)



Robodance
16 Jan 2012, 4:04 AM
Hi Guys,

I'm struggling with a grid that I need to finish up asap which posts back some JSON to a MVC 3.0 CRUD method. Essentially, every time I try to sync, I just get a null value in the consuming method server side...

Everything else is hooked up correctly and I can call the individual CRUD methods defined in the API, but I just can't consume the updated data... Is this a common issue?

Can post up code if helpful

Thx in advance

:-/

P.S. Firebug shows the updated JSON on the post tab...

Robodance
16 Jan 2012, 4:58 AM
Ext.define('Writer.Form', {
extend: 'Ext.form.Panel',
alias: 'widget.writerform',
requires: ['Ext.form.field.Text'],
initComponent: function () {
this.addEvents('create');
Ext.apply(this, {
activeRecord: null,
iconCls: 'icon-user',
frame: true,
title: 'Venue :: All fields are required',
defaultType: 'textfield',
bodyPadding: 5,
fieldDefaults: {
anchor: '100%',
labelAlign: 'right'
},
items: [{
fieldLabel: 'Code',
name: 'VenueCode',
allowBlank: false//,
//vtype: 'email'
}, {
fieldLabel: 'Name',
name: 'VenueName',
allowBlank: false
}],
dockedItems: [{
xtype: 'toolbar',
dock: 'bottom',
ui: 'footer',
items: ['->', {
iconCls: 'icon-save',
itemId: 'save',
text: 'Save',
disabled: true,
scope: this,
handler: this.onSave
}, {
iconCls: 'icon-user-add',
text: 'Create',
scope: this,
handler: this.onCreate
}, {
iconCls: 'icon-reset',
text: 'Reset',
scope: this,
handler: this.onReset
}]
}]
});
this.callParent();
},
setActiveRecord: function (record) {
this.activeRecord = record;
if (record) {
this.down('#save').enable();
this.getForm().loadRecord(record);
} else {
this.down('#save').disable();
this.getForm().reset();
}
},
onSave: function () {
var active = this.activeRecord,
form = this.getForm();
if (!active) {
return;
}
if (form.isValid()) {
form.updateRecord(active);
this.onReset();
}
},
onCreate: function () {
var form = this.getForm();
if (form.isValid()) {
this.fireEvent('create', this, form.getValues());
form.reset();
}
},
onReset: function () {
this.setActiveRecord(null);
this.getForm().reset();
}
});
Ext.define('Writer.Grid', {
extend: 'Ext.grid.Panel',
alias: 'widget.writergrid',
requires: [
'Ext.grid.plugin.CellEditing',
'Ext.form.field.Text',
'Ext.toolbar.TextItem'
],
initComponent: function () {
this.editing = Ext.create('Ext.grid.plugin.CellEditing');
Ext.apply(this, {
iconCls: 'venues-grid',
frame: true,
plugins: [this.editing],
dockedItems: [{
xtype: 'toolbar',
items: [{
iconCls: 'icon-add',
text: 'Add',
scope: this,
handler: this.onAddClick
}, {
iconCls: 'icon-delete',
text: 'Delete',
disabled: true,
itemId: 'delete',
scope: this,
handler: this.onDeleteClick
}]
}, {
weight: 2,
xtype: 'toolbar',
dock: 'bottom',
items: [{
xtype: 'tbtext',
text: '<b>@bbc</b>'
}, '|', {
text: 'autoSync',
enableToggle: true,
pressed: true,
tooltip: 'When enabled, Store will execute Ajax requests as soon as a Record becomes dirty.',
scope: this,
toggleHandler: function (btn, pressed) {
this.store.autoSync = pressed;
}
}, {
text: 'batch',
enableToggle: true,
pressed: true,
tooltip: 'When enabled, Store will batch all records for each type of CRUD verb into a single Ajax request.',
scope: this,
toggleHandler: function (btn, pressed) {
this.store.getProxy().batchActions = pressed;
}
}, {
text: 'writeAllFields',
enableToggle: true,
pressed: false,
tooltip: 'When enabled, Writer will write *all* fields to the server -- not just those that changed.',
scope: this,
toggleHandler: function (btn, pressed) {
this.store.getProxy().getWriter().writeAllFields = pressed;
}
}]
}, {
weight: 1,
xtype: 'toolbar',
dock: 'bottom',
ui: 'footer',
items: ['->', {
iconCls: 'icon-save',
text: 'Sync',
scope: this,
handler: this.onSync
}]
}],
columns: [{
text: 'Code',
width: 100,
sortable: true,
dataIndex: 'VenueCode',
field: {
xtype: 'textfield'
}
}, {
header: 'Name',
flex: 1,
sortable: true,
dataIndex: 'VenueName',
field: {
type: 'textfield'
}
}]
});
this.callParent();
this.getSelectionModel().on('selectionchange', this.onSelectChange, this);
},
onSelectChange: function (selModel, selections) {
this.down('#delete').setDisabled(selections.length === 0);
},
onSync: function () {
//alert(this.store.valueOf());
this.store.sync();
},
onDeleteClick: function () {
var selection = this.getView().getSelectionModel().getSelection()[0];
if (selection) {
this.store.remove(selection);
}
},
onAddClick: function () {
var rec = new Venue({
VenueCode: '',
VenueName: ''
}), edit = this.editing;
edit.cancelEdit();
this.store.insert(0, rec);
edit.startEditByPosition({
row: 0,
column: 1
});
}
});
Ext.define('Venue', {
extend: 'Ext.data.Model',
idProperty: 'VenueCode',
fields: [{
name: 'VenueCode'//,
//type: 'int',
//useNull: true
}, 'VenueName'],
validations: [{
type: 'length',
field: 'VenueName',
min: 1
}]
});
Ext.require([
'Ext.data.*',
'Ext.tip.QuickTipManager',
'Ext.window.MessageBox',
'Ext.toolbar.Paging'
]);
var itemsPerPage = 5;
Ext.onReady(function () {
Ext.tip.QuickTipManager.init();
var store = Ext.create('Ext.data.Store', {
model: 'Venue',
pageSize: itemsPerPage,
autoLoad: { start: 0, limit: itemsPerPage },
autoSync: false,
autoSave: true,
proxy: {
type: 'ajax',
api: {// CRUD API DEFINITIONS
read: 'Venues/ReadAJAX',
create: 'Venues/CreateAJAX',
update: 'Venues/UpdateAJAX',
destroy: 'Venues/DeleteAJAX',
headers: { 'Content-Type': 'application/json; charset=UTF-8' }
},
reader: {
type: 'json',
successProperty: 'success',
root: 'data',
messageProperty: 'msg',
//messageProperty: 'message',
//totalProperty: 'total'
idProperty: 'VenueCode'
},
writer: {
type: 'json',
writeAllFields: true,
encode: false,
listful: false,
root: 'data'
},
listeners: {
exception: function (proxy, response, operation) {
Ext.MessageBox.show({
title: 'REMOTE EXCEPTION !',
msg: operation.getError(),
icon: Ext.MessageBox.ERROR,
buttons: Ext.Msg.OK
});
}
}
},
listeners: {
write: function (proxy, operation) {
if (operation.action == 'destroy') {
main.child('#form').setActiveRecord(null);
//alert("WRITE");
}
Ext.example.msg(operation.action, operation.resultSet.message);
}
}
});
var main = Ext.create('Ext.container.Container', {
padding: '0 0 0 0',
renderTo: 'venues-grid',
width: 935,
height: 500,
layout: {
type: 'vbox',
align: 'stretch'
},
items: [{
itemId: 'form',
xtype: 'writerform',
height: 130,
margins: '0 0 10 0',
listeners: {
create: function (form, data) {
store.insert(0, data);
}
}
}, {
itemId: 'grid',
xtype: 'writergrid',
title: 'Venue List',
flex: 1,
store: store,
listeners: {
selectionchange: function (selModel, selected) {
main.child('#form').setActiveRecord(selected[0] || null);
}
},
bbar: Ext.create('Ext.PagingToolbar', {
store: store,
displayInfo: true,
displayMsg: 'Displaying items {0} - {1} of {2}',
emptyMsg: "No items to display"
})
}]
});

/*
var data = [];
Ext.each(venues-grid.getStore().getModifiedRecords(), function(record){
data.push(record.data);
});
Ext.Ajax.request({
url: 'Venues/DeleteAJAX',
params: {data: Ext.encode(data)},
success: function(){
//
},
failure: function(){
//
}
});
*/
});