We Keep Coding

How to perform action on the basis of response status while doing sync in Ext.js

This is my store MyStore.js
Ext.define('myProject.store.MyStore', {
config:{
storeId: 'MyStore',
autoLoad: false,
autoSync: false,
allowSingle: true,
clearOnPageLoad: true,
model: 'abc.model.MyStoreModel',
proxy: {
type: 'rest',
actionMethods: {create: 'POST', read: 'GET', update: 'POST', destroy: 'POST'},
url:'/services/rest/MyService/myService',
reader: {
type: 'json',
rootProperty:MyServiceView.elements.collection',
successProperty : 'success'
},
writer:
{
type: 'json',
root: 'MyServiceDataView',
nameProperty: 'mapping',
expandData : true
},
listeners: {
exception: function(proxy,response,operation){
}
}
}
}
});
This is my Model
Ext.define( 'myProject.model.MyStoreModel', {
extend: 'Ext.data.Model',
config:{
idProperty: 'keyStr',
fields:[
{
name: 'keyStr',
type: 'string',
},
{
name: 'sId',
type: 'int'
},
{
name: 'dCode',
type: 'string'
},
{
name: 'sNumber',
type: 'int'
}
]
},
});
Inside my Controller.js, I have this method
syncMyStore: function()
{
var deferred = Q.defer();
var successfulSync= 'false';
var me = this;
var myStore = Ext.getStore('MyStore');
if(this.isSyncRequires(myStore)) //assume this is always true
{
myStore.sync({
success: function () {
successfulSync = 'true';
deferred.fulfill();
}
});
}
else
{
deferred.fulfill();
}
return successfulSync;
},
Suppose I have 5 records in my store i.e record0, record2 ... record4.
For each records, it is calling the Rest Service. So total 5 Rest calls
Requirement 1: Instead of using success property, I want to perform some actions on the basis of status code.
i.e if status code is 200, then consider it success.
Requirement 2: After each rest call, I want to remove record/mark dirty as false on the basis of response status (200) for that particular record.
Means, suppose for record1 and record2 if status code is 200, then I want to remove/mark dirty=false for record 1 and record2 only.
I will be really thankful for you if you help me out with this.

Assuming that record0, record1, record3 .. have some unique way of identification. Make an ajax call for each record(REST api call ) then if the response is 200, control will hit "success" function. Then if the response has data to identify records select that record and change its dirty flag to false. In the failure function do the same and change dirty flag to true.
There are two things you need to conform to make better answer
Will you be using records as payload for your rest api call ?
Will the response have indication record, i.e i'll have guid related to
record ?

ExtJs Dynamic Store Failed call Handle

I have a clasic store
Ext.define('xxx.store.Search', {
extend: 'Ext.data.Store',
model: 'xxx.model.Search',
requires: ['xxx.data.xxxx'],
proxy:
{
type: 'xxxxx',
digSearchUrl: {
initRequest: 'ajax/xxx/xxx/xx',
pollRequest: 'ajax/xxxx/xxxx/xxxxxx'
}
},
autoLoad: false,
defaultSortDirection: 'DESC'
});
Now i usually do a store load like this:
this.getStore('Search').load({
digSearchCfg: {
xxx: sid,
xxx: xxxx
}
});
I know i could use the standard approch like in here:
Attempting to load Ext store with JSON data from AJAX request returns error
But i would rather define the error handler in the store it self. is that possible?

If you would like to catch and handle the Ajax request exceptions yourself just add a Exception listener to the Ajax proxy, like so:
var store = Ext.create('Ext.data.JsonStore', {
storeId: 'simpsonsStore',
fields: ['name', 'email', 'phone'],
autoLoad: true,
proxy: {
type: 'ajax',
url: 'data2.json',
reader: {
type: 'json',
rootProperty: 'characters'
},
listeners: {
exception: function(proxy, response, operation, eOpts ) {
console.log("EXCEPTION CAUGHT!");
}
}
},
listeners: {
load: function() {
console.log(this);
}
}
});
You can see a demo fiddle here. data1.json will work and will log the store object to console. data2.json will log 'EXCEPTION CAUGHT!' to the console.
Here is the documentation for the Ajax proxy for reference.

Extjs Paging with additional Parameter

I'am working on a ExtJS 4.2 Project, where i want to use a Paging Toolbar to navigate through Images.
When i open the Window, all Images are correct, but when i click on the next button to see the next Images, the result is empty. Its because the Parameter Id isn't passed to the backend System.
I saw in other Threads an option like baseParams but they are not in the documentation and don't work.
//My Store Class
Ext.define('App.store.Images', {
extend: 'Ext.data.Store',
model: 'App.model.Images',
autoLoad: false,
autoSync: false,
storeId: 'Images',
pageSize: 8,
proxy: {
type: 'ajax',
url: '/getImages',
reader: {
type: 'json',
root: 'images',
totalProperty: 'total'
}
}
});
// This code is execute when i open the Window
var imagesStore = Ext.StoreManager.get('Images');
imagesStore.on('load', buildContent);
imagesStore.load({
params: {
id: record.get('id'),
start: 0,
limit: 8
}
});
Where can be additional Parameter be defined?

In fact you can define extraParams on the store proxy. You can do this just before the load method call :
Ext.apply(store.getProxy().extraParams, {
'yourId': yourId
});
or in your proxy config :
proxy: {
type: 'ajax',
url: '/getImages',
reader: {
type: 'json',
root: 'images',
totalProperty: 'total'
}
extraParams: {
'yourId': yourId
}
}

Backbone + kendoGrid, PUT not working

I'm trying to integrate kendoGrid on a Backbone View, this is my view code:
App.Views.UsersManager = Backbone.View.extend({
tagName: 'section',
id: 'users-manager',
className: 'tile',
template: Handlebars.compile($('#profile-usersManager-template').html()),
render: function () {
console.log('usersManager.render -> collection', this.collection);
var self = this;
this.$el.html(this.template());
var dataSource = new kendo.data.DataSource({
transport: {
read: {
url: '/users',
type: 'GET',
dataType: 'json'
},
update: {
url: '/users',
type: 'PUT',
dataType: 'json'
}
},
schema: {
data: 'data'
},
batch: true
});
this.$('table.users-manager').kendoGrid({
scrollable: false,
sortable: true,
dataSource: dataSource,
toolbar: ["save"],
editable: true,
navigatable: true,
// filterable: true,
});
return this;
}
});
The view render correctly, and the kendoGrid correctly GET my users data from my SlimPHP framework, but when i try to modify an element of the grid and hit the "Save Changes" button provided by "toolbar: ["save"]", nothing happens, even on my firebug console... there's no server communication at all.
I'm new on kendo (and Backbone also) development, maybe i'm failing something on the syntax? :stuck:
Update after Atanas Korchev answer
this is my DataSource updated:
var dataSource = new kendo.data.DataSource({
transport: {
read: {
url: '/users',
type: 'GET',
dataType: 'json'
},
update: {
url: '/users',
type: 'PUT',
dataType: 'json'
}
},
schema: {
data: 'data',
model: {
id: 'id',
fields: {
email: {},
name: {},
surname: {},
rank: {},
type: {}
}
}
},
batch: true
});
That not solve my issue, i wanna notice that my php code look like that actually:
$app->put('/users', function () use ($app, $db) {
exit('put ok');
});
Just to see if the client/server communication works... I know it will be an error, but I can't see any firebug error too, like the "Save Changes" button has no event... (I will try the Dennis Rongo suggestion.. but I dont think is the solution...)
Sorry for my bad english

Try describing your model in the DataSource settings:
schema: {
data: 'data',
model: {
id: "MyId"
}
}
You need to at least specify the id.

Solved by removing the data: 'data' from the schema object, there's the link kendoGrid batch editing!

How to set param of store.proxy

var gridStore = Ext.create('Ext.data.Store', {
model: 'Writer.Person',
autoLoad: true,
autoSync: false,
proxy: {
type: 'ajax',
api: {
read: '?operant=2',
create: '?operant=3',
update: '?operant=4',
destroy: '?operant=5'
},
reader: {
type: 'json',
successProperty: 'success',
root: 'data',
messageProperty: 'message',
extraParams: {
user_id: "some text",
another_param: "more text"
}
}
}
});
I tried use baseParams 、 params ,I use fiddler to look ,the extjs no send this, how to do?? thanks

Check this, it shows some workaround for your problem: http://www.learnsomethings.com/2011/05/17/where-did-setextraparam-aka-setbaseparam-go-in-extjs-4-%E2%80%93-one-workaround/

I believe you're looking for extraParams, which is a config under the proxy. Example:
proxy: {
url: "some_page.jsp",
extraParams: {
user_id: "some text",
another_param: "more text",
// add as many as you need
}
}
These extra parameters will be sent in your requests. There are also default params set by the Ajax proxy class: pageParam, sortParam, groupParam, filterParam, limitParam. Set these to undefined to remove them from the request.