ExtJs Dynamic Store Failed call Handle - javascript

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.

Related

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 ?

sending data using POST method in sencha extjs rest webservice

I wanna save a model by sending data using post method to my web server,
I wrote these codes and noticed that sencha is sending data using the GET method.
how can I send the data using POST method?
my model code:
Ext.define('MyApp.model.emp.Roles', {
extend: 'MyApp.model.Base',
fields: [
{
type: 'int',
name: 'id'
},
{
type: 'string',
name: 'title'
},
],
proxy: {
type: 'ajax',
url : 'http://myweb.test/json/fa/myweb/managerole.jsp',
idParam: 'id',
extraParams: {
'action':'btnSave_Click'
},
method:'POST',
actionMethods: {
create : 'POST',
read : 'POST',
update : 'POST',
destroy: 'POST'
},
}
});
save calling code:
{
xtype: 'button',
text: 'ذخیره',
handler:function()
{
var user = Ext.create('MyApp.model.emp.Roles', {title: 'A Role From Sencha'});
user.set('title','hi');
user.set('id',-1);
user.save({
params: user.getData(),
callback: function (records, operation) {
Ext.Msg.alert('User Save', operation.getResponse().responseText);
},
methodName:'POST',
method:'POST',
});
}
}
If you are using model then you need to use only actionMethods.
actionMethods Mapping of action name to HTTP request method. In the basic AjaxProxy these are set to 'GET' for 'read' actions and 'POST' for 'create', 'update' and 'destroy' actions. Defaults to:
{
create: 'POST',
read: 'GET',
update: 'POST',
destroy: 'POST'
}
In this FIDDLE, I have created a demo using model and button. I hope this will help/guide your to achieve your requirement.
*NOTE I have used only local url. I don't have any live url. You can see in network request data is sending in url.
CODE SNIPPET
Ext.application({
name: 'Fiddle',
launch: function () {
Ext.define('MyModel', {
extend: 'Ext.data.Model',
fields: ['version', 'code', 'framework', 'frameworkVersion', 'fiddleid', 'inspector', 'session'],
proxy: {
type: 'ajax',
url: 'local', //I am providing local url in your case you can provide your rest webservice url
useDefaultXhrHeader: false,
actionMethods: {
create: 'POST', //When you want to save/create new record
read: 'GET', //When you want to get data from server side
update: 'PUT', //When you want to update the record
destroy: 'DELETE' //When you want to delete the record
},
paramAsJson: true // if You want to encode the data from clint side then it should be true otherwise false
}
});
Ext.create({
fullscreen: true,
renderTo: Ext.getBody(),
xtype: 'panel',
title: 'sending data using POST method in sencha extjs rest webservice',
padding: 10,
items: [{
xtype: 'button',
text: 'Send Data',
margin: 15,
style: {
background: '#ccc'
},
height: 50,
width: '100%',
handler: function () {
var MyModel = Ext.create('MyModel', {
version: "2",
code: '',
framework: "291",
frameworkVersion: "",
fiddleid: "",
inspector: "",
session: ''
});
MyModel.save({
success: function (records, operation) {
//When data will save on sever side then response will come in success
Ext.Msg.alert('User Save', 'Data saved');
},
failure: function (records, operation) {
//If some error occure on server side the reponse will come in failure function
Ext.Msg.alert(`Error ${operation.error.status}`, operation.error.statusText);
}
});
}
}]
});
}
});

How Get Data From Json in Extjs

i have this store. my problem, i want get data from this Json.
Ext.define('DWP.store.Test', {
extend: 'Ext.data.Store',
fields: [
{name: 'field1'},
{name: 'field2'},
],
proxy: {
type: 'ajax',
url : 'resources/data/load.php',
reader: {
type: 'json',
rootProperty: 'root'
}
},
autoLoad: true,
});
i tried this code to get the data from Json, but not worked. how can i get data from json?
var json = Ext.encode(Ext.pluck(store.data.items, 'store'));
Since you have autoLoad: true this should looks like:
var store = Ext.getStore('DWP.store.Test');
store.each(function (record, id) {
console.log(record.get('field1'));
});
if you prefer autoLoad: false this looks like:
var store = Ext.getStore('DWP.store.Test');
store.load({
callback: function (records, operation, success) {
store.each(function (record, id) {
console.log(record.get('field1'));
});
}
});

how load data from Json to Json in Extjs

in my case, i want, if click the button "drilldown" chart load new data from another Json. This is my Store
Ext.define('DWP3.store.konten.Coba', {
extend: 'Ext.data.Store',
alias: 'store.coba',
storeId: 'coba',
uses: [
'Ext.data.Store'
],
fields: [
{name: 'periode'},
{name: 'Teknik'},
],
proxy: {
type: 'ajax',
url : 'resources/data/load2.php',
reader: {
type: 'json',
rootProperty: 'view_sum1'
}
},
autoLoad: true,
});
}
i want load the new data also from json which converted from mySQL. i want load this one :
newData : function(){
var store = Ext.create('Ext.data.Store', {
fields: [
{name: 'periode'},
{name: 'prodi'},
],
proxy: {
type: 'ajax',
url : 'resources/data/load3.php', //from another load in php
reader: {
type: 'json',
rootProperty: 'view_sum2' // another root
}
},
autoLoad: true,
});
return store;
}
i call the function like this in my chart.js:
{
text:'Test',
handler:function(){
this.down('cartesian').getStore().newData();
}
}
in this case i want if click the button my store load new data but from another Json which converted from mySQL. it is possible to do that?or do you have any solution from my case?
I would advice you to declare your 2nd store the same way you did with the first one. And simply load it inside the handler of your drilldown :
handler : function() {
Ext.getStore('your new store ID').load();
}
But I'm not really sure what you really want, your question isn't clear to me.

Access the Google api using Extjs 4.2

I have tried to access the following url using Extjs sencha. Data not loaded on run time. When i try to access the url on browser i am able to see the data
https://maps.googleapis.com/maps/api/geocode/json?address=1600+Amphitheatre+Parkway,+Mountain+View,+CA&sensor=true&key=API_KEY.
I am newbie for Extjs.I know i am trying to load the cross domain data.But i dont know how to achieve this. Please somebody help me
Ext.define('MyApp.store.MyJsonStore', {
extend: 'Ext.data.Store',
requires: [
'MyApp.model.MyModel',
'Ext.data.proxy.Ajax',
'Ext.data.reader.Json'
],
constructor: function(cfg) {
var me = this;
cfg = cfg || {};
me.callParent([Ext.apply({
model: 'MyApp.model.MyModel',
storeId: 'MyJsonStore',
proxy: {
type: 'ajax',
url: 'https://maps.googleapis.com/maps/api/geocode/json?address=Barcroft + Plaza +Apartments ,+22041&sensor=true&key=API_KEY',
reader: {
type: 'json'
}
},
listeners: {
load: {
fn: me.onJsonstoreLoad,
scope: me
}
}
}, cfg)]);
},
onJsonstoreLoad: function(store, records, successful, eOpts) {
Ext.MessageBox.show('Loaded');
}
});
Instead of Ajax proxy i have tried jsonp also.If i use jsonp then i am getting uncaught syntaxerror unexpected token .I have searched so many blogs, forums everybody talked about adding callback but i am calling third party api
I have tried following code for jsonp.I Have tried both ways like with and without callback key
proxy: {
type: 'jsonp',
url: 'https://maps.googleapis.com/maps/api/geocode/json?address=1600+Amphitheatre+Parkway,+Mountain+View,+CA&sensor=true&key=API_KEY',
callbackKey: 'Mycallback',
reader: {
type: 'json',
root: 'results'
}

Categories