I have a grid in Extjs 4.2, the store for it is configured as below.
var userStore = Ext.create('Ext.data.JsonStore', {
model: 'User',
proxy: {
type: 'ajax',
api: {
create: '/pwbench/form/products/fctrmgmt/data.json',
read: '/pwbench/form/products/fctrmgmt/data.json',
update: '/pwbench/form/products/fctrmgmt/data.json',
destroy: '/pwbench/form/products/fctrmgmt/data.json'
},
reader: {
type: 'json'
},
writer: {
type: 'json'
}
},
autoLoad: true
});
Inside the grid, on clicking save I have the following configured.
handler: function() {
var recordsArray = new Array();
var dataRecords = new Array();
recordsArray = grid.getStore().data.items;
for (var i = 0; i < recordsArray.length; i++) {
console.log(recordsArray[i].data);
dataRecords.push(Ext.encode(recordsArray[i].data));
}
console.log(dataRecords.length);
Ext.Ajax.request({
url: 'mainpage.jsp',
params: {
records: dataRecords
},
success: function(response){
var text = response.responseText;
console.log(text);
userStore.sync();
userStore.load();
}
});
}
I have a java class which is able to read the data sent by the ajax request and then I overwrite the data.json file which the store uses to fetch the data. The json file is overwritten without any issue, but the problem is that when I call userStore.load() after sync, it displays the old data, prior to making any changes. Even on refreshing the grid or refreshing the whole page it displays the old data, only when I refresh my entire project in Eclipse and reload the page, then it displays the new overwritten data.
Is this some cache problem? Can someone please tell me what is the issue?
you should put the load in the success callback of the sync
userStore.sync({
success: function() {
userStore.load...
Related
I study examples on ExtJs 6 and try to repeat. Here is an example of changing the remote storage to the local one https://habr.com/en/en/post/138054/ and trying to repeat.
The difficulty was caused by these code fragments.
UsersApp.Utils.ping({
success: this._onPingSuccess, // Internet is
failure: this._onPingFailure // No Internet
}, this);
where
_onPingSuccess: function(){
// сеть есть
var win = Ext.ComponentQuery.query('#usersWindow')[0];
var storeLocal = this.getStore('storeLocal');
var store = this.getStore('store');
var grid = win.getComponent('NamesGrid');
UsersApp.Utils.ping is a wrapper over Ext.Ajax.request, but the author does not disclose the code. When _onPingSuccess or _onPingFailure is executed, this refers to the Window object that does not have a getStore method.
Full controller code
Ext.define("Apple.controller.Main", {
extend: 'Ext.app.Controller',
requires: [
'Apple.utils.Ping',
'Apple.store.OrderStore',
'Apple.store.UserStore'
],
init: function(){
Ext.define("Session", {
extend: "Ext.data.Session",
});
var session = Ext.create("Session");
var store = Ext.create("Apple.store.OrderStore", {
storeId: 'OrderStore',
session: session
});
store.setProxy(
Ext.create('Ext.data.RestProxy', {
type: 'rest',
url: 'https://localhost:5001/api/order',
api: {
create: 'https://localhost:5001/api/order',
read: 'https://localhost:5001/api/order',
update: 'https://localhost:5001/api/order',
destroy: 'https://localhost:5001/api/order'
},
writer: {
type: 'json',
writeAllFields : false, //just send changed fields
allowSingle : true //always wrap in an array
},
reader: {
type: 'json',
rootProperty: 'data',
successProperty: 'success'
}
})
);
var local = Ext.create("Apple.store.OrderStore", {
storeId: 'OrderStoreLocal',
session: session
});
local.setProxy(
Ext.create('Ext.data.proxy.LocalStorage', {
type: 'localstorage',
id : 'Orders'
})
);
local.addListener('load', function(){
Apple.utils.Ping.sendPing({
success: this._onPingSuccess,
failure: this._onPingFailure
}, this);
}, this);
// initiate loading in local storage
local.load();
},
_onPingSuccess: function(response, options){
var store = this.getStore('OrderStore');
var local = this.getStore('OrderStoreLocal');
var grid = Ext.getCmp('LayC0Grid');
// find out the number of records in the local storage
localCnt = local.getCount();
// check the status of the local storage,
// figure out if synchronization is needed
if (localCnt > 0){
// synchronization is needed, add entries
// one by one from local storage
// to server
for (i = 0; i < localCnt; i++){
var localRecord = local.getAt(i);
var deletedId = localRecord.data.id;
delete localRecord.data.id;
store.add(localRecord.data);
localRecord.data.id = deletedId;
}
// save server storage
store.sync();
// we clear local storage
for (i = 0; i < localCnt; i++){
local.removeAt(0);
}
}
store.load();
// we connect server storage to the table
grid.reconfigure(store);
grid.store.autoSync = true;
},
_onPingFailure: function(response, options){
var local = this.getStore('OrderStoreLocal');
var store = this.getStore('OrderStore');
var grid = Ext.getCmp('LayC0Grid');
// set table storage to local
grid.reconfigure(storeLocal);
grid.store.autoSync = true;
}
});
How do I get storage in _onPingSuccess and _onPingFailure without passing them explicitly?
Assuming that the wrapper has been written properly (read as: following ExtJS' typical usage patterns), you can set the scope property when calling the sendPing method, as follows:
local.addListener('load', function(){
Apple.utils.Ping.sendPing({
success: this._onPingSuccess,
failure: this._onPingFailure,
scope: this
}, this);
}, this);
If, on the other hand, the wrapper wasn't written properly you can then resort to the bind method, as follows:
local.addListener('load', function(){
Apple.utils.Ping.sendPing({
success: this._onPingSuccess.bind(this),
failure: this._onPingFailure.bind(this)
}, this);
}, this);
At this point the function will run in the scope of the controller, so you should be able to retrieve your store easily.
I want to save value received by AJAX response to Ext JS proxy in a JavaScript array. My code look like this:
var nodelist = [];
var store = Ext.create('Ext.data.Store', {
model: 'Nodes',
url: 'sequencing',
proxy: {
type: 'ajax',
url: 'sequencing',
reader: {
type: 'json',
root: 'Nodes'
}
},
listeners: {
'load': function() {
var StoreLength = store.data.length;
for (var i = 0; i < StoreLength; i++) {
nodelist.push(store.data.items[i].data.text);
};
}
},
autoLoad: true
});
store.load();
var node_rec = nodelist;
But the store.load(); does not call the load listener above? Can some one solve my problem?
store.load() is called at the exit of current event handler. Loading of a data store happens asynchronously so by the time it loads the store the execution continues from the next line. So you cannot directly use the nodelist variable after calling load because load will not be called at that point so nodelist will be empty even though the store gets populated eventually.
So you can add a callback to the load method which gets called once the store loads.
store.load({
callback: function(records){
console.log(records); //verify whether you are getting records from the URL
}
});
I am creating a dynamic grid (should be paginated) using the data from a POST rest request to server (code below). I am passing the pageid and pagesize to the server during the first request (on load) and it responds back with the appropriate data. I have docked a paging toolbar to grid and now I want to enable pagination on click of next, last etc of the pager. How do I POST a request to server and get back the appropriate data back to reconfigure the grid with the next page's data?
var screenResults = {};
screenResults.pageid =1;
screenResults.pagesize = 10;
screenResults = Ext.JSON.encode(screenResults);
Ext.Ajax.request({
url : 'http://localhost/service/getGridData',
method : 'POST',
timeout: 5000000,
scope: this,
dataType: 'json',
jsonData: screenResults,
success: function(response){
var grid = Ext.getCmp("idSearchResultsGrid");
var gridData = Ext.decode(response.responseText);
var fields = gridData.data.fields;
var newColumns = gridData.data.columns;
var arr = gridData.data.data;
var data = [];
for(var i=0;i<arr.length;i++){
var obj = arr[i].resultsMap;
data.push(obj);
}
var newStore = Ext.create('Ext.data.Store', {
storeId: 'DynamicGridStore',
pageSize:10,
fields: fields,
data: data
/*
proxy: {
type: 'ajax',
url : 'http://localhost/service/getGridData',
method : 'POST',
timeout: 5000000,
jsonData: screenResults,
actionMethods: {
read : 'POST'
}
}
*/
});
//debugger;
/*
globalStore = newStore.load({
params: {
start: 0,
limit: 10
}
});
*/
var pagingBar = Ext.create('Ext.PagingToolbar', {
pageSize: 10,
store: newStore,
dock: 'bottom',
displayInfo: true
});
grid.removeDocked(grid.getDockedItems()[1]);
grid.addDocked(pagingBar);
grid.reconfigure(newStore, newColumns);
},
failure: function(response){
console.log(response);
}
});
},
First of all, you don't need to explicitly do AJAX calls like that. They will be done for you behind the scenes by the store's proxy — provided that the proxy is properly configured (yours is commented out at the moment).
Your task is very trivial and covered by multiple examples. Have a look at this one. Click on Details on the right hand side to see the code.
Also see Ext.toolbar.Paging documentation.
The below is my MyStore.js:
Ext.define('MyApp.store.MyStore', {
extend: 'Ext.data.Store',
model: 'MyApp.model.Note',
autoLoad: true,
proxy: {
type: 'ajax',
api: {
/* I want to change the following two filepaths */
read: 'data/notesMar2013.json',
update: 'data/notesMar2013.json'
},
reader: {
type: 'json',
root: 'data',
successProperty: 'success'
}
}
});
I am trying to change the read and update values in api of MyStore through controller as follows:
var notesStore = Ext.getStore('MyStore');
notesStore.on('load',function(notesStore){
var proxy = notesStore.getProxy();
Ext.apply(proxy.api,{
/* Changing the file paths here */
read: 'data/notesApr2013.json',
update: 'data/notesApr2013.json'
})
notesStore.load();
},this,{single:false});
//
console.log(notesStore);
By using the above function, I am trying to update MyStore but it is not happening. When I checked in chrome console the values are changed successfully but not updating or overriding the store even I used notesStore.load(). What could be the problem?
I referred the below links
link1
link2
Answer: The code was working fine. Let me explain my problem: I was showing the contents from the store on a container and initially, the container was filled with some content and the height was fixed. If I even add any content to the container then it will become hidden as the container is with fixed height. Till now, the content was being appended to the default content instead of removing the default content and then adding. That was the actual problem.
That should work without any problem, hence you have a error at any other point. Please take a look at the console in this JSFiddle. In here's the test-code I used
Ext.define('MyApp.model.Note',{extend:'Ext.data.Model'});
Ext.define('MyApp.store.MyStore', {
extend: 'Ext.data.Store',
model: 'MyApp.model.Note',
proxy: {
type: 'ajax',
getUrl: function(request) {
console.log('fetched request url');
console.log(this.api[request.action]);
return request.url || this.api[request.action] || this.url;
},
api: {
/* I want to change the following two filepaths */
read: 'data/notesMar2013.json',
update: 'data/notesMar2013.json'
},
reader: {
type: 'json',
root: 'data',
successProperty: 'success'
}
}
});
var store = Ext.create('MyApp.store.MyStore');
console.log('The origin API');
console.log(store.getProxy().api);
store.load();
var proxy = store.getProxy();
var newApi = {read: 'data/2013.json', update: 'data/2013.json' };
Ext.apply(proxy.api,newApi);
console.log('The changed API');
console.log(store.getProxy().api);
store.load();
I'm having a heck of a time trying to load external json into a Sencha Touch app. I can define my data within the app, or with an external json file and all's fine. Then I move my json file to a remove server, change my proxy to type: 'scripttag' to take care of jsonp issues, and then I have issues. When I look at my page resources I see that the json file DID load, but it doesn't populate my list as it does with my local json file.
Using local json file (this works)
var jsonStore = new Ext.data.Store({
model: "Person",
proxy: {
type: 'ajax',
url: 'http://dev.liftstudios.ca/data.json',
reader: {
type: 'json'
}
},
autoLoad: true
});
var jsonPanel = {
title: "json",
items: [
{
xtype: 'list',
store: jsonStore,
itemTpl:itemTemplate,
singleSelect: true
}
]
};
Using the same json file, loaded from a remote host.
This loads the file, but doesn't populate the list.
var jsonStore = new Ext.data.Store({
model: "Person",
proxy: {
type: 'scripttag',
url: 'http://www.server.com/data.json',
reader: {
type: 'json'
}
},
autoLoad: true
});
var jsonPanel = {
title: "json",
items: [
{
xtype: 'list',
store: jsonStore,
itemTpl:itemTemplate,
singleSelect: true
}
]
};
There's probably something embarrassingly simple that I'm missing here, but I'm not sure what that something is. Any help will be greatly appreciated.
Changing the proxy type to scripttag does not make any sense . If you want to load a scripttag store, you have to implement a callback function as well. If you want do make cross platform ajax calls with the existing json proxy , you can test it on the browser by disabling the web security on chrome.
The cross-domain problem can be solved by starting google chrome from the terminal by this command google-chrome --args --disable-web-security
Check out this link for more information
http://www.senchatouchbits.com/7/cross-domain-ajax-requests.html
Hope it will help...
Use type jsonp for proxy type in the store
var jsonStore = new Ext.data.Store({
model: "Person",
proxy: {
type: 'jsonp',
url: 'http://www.server.com/data.json',
reader: {
type: 'json'
}
},
autoLoad: true
});
And Implementing on the server side:
The remote server side needs to be configured to return data in this format. Here are suggestions for how you might achieve this using Java, PHP and ASP.net:
Java:
boolean jsonP = false;
String cb = request.getParameter("callback");
if (cb != null) {
jsonP = true;
response.setContentType("text/javascript");
} else {
response.setContentType("application/x-json");
}
Writer out = response.getWriter();
if (jsonP) {
out.write(cb + "(");
}
out.print(dataBlock.toJsonString());
if (jsonP) {
out.write(");");
}
PHP:
$callback = $_REQUEST['callback'];
// Create the output object.
$output = array('a' => 'Apple', 'b' => 'Banana');
//start output
if ($callback) {
header('Content-Type: text/javascript');
echo $callback . '(' . json_encode($output) . ');';
} else {
header('Content-Type: application/x-json');
echo json_encode($output);
}
ASP.net:
String jsonString = "{success: true}";
String cb = Request.Params.Get("callback");
String responseString = "";
if (!String.IsNullOrEmpty(cb)) {
responseString = cb + "(" + jsonString + ")";
} else {
responseString = jsonString;
}
Response.Write(responseString);
http://docs.sencha.com/ext-js/4-0/#!/api/Ext.data.proxy.JsonP
var jsonStore = new Ext.data.Store({
model: "Person",
proxy: {
type: 'jsonp',
url: 'http://www.server.com/data.json',
reader: {
type: 'json'
}
},
autoLoad: true,
crossDomain: true,
});
crossDomain: true,try this