PDA

View Full Version : Update rows in a grid to a json store



denisputnam
28 Jul 2013, 5:49 PM
I have a grid that has a checkbox column and when I click the checkbox and ask the app to sync the store, it sends down the json with the "old" or "previous" data. In other words, it does not pick up the "true/checked" value in the column.

Can someone tell me what I am doing wrong?




Ext.define('MySchool.view.SubjectsGridPanel', { extend: 'Ext.grid.Panel',
alias: 'widget.subjectsgridpanel',


id: 'subjectsgrid',
width: 1000,
autoScroll: true,
title: '[student name] Subjects',
forceFit: true,
store: 'SubjectStore',


initComponent: function() {
var me = this;


Ext.applyIf(me, {
columns: [
{
xtype: 'numbercolumn',
hidden: true,
dataIndex: 'id',
text: 'subjectid',
format: '000000'
},
{
xtype: 'gridcolumn',
width: 94,
dataIndex: 'name',
text: 'Subject Name'
},
{
xtype: 'numbercolumn',
width: 97,
dataIndex: 'gradeLevel',
text: 'Grade Level',
format: '00'
},
{
xtype: 'numbercolumn',
dataIndex: 'creditHours',
text: 'Credit Hours'
},
{
xtype: 'datecolumn',
dataIndex: 'lastUpdated',
text: 'Date',
format: 'm/d/Y'
},
{
xtype: 'checkcolumn',
dataIndex: 'completed',
text: 'Complete?'
}
],
viewConfig: {
id: 'subjectsgridview'
},
plugins: [
Ext.create('Ext.grid.plugin.CellEditing', {


})
]
});


me.callParent(arguments);
}


});

Ext.define('MySchool.store.SubjectStore', { extend: 'Ext.data.Store',


requires: [
'MySchool.model.SubjectsModel'
],


constructor: function(cfg) {
var me = this;
cfg = cfg || {};
me.callParent([Ext.apply({
autoLoad: true,
model: 'MySchool.model.SubjectsModel',
storeId: 'MySubjectStore',
proxy: {
type: 'rest',
url: 'http://localhost:8080/MySchool-1/subjects',
headers: {
Accept: 'application/json'
},
reader: {
type: 'json',
root: 'data'
},
writer: {
type: 'json',
root: 'data'
}
}
}, cfg)]);
}
});

Ext.define('MySchool.model.SubjectsModel', { extend: 'Ext.data.Model',


fields: [
{
name: 'id',
type: 'int'
},
{
name: 'name',
type: 'string'
},
{
name: 'gradeLevel',
type: 'int'
},
{
name: 'creditHours',
type: 'int'
},
{
name: 'completed',
type: 'boolean'
},
{
name: 'whoUpdated',
type: 'string'
},
{
name: 'lastUpdated',
type: 'date'
},
{
name: 'description',
type: 'string'
},
{
name: 'objectives',
type: 'string'
}
]
});

denisputnam
31 Jul 2013, 5:38 PM
I added the following code, but the sync() does not send the update to my backend? Please help!


Ext.define('MySchool.view.SubjectsPanel', { extend: 'Ext.panel.Panel',
alias: 'widget.subjectspanel',


requires: [
'MySchool.view.SubjectsGridPanel',
'MySchool.view.SubjectsForm'
],


id: 'subjectspanel',
layout: {
align: 'stretch',
type: 'hbox'
},
title: 'Subjects By Student',


initComponent: function() {
var me = this;


Ext.applyIf(me, {
items: [
{
xtype: 'subjectsgridpanel',
flex: 1
},
{
xtype: 'subjectsform',
flex: 1
}
],
tools: [
{
xtype: 'tool',
handler: function(event, toolEl, owner, tool) {
// Add refresh handler code here. Use example from chapter 2 of book.
//debugger;


var pnl = this.up('subjectspanel').down('subjectsgridpanel');
var store = pnl.getStore();
store.reload();
//pnl.setTitle( 'Denis' );


},
id: 'toolrefreshstudentsbysubject',
tooltip: 'Refresh',
type: 'refresh'
},
{
xtype: 'tool',
handler: function(event, toolEl, owner, tool) {
// add search handler code here.
},
id: 'toolsearchstudentsbysubject',
tooltip: 'Search',
type: 'search'
},
{
xtype: 'tool',
handler: function(event, toolEl, owner, tool) {
// add new/insert handler code here.
},
id: 'toolnewstudentsbysubject',
tooltip: 'New',
type: 'plus'
},
{
xtype: 'tool',
handler: function(event, toolEl, owner, tool) {
// Add save/udate handler code here.
//debugger;
window.console.log('SAVE...' );
var pnl = this.up('subjectspanel').down('subjectsgridpanel');
var store = pnl.getStore();
var records = store.getUpdatedRecords();
for( var i = 0; i < records.length; i++ )
{
records[i].set( 'lastUpdated', new Date() );
//records[i].save();
}
store.commitChanges();
store.sync();
//pnl.setTitle( 'Denis' );
},
id: 'toolsavestudentsbysubject',
tooltip: 'Save',
type: 'save'
},
{
xtype: 'tool',
handler: function(event, toolEl, owner, tool) {
// Add delete handler code here.
},
id: 'tooldeletestudentsbysubject',
tooltip: 'Delete',
type: 'minus'
}
]
});


me.callParent(arguments);
}


});