Develop Reference

ExtJS jsonp access cross domain cgi file but respond syntaxError

I define a store in my extjs5 MVC project. I want to access cross domain cgi file so set proxy type: 'jsonp'.
After I load the store the Chrome show me "Uncaught SyntaxError: Unexpected token :"
Here is my store:
Ext.define('Myproject.store.MyStore', {
extend: 'Ext.data.Store',
model: 'Myproject.model.MyStore',
proxy: {
type: 'jsonp',
url: 'http://mylink:8000/setting.cgi',
extraParams: {
act: 'get_lib_list'
},
reader: {
type: 'json'
}
}
});
Response content:
{ "success": false, "error_code": 5006, "error_msg": "No such file or directory (-2)" }
How do I fix this problem?
Thanks

How do I get ExtJS 5 AjaxProxy to save?

I'm upgrading an app to ExtJS 5, and I can't seem to get a grid using RowEditing to POST the edited record back to my server.
Ext.define("MyRecordDef", { extend: "Ext.data.Model" });
var MyEditor = Ext.create('Ext.grid.plugin.RowEditing', { clicksToEdit: 1 });
var MyStore = new Ext.data.Store({
model: "MyRecordDef",
autoSync: true,
proxy: {
type: "ajax",
url: "ajaxurl.aspx",
batchActions: false,
extraParams: { Command: 'Save' },
reader: { type: "json", rootProperty: "rows" },
writer: { type: "json", encode: true, writeAllFields: true }
}
});
var MyGrid = new Ext.grid.GridPanel({
store: MyStore,
plugins: [ MyEditor ],
columns: [
{
id: "fieldtoedit",
dataIndex: "fieldtoedit",
editor: new Ext.form.NumberField()
}
]
});
The row editor comes up, I'm able to change the value and click the Update button, but then nothing happens. No request is made, no errors logged in the console.
I added the following:
MyGrid.on('edit', function (e) {
alert('You are Editing ' + e.context.record.id);
MyStore.sync(); // attempt to force a sync
});
I get the alert with the correct record number, but still no AJAX request. It's like ExtJS is completely ignoring the writer.
I don't have different endpoints for each CRUD operation, so I'm not using the api config option, it should be using the url.

First of all you must define rootProperty on writer when you use encode: true.
Then after adding fields to MyRecordDef requests are sended.
Working sample: http://jsfiddle.net/jjVwR/3/ (saving don't work, but you can see on console that request is send)

ExtJS undefined function

I try to load a store, but for some reason I get this error in Google Chrome(latest version):
Uncaught TypeError: Cannot call method 'apply' of undefined ext-all-debug.js:8586
fire ext-all-debug.js:8586
Ext.define.continueFireEvent ext-all-debug.js:24623
Ext.define.fireEvent ext-all-debug.js:24601
Ext.define.onProxyLoad ext-all-debug.js:50186
Ext.define.processResponse ext-all-debug.js:39168
(anonymous function) ext-all-debug.js:39381
Ext.apply.callback ext-all-debug.js:6422
Ext.define.handleResponse ext-all-debug.js:18769
(anonymous function) ext-all-debug.js:1815
(anonymous function)
and this one in Internet Explorer 8:
Message: 'fireFn' is null or not an object
while FireFox(latest version) seems to ignore it.
I have inserted some new lines in ext-all-debug.js, so the line numbers may be off by 5-10 lines.
This is the store:
Ext.define("FI.store.units.InstallBaseStore", {
extend:'Ext.data.Store',
requires: "FI.model.units.InstallBaseModel",
model: "FI.model.units.InstallBaseModel",
storeId: 'installBaseStore',
pageSize:10,
proxy: {
type: 'jsonp',
url: urls.QSUrl+"/search",
limitParam: 'undefined',
startParam: 'offSet',
pageParam: 'undefined',
extraParams: {
searchString: '*:*',
index: "fleet",
role: "Admin"
},
reader: {
root: 'results.results',
totalProperty: 'numFound',
model: 'FI.model.units.InstallBaseModel'
}
},
listeners:{
beforeload: {
fn:function(){
console.log("BEFORE LOAD");
this.getProxy().setReader({
root: 'results.results',
totalProperty: 'numFound',
model: 'FI.model.units.InstallBaseModel'
});
console.log(this.getProxy().getReader());
}
}
}
});
Any ideas?

Put the proxy in the model, and do the reader like this:
...
proxy:{
type:'ajax',
url:'...',
reader:{
type:'json',
root:'...'
}
}

Infinite scrolling grid and MVC

Let's say we follow an original article http://www.sencha.com/learn/the-mvc-application-architecture and have such store:
Ext.define('AM.store.Users', {
extend: 'Ext.data.Store',
model: 'AM.model.User',
autoLoad: true,
proxy: {
type: 'ajax',
url: 'data/users.json',
reader: {
type: 'json',
root: 'users',
successProperty: 'success'
}
}
});
And we decided to implement an infinite scrolling grid. To do that we need to remove autoLoad: true and invoke store.guaranteeRange(...) manually.
So what is the best place for doing so?

Ext.define('AM.store.Users', {
extend: 'Ext.data.Store',
model: 'AM.model.User',
autoLoad: true,
remoteSort: true,
buffered: true,
pageSize: 100,
proxy: {
type: 'ajax',
url: '/postdata/list',
limitParam: 'size',
startParam: undefined,
reader: {
type: 'json',
root: 'data',
successProperty: 'success'
}
}
});
Demo here http://ext4all.com/post/extjs-4-1-grid-infinite-scroll-in-mvc

Somewhere where you render your grid. You can overwrite afterRender() method, or if it's modal grid/dialog - load the store before presenting it.
Couple side note (I'm trying to make a point that autoLoad usually is false for all stores:
if you ever will use any authentication in your application - you
will have to disable autoLoad on all stores.
if you have more then couple stores (say 5-10+?) it's highly recommended to disable that too. You don't want all of them loading at the same time when application is starting.
very often you need to have guarantee that something happened after the store is loaded and then again you disable autoLoad, subscribe to load event and load() the store manually.

Sencha Touch: ScriptTagProxy url for create/update functionality

I've a ScriptTagProxy and I'm able to receive the data, but now I wanted to update a record. I've specified an url but only one url. Do I have to handle all the actions (read, update, create, delete) with this url?
If yes: how does the action is applied to the url?
If not: how I can specify more urls?
Here is the code I have so far:
app.stores.entries = new Ext.data.Store({
model: "app.models.Entry",
storeId: 'app.stores.entries',
proxy: {
type: 'scripttag',
url: 'http://myurl.de/getEntries.php',
extraParams: {
username: Ext.util.JSON.decode(window.localStorage.getItem('settings')).username,
password: Ext.util.JSON.decode(window.localStorage.getItem('settings')).password
},
reader: {
type: 'json'
},
writer: {
type: 'json'
}
}
});
I've read in the docs that you can pass an config object to the save function of a model to configurate the proxy.
So I tried following:
entry.save({
url: 'http://mysite.com/updateEntry.php',
extraParams: {
username: Ext.util.JSON.decode(window.localStorage.getItem('settings')).username,
password: Ext.util.JSON.decode(window.localStorage.getItem('settings')).password,
entry: entry
},}
As you see there is a url specified.
But I still get the error:
Uncaught Error: You are using a ServerProxy but have not supplied it with a url.
);
Same behaviour when using AjaxProxy or RestProxy for example :(

Hering,
With your first block of code you ask:
Question 1) "Do I have to handle all the actions (read, update, create, delete) with this url?"
The answer is yes.
Question 2) "If yes: how does the action is applied to the url?"
According to the Sencha source code you need to define the actionMethods like so:
myApp.stores.Things = new Ext.data.Store({
model: "Things", proxy: {
type: 'ajax',
actionMethods: {
create: 'POST',
read: 'GET',
update: 'PUT',
destroy: 'DELETE'
},
url: 'jsontest.json',
reader: {
type: 'json',
root: 'things'
}
},
autoLoad: true
});
If you delete, create or edit a record you must call:
store.sync();
There is also a "autoSave" property but it only syncs on edits, not removes.
This will send over the things that have changed or been deleted as part of the request payload, it is your responsibility to parse the json and handle it.

Hering,
I was reading the documentation here, I found this example in the Model class:
Ext.regModel('User', {
fields: ['id', 'name', 'email'],
proxy: {
type: 'rest',
url : '/users'
}
});
But above you don't show your Model for app.models.Entry, have you tried that?