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 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.
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);
});
}
});
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
}
}
});