Move Ajax respose data to store in Sencha touch - extjs

how to add or save data that getting from ajax request to store or to model sencha touch 2
I have controller, store and a model. Ext.Ajax.request(); is called from controller and when it was successful I want move that data to store in json format
Ext.define('Myapp.controller.HomeController', {
extend: 'Ext.app.Controller',
config: {
control: {
"#homepage_id": {
show: 'onHomepage_idShow'
}
}
},
onHomepage_idShow: function (component, eOpts) {
var token = localStorage.getItem('Token'); //**************************************
console.log('test home', token);
var customHeaders = {
'Content-Type': 'application/json; charset=utf-8',
'ApiAuth': token
};
this.callAjax(customHeaders);
},
callAjax: function (headers) {
var customHeaders = headers;
Ext.Ajax.request({
url: 'http://localhost:9098/Folder/json/Get',
params: Ext.util.JSON.encode({
folderId: 0
}),
method: 'POST',
headers: customHeaders,
success: function (response) {
var decode_text = Ext.decode(response.responseText);
/*I want to add decode_text to a store from this contoller..*/
//var storez = Ext.data.StoreManager.lookup('commomStore_id');//****************
//this.getDataList().setStore(storez);
console.log(storez);
// process server response here
},
failure: function (response, opts) {
Ext.Msg.alert('Error', 'Error while submitting the form');
console.log(response.responseText);
},
scope: this
});
My Store:
Ext.define('Myapp.store.CommonStore', {
extend: 'Ext.data.Store',
requires: [
'Myapp.model.AuthTokenmodel'],
config: {
autoLoad: true,
model: 'Myapp.model.AuthTokenmodel',
storeId: 'commonStote_id',
proxy: {
type: 'localstorage',
id: 'commomStore_id',
reader: {
type: 'json'
}
},
fields: [{
name: 'authtoken'
}]
}
});

For that you have to parse your response and create Myapp.model.AuthTokenmodel objects out of it and then add those objects to your store using add method.
BTW if your response is in JSOn format you should parse it to JSON instead of text like this:
var respObj = Ext.JSON.decode(response.responseText);
console.log(respObj);
then create model objects using respObj data and add those to store:
var storez = Ext.data.StoreManager.lookup('commomStore_id');
storez.add(Ext.create('Myapp.model.AuthTokenmodel', {authtoken : respObj.authToken}));

Ext.getStore('commomStore_id').loadData(decode_text);

Related

How to post an array to mvc controller

I want to post java script object to mvc controller
$(document).ready(function () {
var table = $('#my_table_1').DataTable({
"paging": true,
"ordering": true,
"info": true,
"search": true,
"pageLength": 100
});
var d = '';
var data3 = table.on('search.dt', function () {
//number of filtered rows
// console.log(table.rows({ filter: 'applied' }).nodes().length);
//filtered rows data as arrays
d = table.rows({ filter: 'applied' }).data()
});
console.log(table.rows({ filter: 'applied' }).data());
$('#excel2').click(function (e) {
//var data3 = table.on('search.dt', function () {
// console.log(table.rows({ filter: 'applied' }).data());
// console.log(data3);
//});
console.log(d);
$.ajax({
url: '/Administrator/TestDownload',
type: 'POST',
data: {data:d},
cache: false
}).done(function (response) {
alert(d);
});
});
});
//Controller code:
public JsonResult TestDownload(String[] data)
{
return Json(data,JsonRequestBehavior.AllowGet);
}
I am getting null in controller as a data parameter
Expected: Want to get data object from view to controller as a parameter in controller.
Actual: Data parameter in controller is null
You must check your d variable correct array format.
I tested in my side with var d = ["test",2,3] and in controller it get correct data.
$('#excel2').click(function (e) {
//var data3 = table.on('search.dt', function () {
// console.log(table.rows({ filter: 'applied' }).data());
// console.log(data3);
//});
d = ["test",2,3]
console.log(d);
$.ajax({
url: '/Administrator/TestDownload',
type: 'POST',
data: {data:d},
cache: false
}).done(function (response) {
alert(d);
});
});
});
An example that works:
var test = ["This", "is", "a", "test"];
$.ajax({
type: "POST",
traditional: true,
url: "Administrator/TestDownload",
data: { array: test }
}
});
The controller(in VB.net):
Function TestDownload(array As String()) As ActionResult
//do something
End Function
Why not try stringifying the data and setting the contentType
$.ajax({
url: '/Administrator/TestDownload',
data: JSON.stringify({data:d}), // use JSON stringify
type: 'POST',
contentType: "application/json; charset=utf-8", //add this
cache: false
}).done(function (response) {
alert(d);
});
});

Extjs 6.5 Treestore not loading data from server

I'm migrating a small app from Extjs4 to 6.5. The problem is the treestore, which is very simple, but I cannot find out why the server routine is not called and also the exception-events are not called. I must overlook something, but I cannot find it.
The tree store is:
Ext.create("Ext.data.TreeStore", {
fields: ['mnu_Name'],
proxy: {
type: 'ajax',
headers: { "Content-Type": 'application/json' },
api: { read: '/Secure/WebServices/PageLayout.asmx/LoadMenuII' },
reader: {
type: 'json',
root: function (o) {
if (o.d) {
return o.d.data;
} else {
return o.children;
}
}
},
listeners: {
exception: function () {
alert('exception');
}
}
},
listeners: {
exception: function () {
alert('exception');
}
}
});
When I call the server routine with a plain Ajax call is works fine.
Ext.Ajax.request({
async: true,
url: '/Secure/WebServices/PageLayout.asmx/LoadMenuII',
headers: { 'Content-Type': 'application/json' },
success: function (response, options) {
//Extract data from the response
var data = Ext.decode(response && response.responseText || null, true);
//check op success=false
if (!data || data.success !== true) {
var errNumber = data && data.errNumber || 'Unknown',
errDescription = data && data.errDescription || 'Unknown';
Ext.Msg.alert("Warning", Ext.String.format(thisComp.errFormat, 'Warning in loading the menu definitione.', errNumber, errDescription), null, this, 9000)
return;
}
}
});
Any suggestion what I missed?
Thanks.
Arno

Extjs Store Getting Data from Post

Good Morning,
I have a search endpoint that I that works when I call it like this:
Ext.Ajax.request({
url: '/Search/False',
method: 'POST',
headers: { 'Content-Type': 'application/json' },
params: 'Attribute:ClosedDT;Value:2014-12-16',
success: function(conn, response, options, eOpts) {
alert(conn.responseText);
},
failure: function(conn, response, options, eOpts) {
alert(conn.responseText);
}
});
I want to use a proxy to load it into a store directly. After much googling I have tried this and i get back a POST /Search/False?_dc=1418738135737 net::ERR_EMPTY_RESPONSE
See current code below:
var proxyDefinition = {
type : 'rest',
api : {
read : '/Search/False'
},
actionMethods : {
read : 'POST'
},
reader : {
type : 'json'
},
paramsAsJson:true
};
returnValue = Ext.create('Ext.data.Store', {
model: 'Mdl1',
proxy: proxyDefinition
});
returnValue.load({params: 'Attribute:ClosedDT;Value:2014-12-16'});
The params config needs to be an object, not a string. Extjs will encode it for you because of paramsAsJson: true.
You should use:
params: {
Attribute: 'CloseDT',
Value: '204-12-16'
}

ngResource: Send data in URL instead of body

I'm trying to save a object with ngResource this way:
var Tasks = $resource("http://example.com/task", {
task: {
id: '#id'
}
}, {
'save': {
method: 'POST',
params: {
key: "abc"
}
}
});
var task = new Tasks();
task.id = "123";
task.$save();
This is generating this URL:
http://example.com/task?task=%7B%22id%22:%22#id%22%7D&key=abc
Why is the "#id" string not getting replaced with the actual data? Why is the key parameter not showing up?
I would highly suggest you modify the api to not pass json strings, but if you absolutely have to you can do something like the following
var Tasks = $resource("http://example.com/task", {
task: '#json'
}, {
'save': {
method: 'POST',
params: {
key: "abc"
}
}
});
var task = new Tasks();
task.id = '123';
task.json = angular.toJson(task);

3 different store from the same service

I use a json service for my grid. There are 3 grids where i use the same service. What i do now is load this service each time for the grids
storeGridEvents = new Ext.data.Store({
model: 'intern',
proxy: {
url: storeUrl,
reader: {
type: 'json',
root: 'data'
}
}
});
storeGridEventData = new Ext.data.Store({
model: 'dataEvents',
proxy: {
url: storeUrl,
reader: {
type: 'json',
root: 'data'
}
}
});
storeGridEventLocation = new Ext.data.Store({
model: 'locations',
proxy: {
url: storeUrl,
reader: {
type: 'json',
root: 'data'
}
}
});
Is there a way i load the service just once and use it for three models? That would save some loading time.
You can load store once and then clone it so you will have two more local copies.
Update: here is example of simple cloning store function:
cloneStore: function(store, storeClass) {
var new_st = Ext.create(storeClass),
recs = [];
store.each(function(r) { recs.push(r.copy)});
new_st.add(recs);
return new_st;
}

Resources