I have Panel, wich I call like so:
var relationshipsPanel = Ext.create('Test.view.RelationshipsPanel'); // ?store parameters?
Ext.getCmp('mainTabPanel').add(relationshipsPanel);
And Panel has store:
...
proxy: {
type: 'ajax',
api: {
read: '_crud/tree_relationships.php?act=read' // &id_object=123
},
reader: {
type: 'json'
}
}
...
Store in Panel declared with id:
Ext.define('Test.view.RelationshipsPanel', {
extend: 'Ext.panel.Panel',
alias: 'widget.relationshipspanel',
id: 'relationshipsPanel',
itemId: 'relationshipsPanel'
items: [
{
xtype: 'treepanel',
scrollable: true,
autoLoad: true,
store: 'relationships', // store id
columns: [
...
]
}
]
});
And the store itself is declared in the application:
Ext.application({
...
stores: [
'relationships'
]
...
I want to set store parameter id_object=123. So in the end, the api query read should look like this: _crud/tree_relationships.php?act=read&id_object=123
How to call Panel with store with GET extra parameters?
Ext.data.proxy.Proxy internally uses Ext.data.Connection which allows extraParams to send additional parameters.
You can use if store is being created dynamically or inside init method:
proxy: {
type: 'ajax',
api: {
read: '_crud/tree_relationships.php?act=read' // &id_object=123
},
reader: {
type: 'json'
},
extraParams: {
id_object: 123
}
}
If you want to load store with params:
store.load({params: { id_object: 123 }});
or you can do inside init method:
store.getProxy().setExtraParams({id_object: 123});
Sencha Fiddle: https://fiddle.sencha.com/#fiddle/2931&view/editor
Store Docs: http://docs.sencha.com/extjs/6.0.1/modern/Ext.data.Store.html
Connection Docs: http://docs.sencha.com/extjs/6.0.1/classic/Ext.data.Connection.html#cfg-extraParams
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 rewrite my working Fiddle from ajax proxy type to memory. I'm trying to load memory store data manually:
// app/model/Employees.js file
Ext.define('Fiddle.model.Employees', {
extend: 'Ext.data.Model',
entityName: 'Employees',
fields: [
{
name: 'profile_pic'
},
{
type: 'int',
name: 'age'
},
{
type: 'string',
name: 'last',
mapping: 'name.last'
},
{
type: 'string',
name: 'first',
mapping: 'name.first'
},
{
type: 'string',
name: 'email'
}
],
proxy: {
type: 'memory',
reader: {
type: 'json',
rootProperty: 'items',
totalProperty: 'total',
successProperty: ''
}
}
});
// app/store/Employees.js file
Ext.define('Fiddle.store.Employees', {
extend: 'Ext.data.Store',
pageSize: 30, // items per page
alias: 'store.employees',
model: 'Fiddle.model.Employees',
});
//app.js fule - launch() function
var store = Ext.create('Fiddle.store.Employees');
console.log(store);
Ext.Ajax.request({
url: 'mates.json',
success: function(resp) {
var result = resp.responseText;
console.log(result);
// store.loadRawData(result);
store.loadData(result);
console.log(store);
console.log(store.getAt(0));
},
});
As result I have 3386 records in store, every symbol in my json file. And what I see in console as first record:
What I'm doing wrong?
And where I need to put proxy lines - in model or in store?
responseText is a string, which contains the serialized JSON data. You have to deserialize it into an object before you can use loadRawData to load the object through the model converters into the store:
var result = Ext.decode(resp.responseText);
store.loadRawData(result);
loadData and loadRawData differ in that loadData does not call the converters on the model. loadRawData is equivalent to what the ajax proxy does, loadData is not.
Did it in this way:
//in Grid panel js file
listeners: {
afterrender: function(grid, evt) {
var myStore = grid.getStore();
Ext.Ajax.request({
url: 'mates.json',
success: function(resp) {
var result = Ext.decode(resp.responseText);
myStore.getProxy().data = result;
myStore.load();
},
});
}
}
In store autoLoad: true must be disabled. This way of loading instead of store.loadRawData(result); shows the correct number of records in the pagingtoolbar.
I have a grid with store, and I want to load on render or click a button, but when I try to load the grid, got an url is undefined error. I need to use Ext direct, so no url. What should I do?
Ext.define('My.view.Grid' ,{
extend: 'Ext.grid.Panel',
//...
store: 'MyStore',
//...
}
Store:
Ext.define('My.store.MyStore', {
extend: 'Ext.data.JsonStore',
//...
model: 'My.model.MyModel',
proxy: {
type: 'direct',
directFn: Ext.direct.Class.function,
paramOrder: ['start', 'limit', 'sort', 'active'],
reader: {
type: 'json',
root: "data",
idProperty: 'id',
totalProperty: "all"
},
extraParams: {
active: 1
}
},
remoteSort: true,
sorters: ['name']
//...
Extend your store from Ext.data.Store:
Ext.define('My.store.MyStore', {
extend: 'Ext.data.Store',
// ...
});
If you see the source code of Ext.data.JsonStore, you will see that there is predefined an ajax proxy:
constructor: function(config) {
config = Ext.apply({
proxy: {
type : 'ajax',
reader: 'json',
writer: 'json'
}
}, config);
this.callParent([config]);
}
I should load date from server dynamically,
however, I have no idea how to change get parameters.
Here is my code.
I want to load store when the view is loaded, but the store get data from server
when the app is loaded. I need to change param according to user's input data.
[Store]
Ext.define('APP.store.MyTestStore', {
extend: 'Ext.data.Store',
requires: [
'APP.model.MyModel',
],
config: {
model: 'APP.model.MyModel',
autoLoad: false,
storeId : 'MyTestStore',
proxy: {
type: 'jsonp',
method: 'GET',
// extraParams: {
// man: '',
// },
url: 'http://test.com/api/test/',
reader: {
type: 'json',
rootProperty: 'apiList'
}
}
},
});
[VIEW]
Ext.define('APP.view.MyListView', {
extend: 'Ext.navigation.View',
xtype: 'applistview',
requires: [
'Ext.Panel',
'APP.view.TopMenu',
'APP.view.TestListView',
'APP.config.Runtime',
],
fullscreen: true,
config: {
navigationBar: false,
fullscreen: true,
items: [
{ // Top Menu
xtype: 'topmenu',
},
{ // Main Menu
xtype: 'tlist',
itemId: 'myList',
store: 'MyTestStore',
},
{ // Bottom Banner
xtype: 'bottombanner',
},
]
},
initialize: function(){
var test = Ext.getStore('MyTestStore').load({extraParams:{man:'test'}});
console.log(test);
}
});
You can do this in two ways,
App default extra param set to 123
Ext.define('APP.store.MyTestStore', {
extend: 'Ext.data.Store',
requires: [
'APP.model.MyModel'
],
config: {
model: 'APP.model.MyModel',
autoLoad: false,
storeId : 'MyTestStore',
proxy: {
type: 'jsonp',
method: 'GET',
extraParams: {
man: '123'
},
url: 'http://test.com/api/test/',
reader: {
type: 'json',
rootProperty: 'apiList'
}
}
}
});
When loading the store you can change extra param like the following way
initialize: function(){
var test = Ext.getStore('MyTestStore').getProxy().getExtraParams().man= '567'
Ext.getStore('MyTestStore').load();
console.log(test);
}
In Another way you can change proxy url without setting extra param
initialize: function(){
var url = 'http://test.com/api/test/'; // your store proxy url
var modified = url+'parameter you get from user'
Ext.getStore('MyTestStore').getProxy().setUrl(modified);
Ext.getStore('MyTestStore').load();
console.log(test);
}
I'm trying to create a store and inside access the data from another store to construct the proxy url.
Something like this:
Ext.define('MyApp.store.Post',{
extend:'Ext.data.Store',
config: {
model: 'MyApp.model.Post',
proxy: {
type: 'ajax',
url: 'http://mywebsite.com/get?userid=' + Ext.getStore('UserData').getAt(0).data.userid,
reader: {
type: 'json'
}
}
}
});
So, I'm basically trying to get the userid from another store to be able to construct the correct url.
This doesn't work, I get:
Uncaught TypeError: Object #<Object> has no method 'getStore'
What is the correct way to do this?
EDIT: Okay I put in a dummy URL and trying to change it with a listener, this is my store now:
Ext.define('MyApp.store.Post',{ extend:'Ext.data.Store',
config: {
fields: [
'title', 'link', 'author', 'contentSnippet', 'content'
],
proxy: {
type: 'jsonp',
url: 'https://ajax.googleapis.com/ajax/services/feed/load?v=1.0&q=http://feeds.feedburner.com/SenchaBlog',
reader: {
type: 'json',
rootProperty: 'responseData.feed.entries'
}
},
listeners: [
{
beforeload: function(){
console.log("store loaded"); //I DON'T SEE THIS IN CONSOLE
return true;
}
}
]
},
});
Basically you did nothing wrong, but the reason is sencha touch uses asynchronous loading and it seems that Ext.getStore() is not instantiated at the time your store is defined.
Let's try this method instead:
First, add a listener for beforeload event inside your store config:
Ext.define('MyApp.store.Post',{
extend:'Ext.data.Store',
config: {
model: 'MyApp.model.Post',
proxy: {
type: 'ajax',
//url: you don't even need to set url config here, simply ignore it
reader: {
type: 'json'
}
}
},
listeners: [
{
fn: 'setUrl',
event: 'beforeload'
}
]
});
then declare a function like this, in the same file:
setUrl: function(){
this.getProxy().setUrl(Ext.getStore('UserData').getAt(0).data.userid);
return true;
}
This way, it's ensured to set the url for your store's proxy right before it's loaded. And basically at the time, all core methods are instantiated.
Update: please try this with your Post store:
Ext.define('MyApp.store.Post',{
extend:'Ext.data.Store',
config: {
//autoLoad: true,
fields: ['title', 'link', 'author', 'contentSnippet', 'content'],
proxy: {
type: 'jsonp',
url: 'dummy url',
reader: {
type: 'json',
rootProperty: 'responseData.feed.entries'
}
},
},
initialize: function(){
console.log("loaded!");
this.getProxy().setUrl('https://ajax.googleapis.com/ajax/services/feed/load?v=1.0&q=http://feeds.feedburner.com/SenchaBlog');
//return true;
}
});
After reading the source code of the pull-to-refresh plugin, I see that Sencha Touch use an Ext.data.Operation instead of Ext.data.Store.load() function. So you will have to put it into the initialize method instead.
Use Ext.data.StoreManager.lookup('UserData') to get the store instance.
But in your case, I would use this somewhere, where you work with the userid:
var postsStoreInstance = ...;
postsStoreInstancegetProxy()._extraParams.userid = userid;
It adds a query paremetry to the store's proxy url
The way you do it is the correct way. What is the code of your store definition?
Make sure your store has storeId: 'UserData'.
See this working example:
Ext.define('User', {
extend: 'Ext.data.Model',
fields: [
{name: 'id'}
]
});
Ext.create( 'Ext.data.Store', {
model: 'User',
storeId: 'UserData'
});
Ext.define('MyApp.store.Post',{
extend:'Ext.data.Store',
config: {
model: 'MyApp.model.Post',
proxy: {
type: 'ajax',
url: 'http://mywebsite.com/get?userid=' + Ext.getStore('UserData'),
reader: {
type: 'json'
}
}
}
});