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).
Related
I am working on a display where I need to bind a combobox but I am unable to pass parameters. Below is my code please provide me the way to pass parameters.
//store
Ext.define('NetworkStore', {
extend: 'Ext.data.Store',
alias: 'NetworkStore',
fields: ['Id', 'value'],
storeId: 'NetworkStore',
autoLoad: true,
proxy: {
type: 'ajax',
useDefaultXhrHeader: false,
actionMethods: { create: "POST", read: "GET", update: "POST", destroy: "POST" },
headers: { 'Content-Type': 'application/x-www-form-urlencode' },
limitParam: false,
startParam: false,
pageParam: false,
extraParams: {
Style: 1
},
url: 'url',
reader: {
type: 'json'
}
}
});
xtype: 'combo',
name: 'NetworkIDList',
store: {
type: 'NetworkStore',
'Style': 3 //parameter
//params: { // tried this way as well but did not work for me.
// Style: 3
//}
}
Note: Store is defined in a separate file.
The store should be passed like below format.
store: {
type: 'NetworkStore',
proxy: {
extraParams: {
Style: 3
}
}
}
You can change the params as follows:
let store = Ext.data.StoreManager.lookup('NetworkStore'),
// params are part of the proxy, not the store
proxy = store.getProxy(),
// make sure you keep the other params
newParams = Ext.apply(proxy.getExtraParams(), {style: '3'});
// set the params to the proxy
proxy.setExtraParams(newParams);
// do whatever you plan to do with the store
store.load();
If you want to bind a value to store proxy params, take a look at this fiddle.
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.
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);
});
}
});
Hello, I have a list with paging I want to send a param on load, this param is from another store.
Ext.define('WE3Chamados.store.Chamados', {
extend: 'Ext.data.Store',
config: {
model: 'WE3Chamados.model.Chamado',
autoLoad: false,
proxy: {
type: 'jsonp',
url: 'http://XXX/chamados.php',
callbackKey: 'callback',
reader: {
type: 'json',
rootProperty : 'chamados',
successProperty: 'success'
}
}
}
});
Like this
login_store = Ext.getStore('Login');
param_to_send_default = login_store.getAt(0).data.cod_usuario;
and send it as a default param.
You can use the extraParams config for the proxy object:
proxy: {
type: 'jsonp',
...
extraParams: {
param_to_send_default: Ext.getStore('Login').getAt(0).get('cod_usuario)
}
}
I do not understand how I can tell the proxy to simply submit the data as ordinary http parameters to the post-request. You could think that would be the simplest thing to do, but I just cant get my store to send anything other then xml or json to the server when CRUDing.
Please tell me I'm missing something really simple.
Ext.define('ObjectManager.store.Object', {
extend: 'Ext.data.Store',
model: 'ObjectManager.model.Object',
autoLoad: true,
proxy: {
type: 'ajax',
api:{
read: 'http://localhost/Get/',
update: 'http://localhost/Edit/',
create: 'http://localhost/Add/',
delete: 'http://localhost/Delete/'
},
reader: {
type: 'xml',
root: 'objects',
record: 'object'
}
}
});
For the record, the method used by the Proxy per CRUD action can be configured with the following config:
actionMethods: {
create : 'POST',
read : 'POST',
update : 'POST',
destroy: 'POST'
}
Here's a store configuration that reads JSON and sends the data as POST. I believe the key is in the writer config: "encode: true"
/* Data store */
Ext.create('Ext.data.Store', {
storeId:'categoryStore',
model: 'Model.Category',
autoLoad: true,
autoSync: true,
groupField: 'CategoryParent',
proxy: {
type: 'ajax',
api: {
read: '',
create: '',
update: '',
destroy: ''
},
reader: {
type: 'json',
root: 'data'
},
writer: {
root: 'data',
encode: true,
allowSingle: false
}
}
});