How to load store via POST request - extjs

I need to load store via cross domain POST request
Ext.define('MyDesktop.desktop.store.DesktopShortcutStore', {
extend: 'Ext.data.Store',
requires: [
'MyDesktop.desktop.model.DesktopShortcutModel'
],
constructor: function(cfg) {
var me = this;
cfg = cfg || {};
me.callParent([Ext.apply({
storeId: 'DesktopShortcutStore',
model: 'MyDesktop.desktop.model.DesktopShortcutModel',
autoLoad: false,
proxy: {
type: 'ajax',
url: getApiUrl() + 'account/desktop-shortcuts-list',
cors: true,
reader: {
type: 'json',
rootProperty: 'items',
successProperty: 'success'
},
paramsAsJson: true,
actionMethods: {
read: 'POST'
},
extraParams: {
fff: 'zzz'
}
}
}, cfg)]);
}
});
But I have OPTIONS request with no "fff" param.
Cross domain via jQuery is working correctly.
Using
Ext.Ajax.useDefaultXhrHeader = false;
Ext.Ajax.cors = true;
Is not helps.
I cannot find any information in docs.

This should be the easiest solution. Loading a store directly via a proxy and POST might require a few overrides, not sure it's worth the effort (needs more investigation).
var store = ...;
Ext.Ajax.request({
method: 'POST',
url: '...',
withCredentials: true, // for identity cookies
success: function(response) {
// given json array is returned
var data = Ext.decode(response.responseText);
Ext.each(data, function(r) {
store.add(r);
});
}
});

Related

Extjs how to parametrize the store proxy url

I'm new to extjs and I'm trying to parametrize the store proxy url.
In my view I'm building the store like this:
store: Ext.create('mystore', {
partofurl: 'url'
})
And my store:
Ext.define('mystore', {
extend: 'Ext.data.Store',
alias: 'store.mystore',
model: 'mymodel',
restful: true,
autoLoad: true,
proxy: {
type: 'ajax',
headers: {
'Accept': '*/*',
'Cache-Control': 'no-cache',
'Content-Type': 'application/json',
'Authorization': localStorage.token
},
reader: {
type: 'json',
rootProperty: 'data',
successProperty: 'success'
},
writer: {
type: 'json',
writeAllFields: true,
encode: true,
rootProperty: 'data'
},
actionMethods: {
read: 'GET'
},
api: {
read: 'http://url' + this.partofurl,
create: 'http://url' + this.partofurl,
update: 'http://url' + this.partofurl,
destroy: 'http://url' + this.partofurl,
},
autoSave: true
}
});
I tried this also:
store: Ext.create('mystore', {
proxy.api.read = 'http://url' + partofurl
})
and so... but it keeps telling me:
Uncaught Error: You are using a ServerProxy but have not supplied it with a url.
How can I solve this?
Check out the example on fiddle.
You can't use this in Ext.define.
You need to set url in constructor
or override the buildUrl method.
On your second attempt you just did not create the store config object properly.
Try this:
var store = Ext.create('mystore', {
proxy: {
api: {
read: 'http://url' + partofurl
}
}
});
Check out this fiddle (line 22).

extjs store proxy api throws error does not recognize url when passing it as a variable

I have a store which fetches data from rest api. Turns up that if I try to pass the url as a variable it throws me the following error:
[E] Ext.data.proxy.Server.buildUrl(): You are using a ServerProxy but have not supplied it with a url.
Here is the code:
Ext.define('mystore', {
extend: 'Ext.data.Store',
alias: 'store.mystore',
model: 'mymodel',
restful: true,
autoLoad: true,
proxy: {
type: 'ajax',
headers: {
'Accept': '*/*',
'Cache-Control': 'no-cache',
'Content-Type': 'application/json',
'Authorization': localStorage.token
},
extraParams: {
sort: 'clave',
'filter[active]': true
},
reader: {
type: 'json',
rootProperty: 'data',
successProperty: 'success'
},
writer: {
type: 'json',
writeAllFields: true,
encode: true,
rootProperty: 'data'
},
actionMethods: {
read: 'GET'
},
api: {
read: this.url,
create: this.url,
update: this.url,
destroy: this.url
},
autoSave: true
},
constructor: function (config) {
this.url = 'http://myurl...';
console.log('>>>>>>>>>>>>>>>>>>>>>>>>',this.url);
this.callParent(arguments);
this.initConfig(config);
return this;
}
});
So far I've read the constructor should be deployed in the very first place, and then the component. The thing is I have no idea on how to solve this, so how can I get this working? What am I doing the wrong way?
You can't use this.url in Ext.define because this don't refer to created store. You need to set url in constructor or override the buildUrl method.
Example :
constructor : function(config) {
config = config || {};
var me = this;
this.url = '..';
config.proxy = {
api: {
read: this.url,
create: this.url,
update: this.url,
destroy: this.url
}
};
this.callParent([config]);
}
I've found a solution myself, after a lot of reading in web foros and testing :(
The thing is to construct the store and then pass url attrib from the controller which calls the view, that is to say:
component.store = Ext.create('mystore', {
url: 'part of the url'
});
like this, when the component loads it knows already the value of url. Hope this might help.

Bind store data with check tree in Sencha

I am working with check tree in sencha.
This is my store
Ext.define('crApp.store.modulesStore', {
extend: 'Ext.data.TreeStore',
proxy: {
type: 'memory'
},
model: 'crApp.model.MainTreeModel',
defaultRootProperty: "children",
root: {
expanded: true,
children: [{"text":"Dashboard","moduleId":"1","checked":true,"expanded":true,"children":[{"permission_id":"3","permission_name":"View","text":"Dashboard/View","moduleId":"1_3","checked":false,"leaf":true}]},{"text":"Master","moduleId":"2","checked":true,"expanded":true,"children":[{"text":"Facility","moduleId":"3","checked":true,"expanded":true,"children":[{"permission_id":"1","permission_name":"Create","text":"Facility/Create","moduleId":"3_1","checked":true,"leaf":true},{"permission_id":"2","permission_name":"Edit","text":"Facility/Edit","moduleId":"3_2","checked":true,"leaf":true},{"permission_id":"3","permission_name":"View","text":"Facility/View","moduleId":"3_3","checked":true,"leaf":true},{"permission_id":"4","permission_name":"Delete","text":"Facility/Delete","moduleId":"3_4","checked":true,"leaf":true},{"permission_id":"5","permission_name":"Allocation","text":"Facility/Allocation","moduleId":"3_5","checked":true,"leaf":true}]},{"text":"Marketing","moduleId":"4","checked":true,"expanded":true,"children":[{"permission_id":"1","permission_name":"Create","text":"Marketing/Create","moduleId":"4_1","checked":true,"leaf":true},{"permission_id":"2","permission_name":"Edit","text":"Marketing/Edit","moduleId":"4_2","checked":true,"leaf":true},{"permission_id":"3","permission_name":"View","text":"Marketing/View","moduleId":"4_3","checked":true,"leaf":true},{"permission_id":"4","permission_name":"Delete","text":"Marketing/Delete","moduleId":"4_4","checked":true,"leaf":true}]},{"text":"Department","moduleId":"5","checked":true,"expanded":true,"children":[{"permission_id":"1","permission_name":"Create","text":"Department/Create","moduleId":"5_1","checked":true,"leaf":true},{"permission_id":"2","permission_name":"Edit","text":"Department/Edit","moduleId":"5_2","checked":true,"leaf":true},{"permission_id":"3","permission_name":"View","text":"Department/View","moduleId":"5_3","checked":true,"leaf":true},{"permission_id":"4","permission_name":"Delete","text":"Department/Delete","moduleId":"5_4","checked":true,"leaf":true}]},{"text":"User","moduleId":"6","checked":true,"expanded":true,"children":[{"permission_id":"1","permission_name":"Create","text":"User/Create","moduleId":"6_1","checked":true,"leaf":true},{"permission_id":"2","permission_name":"Edit","text":"User/Edit","moduleId":"6_2","checked":true,"leaf":true},{"permission_id":"3","permission_name":"View","text":"User/View","moduleId":"6_3","checked":true,"leaf":true},{"permission_id":"4","permission_name":"Delete","text":"User/Delete","moduleId":"6_4","checked":true,"leaf":true}]},{"text":"Doctor","moduleId":"7","checked":true,"expanded":true,"children":[{"permission_id":"1","permission_name":"Create","text":"Doctor/Create","moduleId":"7_1","checked":true,"leaf":true},{"permission_id":"2","permission_name":"Edit","text":"Doctor/Edit","moduleId":"7_2","checked":true,"leaf":true},{"permission_id":"3","permission_name":"View","text":"Doctor/View","moduleId":"7_3","checked":true,"leaf":true},{"permission_id":"4","permission_name":"Delete","text":"Doctor/Delete","moduleId":"7_4","checked":true,"leaf":true}]}]}]
}
});
When I use the static data, its working perfectly. The data is coming from php url : http://192.168.1.100:8088/CRApp/yii/web/module/index
How can I set the ajax url in store, so that view can access the data dynamically.
I tried this:
proxy: {
type: 'ajax',
url: 'http://192.168.1.100:8088/CRApp/yii/web/module/tree',
reader: {
type: 'json',
expanded: true,
root: 'children'
}
},
but its not working properly. Any solution?
Ext.define('AppName.store.settings.permissions.GroupPermissionsStore', {
extend: 'Ext.data.TreeStore',
alias: 'store.groupPermissionsStore',
autoLoad: true,
storeId: 'groupPermissionsStore',
load : function (options) {
var successFunction = function (response) {
var grpStore = Ext.data.StoreManager.get('groupPermissionsStore');
var resp = Ext.JSON.decode(response.responseText);
grpStore.setRoot(test);
}
};
//Make ajax call with above function as success function
Ext.Ajax.request({
url: "http://192.168.1.100:8088/CRApp/yii/web/module/index",
cors: true,
async: calltype,
withCredentials: true,
//jsonData: dataPayload,
method: 'POST',
success: successFunction,
failure: function (err) {
//Call back if the ajax call fails
}
});
}
});
Key change for Tree Store is method "setRoot" rather and load data.
For "Ext.data.StoreManager.get('groupPermissionsStore')" to work, the store has be added to stores array in the application's "app.js" file.

Exrjs4 tree panel set node parameter

I have a problem here, maybe anyone can help me :)
I have a response from my PHP file, the main field that i will use is "id" and "kode_jabatan".
But i want is on click of the tree node i want to POST "kode_jabatan" not "id" field to the parameter.
Is there any trick or any documentation that i have missed?
The code is given below :
var treeStore = Ext.create('Ext.data.TreeStore', {
proxy: {
type: 'ajax',
url: 'func/mainFunction.php?get=menu',
actionMethods: {
create: 'POST',
read: 'POST',
update: 'POST',
destroy: 'POST'
}
},
nodeParam:'kode_jabatan',
folderSort:true,
root: {
text: 'Struktur Organisasi',
id: '(2010-01)',
expanded: true
}
});
Ext.create('Ext.tree.Panel', {
store: treeStore,
title: 'Menu Utama'
})
Add the beforeload event to your treestore and you can access the current requesting node from the operation parameter, I have to do this in my code a lot when I need multiple parameters:
var treeStore = Ext.create('Ext.data.TreeStore', {
proxy: {
type: 'ajax',
url: 'func/mainFunction.php?get=menu',
actionMethods: {
create: 'POST',
read: 'POST',
update: 'POST',
destroy: 'POST'
}
},
nodeParam:'kode_jabatan',
folderSort:true,
root: {
text: 'Struktur Organisasi',
id: '(2010-01)',
expanded: true
},
listeners: {
beforeload: function(store, operation, eOpts){
var kode_jabatan = operation.node.get("kode_jabatan");
operation.params.node = kode_jabatan;
}
});
basically you can add any params to the request that you want by setting new attributes in the operation.params.[whatever you want] object.

loading data from a json

i have data available i want to load like this:
{
"success": true,
"message": null,
"total": null,
"data": [{
"clockTypes": ["_12", "_24"],
"speedTypes": ["MPH", "KMPH"],
"scheduleTypes": ["DEFAULT", "AUTO"]
}]}
i am normaly load the data like this
Ext.define('MyApp.store.comboTimezone', {
extend: 'Ext.data.Store',
constructor: function(cfg) {
var me = this;
cfg = cfg || {};
me.callParent([Ext.apply({
autoLoad: true,
storeId: 'MyJsonStore5',
proxy: {
type: 'ajax',
url: 'json/timezone.json',
reader: {
type: 'json',
root: 'data'
}
}
}, cfg)]);
}});
now do i get the clocktypes as one record in my combobox. how can i get two records: _12 and _24 in my combobox?
Your root should be... data.clockTypes I -think- ( though I'm not really sure if that would work. )
Hijacking that ajax call to load the data is a bit awkward, since thats not really the right format for the store to consume( is it? )
Ideally you want...
{
"success": true,
"message": null,
"total": null,
"data": [{
name: "_12", name:"_24"]
}]}
constructor: function(cfg) {
var me = this;
cfg = cfg || {};
me.callParent([Ext.apply({
autoLoad: true,
storeId: 'MyJsonStore5',
valueField:'name',
displayField:'name',
proxy: {
type: 'ajax',
url: 'json/timezone.json',
reader: {
type: 'json',
root: 'data'
}
}
}, cfg)]);
}});
Though this does mean you end up with more ajax calls. Alternatively, if you've got your heart set on populating 3 comboboxes (I'm kinda guessing that's what your trying to do ) from 1 ajax call, then you need to generate the stores dynamically based off the data from
an Ext.request()
However if you cant mess with the data, then we can...
Ext.define('MyApp.store.comboTimezone', {
extend: 'Ext.data.Store',
constructor: function(cfg) {
var me = this;
cfg = cfg || {};
Ext.define('TZ', extend: 'Ext.data.Model',
fields: [{
name: 'name'
}])
me.callParent([Ext.apply({
autoLoad: true,
model: 'TZ',
storeId: 'MyJsonStore5',
proxy: {
type: 'ajax',
url: 'json/timezone.json',
reader: {
type: 'json',
root: 'data'
}
}
}, cfg)]);
//hacky, but works i guess
Ext.Ajax.request({
url: 'my.json',
success: function(response) {
var text = response.responseText;
var json = Ext.JSON.decode(text);
for(var i =0);i<json.data.lenght();i++;){
Ext.data.StoreManager.lookup('MyJsonStore5').add(Ext.create('TZ',{name:json.data[i]}))
}
}
});
}
});
*barrring typos which create bugs.
Basically you call the url, get the data as raw json, and then process it into a format that your store can read.
It's a bit of a hack unfortunately.

Resources