PDA

View Full Version : Store is not getting sync with database [ using RowEditing plugin]



AtulDawkhare
20 Dec 2011, 1:18 AM
Hi All,
I am implementing CRUD operation using ExtJS Grid. For row editing I have used "rowEditing" plugin.
I am able to call update Proxy on row edit using following code.


Grid.on('edit', function(editor, e) {editor.store.sync();Store.load();});


But the problem that I am facing is, whenever I am editing the Grid Row, update proxy gets called, and I am able to update the data properly, but sometime / randomly my store is not sync with the data.

I guess when update proxy gets called, at the same time read proxy also gets called, and so I am not getting updated data.

Here is my store.


var Store = Ext.create('Ext.data.Store',
{
storeId: 'StoreID',
autoSync:true,
autoLoad: true,
pageSize: 20,
model: 'Model',
remoteSort: true,
proxy: {
autoSave: true,
autoSync:true,
type: 'ajax',
api:
{
create : '/performAction?view=ExtJsGrid&create=true',
read : '/performAction?view=ExtJsGrid',
update : '/performAction?view=ExtJsGrid&update=true',
destroy : '/performAction?view=ExtJsGrid&delete=true'
},
reader: {root: 'root_MilestoneBO_GridComponentId', totalProperty: 'totalCount'},
writer: {type: 'json', writeAllFields: false, allowSingle: false, encode: true, root: 'row'},

directionParam:'_sortOrder',

sortParam:'_sortColumn',
pageParam:'page',
simpleSortMode: true
},
});


Please suggest what is missing here.

mitchellsimoens
20 Dec 2011, 5:10 AM
Why are you doing Store.load() on the edit event listener? You should just sync() and return the data and the grid should reflect.

AtulDawkhare
20 Dec 2011, 10:05 PM
Hi There,

Thanks for the reply.

I have implemented in the same way that you are asking me to do. But because of this I am facing problem of
having bulk of Json.

eg. on my Grid there are 4 rows one current page. And if I edit 1st row the I am getting only currently edited row value in Json format i.e say


[{"name":"BomMilestone1","id":"5861"}]


and here I am able to fire update query in DB for this currently edited row.
But when I edit one more row, I get Json string on server side as follows.



[{"name":"BomMilestone124","id":"5861"},{"name":"BomMilestone23","id":"5862"}]


So here I am facing problem. Can I get only one i.e. Currently edited row on server ?

Please correct me if anything is missing here.

AtulDawkhare
22 Dec 2011, 9:40 PM
Can someone please suggest me, what is wrong here?

AtulDawkhare
3 Jan 2012, 1:44 AM
Is there any way to achieve this ? please help

Farish
3 Jan 2012, 2:03 AM
this means that the first record is still marked as dirty in the store i.e. the store will try to send it also when sync is called. If you are using autoSync: true, do you still have to call store.sync() explicitly? shouldn't it sync itself automatically?

May be if you can post a small working example, I can take a look.

Regards,
Farish

AtulDawkhare
3 Jan 2012, 4:54 AM
Thanks for the reply.

I have called the store.sync(), once again because I thought then at least this will work. But I was wrong.

I have tried from all the way to work on the this but didn't find the exact solution. So please help me.

Here is the working sample code.



Ext.Loader.setConfig({enabled: true});


Ext.Loader.setPath('Ext.ux', '/ExtJS/Grid/js/ux');
Ext.require([
'Ext.ux.PreviewPlugin'
]);






Ext.onReady(function(){
Ext.tip.QuickTipManager.init();


Ext.define('ForumThread', {
extend: 'Ext.data.Model',
fields: [
'id',
'Project_name',
{name: 'Created_date', mapping: 'Created_date', type: 'date', dateFormat: 'timestamp'},
{name: 'Updated_date', mapping: 'Updated_date', type: 'date', dateFormat: 'timestamp'},
'id'
],
idProperty: 'id'
});



// create the Data Store
var store = Ext.create('Ext.data.Store', {
pageSize: 10,
model: 'ForumThread',
remoteSort: true,
proxy: {
autoSave: true,
autoSync:true,
type: 'ajax',
api: {
create : '/GridDemo?create=true',
read : '/GridDemo',
update : '/GridDemo?update=true',
destroy : '/GridDemo?delete=true'
},
reader: {
root: 'topics',
totalProperty: 'totalCount'
},
writer: {
type : 'json',
writeAllFields : false,
allowSingle : true,
encode : true,
root : 'row'
},


// sends single sort as multi parameter
simpleSortMode: true
},
sorters: [{
property: 'Updated_date',
direction: 'DESC'
}]
});


function rendercreatedon(value, p, r) {
return Ext.String.format(Ext.Date.dateFormat(value, 'M j, Y, g:i a'), r.data['Created_date']);
}
function renderupdatedon(value, p, r) {
return Ext.String.format(Ext.Date.dateFormat(value, 'M j, Y, g:i a'), r.data['Updated_date']);
}

function renderCurrency(value, sign,decimals, end ) {
return Ext.util.Format.currency(value,sign,decimals,end);
}
var rowEditing = Ext.create('Ext.grid.plugin.RowEditing', {
clicksToMoveEditor: 1,
autoCancel: false
});




var pluginExpanded = true;
var grid = Ext.create('Ext.grid.Panel', {
width: 700,
errorSummary:false,
height: 500,
title: 'Project Listing Grid',
store: store,
disableSelection: true,
loadMask: true,
viewConfig: {
id: 'gv',
trackOver: false,
stripeRows: false,
plugins: [{
ptype: 'preview',
bodyField: 'excerpt',
expanded: true,
pluginId: 'preview'
}]
},
// grid columns
columns:[
{
id: 'id',
flex:1,
text: "Hidden",
dataIndex: 'id',
sortable: true,
currencyAtEnd:true,

},{
id: 'topic',
flex:1,
text: "Project Title",
dataIndex: 'Project_name',
sortable: true,
editor : {allowBlank:false}

}, {
text: "Created on",
dataIndex: 'Created_date',
width: 220,
align: 'right',
renderer: rendercreatedon,
sortable: true

},{
id: 'last',
text: "Updated on ",
dataIndex: 'Updated_date',
width: 220,
renderer: renderupdatedon,
sortable: true

},
{
xtype: 'actioncolumn',
width: 50,
items: [{
icon : 'css/images/add16.gif', // Use a URL in the icon config
tooltip: 'Delete',
handler: function(grid, rowIndex, colIndex) {
var rec = store.getAt(rowIndex);
var idx= store.indexOf(rec);
alert(idx);
store.removeAt(idx);
store.sync();
}
}]
}
],
plugins: [rowEditing],
// paging bar on the bottom
bbar: Ext.create('Ext.PagingToolbar', {
store: store,
displayInfo: true,
displayMsg: 'Displaying topics {0} - {1} of {2}',
emptyMsg: "No topics to display",
items:[
'-', {
text: 'Show Preview',
pressed: pluginExpanded,
enableToggle: true,
toggleHandler: function(btn, pressed) {
var preview = Ext.getCmp('gv').getPlugin('preview');
preview.toggleExpanded(pressed);
}
}]
}),
renderTo: 'topic-grid'
});


grid.on('edit', function(editor, e)
{
editor.store.sync();
store.sync();
});

store.loadPage(1);
});


And my Json store , since it is server proxy so



{"totalCount": "10",topics: [{"Project_name": " Atuls11ssdssqqqss","id": "3022","Created_date": "1403429907","Updated_date": "1403430147"}, { "Project_name": " ertertaaa","id": "3288","Created_date": "1313746978","Updated_date": "1313746979"}, { "Project_name": " pro_18augsssq","id": "3285","Created_date": "1313654174","Updated_date": "1313736745"}, { "Project_name": " new pro8augss","id": "3228","Created_date": "1312788468","Updated_date": "1313732600"}, { "Project_name": " project 17 august-11","id": "3280","Created_date": "1313589759","Updated_date": "1313675991"}, { "Project_name": " pro_188","id": "3287","Created_date": "1313675435","Updated_date": "1313675437"}, { "Project_name": " pro18aug","id": "3286","Created_date": "1313675261","Updated_date": "1313675261"}, { "Project_name": " 411_build_17","id": "3262","Created_date": "1313138965","Updated_date": "1313675234"}, { "Project_name": " Pro_12aug","id": "3261","Created_date": "1313134794","Updated_date": "1313663034"}, { "Project_name": " pp1dsad","id": "3264","Created_date": "1313149717","Updated_date": "1313655083"},]}



Please guide me , what is wrong here.

AtulDawkhare
3 Jan 2012, 10:23 PM
I have posted my complete code, can you please what is missing here?

Farish
3 Jan 2012, 11:41 PM
You have the id field twice in your model. Remove one and see if it makes a difference.

Also, install Firebug app in Firefox. In the console, you can see the requests and responses. See if the right request is sent and then if the returned response has the correct updated value.

Regards,
Farish

AtulDawkhare
4 Jan 2012, 1:28 AM
Thanks for the reply,

I have just cross check using the Firebug and found that,The Post is sending correct value, [the row that I have modified] but the response that I am getting is null.

And is it giving me Error in ext-all-debug.js file for


if (success === true) {
reader = me.getReader();
result = reader.read(me.extractResponseData(response));
records = result.records;


So the response is null , Is this the cause of the problem?
Can you please suggest me the solution for this? Since I don't know what to be done here.

Thanks in Advance

Farish
4 Jan 2012, 1:37 AM
then this is the problem of your server side. you can send back all records as the response. this should fix it. this way, when these records reach back to the client side, the store marks the changed record as not dirty (because it has now received the updated records from the server) and next time you change something, only that record will be sent and not the one changed previously also.

Regards,
Farish

AtulDawkhare
4 Jan 2012, 1:48 AM
I guess here was the Problem..
I didn't commit the record so it was giving me the error.


grid.on('edit', function(editor, e)
{
editor.store.sync();
editor.record.commit();
//store.sync();
});


Hope this is correct.

Farish
4 Jan 2012, 1:57 AM
no. u dont need the grid edit event at all. you have set autoSync: true in the store. this will cause sync automatically whenever something is changed in the grid. you need to return the records from the server side in the response.

AtulDawkhare
4 Jan 2012, 3:26 AM
ohh ok , Let me try on this as well.

Also the moment I removed the, following code, it stop sending any data to serverside.



grid.on('edit', function(editor, e)
{
editor.store.sync();
editor.record.commit();

});


It will be really Good if you give me any sample working example , which matches to my requirement.

Farish
4 Jan 2012, 4:49 AM
I am not using autoSync anywhere. I have put a Save button in my app and clicking this button calls store.sync() saving any unsaved changes.

Even after removing that code, store should sync on changes but if it doesn't for some reason, then put it back but remove the commit line. just sync the store on grid edit.

adonaicruz
15 Jul 2013, 3:41 PM
pt_BR: Se você estiver tendo problemas para sincronizar o "store", verifique se no "model" não possui uma validação e se ela não está falhando na hora de sincronizar. No exemplo abaixo, o "store" não sincroniza se o campo TITULO não existir no "record".
en_US: the store not sync if the model validator not match:



,validations:[
{type: 'length',field: 'TITULO',max: 200}
]