sencha touch: change extraParams when it loaded - extjs

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

Related

ExtJS Loading Link List Tree Using Ajax

I have the below code that I am trying to get the list of dates using Ajax and display those on the page as links to elsewhere. So each entry would be a link that when you click would take you elsewhere. Though the treelist is not loading any items...
Data
{
"success": true,
"data": [
"2018-10-08T00:00:00",
"2018-10-05T00:00:00",
"2018-10-04T00:00:00",
"2018-10-03T00:00:00",
]
}
Code
Ext.define('...', {
extend: 'Ext.form.Panel',
xtype: '...',
requires: [
'...'
],
layout: 'border',
items: [{
xtype: 'container',
store: {
proxy: {
type: 'ajax',
url: '...',
useDefaultXhrHeader: true,
withCredentials: true,
reader: {
type: 'json',
rootProperty: 'data'
},
}
}
}]
});
You can display a grid with your data. It can show clickable links.
To do this you need to make a grid with your ajax store and a grid renderer like this:
// Ajax store
Ext.create('Ext.data.Store', {
storeId: 'mystore',
autoLoad: true,
proxy: {
type : 'ajax',
url : '/file.php',
actionMethods: {
read: 'POST'
},
reader : {
type: 'json'
},
extraParams : {
key : 'val'
},
fields : [
{name: 'date', type: 'string'}
]
}
})
// Grid
Ext.create('Ext.grid.Panel', {
renderTo: Ext.getBody(),
scrollable: true,
store: {
type: 'mystore'
},
columns: [
{
text: 'link column',
dataIndex:'link',
renderer: function(value) {
if(value) {
// here you can format your output
return ''+value+'';
}
}
}
]
})
Please look whole example in a Fiddle

ExtJS6: call panel with store with extra parameters

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

Extjs 4 grid store MVC with Ext direct url is undefined

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

ExtJS TreeStore is empty if I load store by manually

Model
Ext.define('MyDesktop.model.mail.MailFoldersModel', {
extend: 'Ext.data.Model',
requires: [
'Ext.data.field.String'
],
fields: [
{
type: 'string',
name: 'id'
},
{
type: 'string',
name: 'idParent'
},
{
type: 'string',
name: 'text'
}
]
});
My TreeStore
Ext.define('MyDesktop.store.mail.MailFoldersStore', {
extend: 'Ext.data.TreeStore',
requires: [
'MyDesktop.model.mail.MailFoldersModel'
],
constructor: function(cfg) {
var me = this;
cfg = cfg || {};
me.callParent([Ext.apply({
storeId: 'MailFoldersStore',
model: 'MyDesktop.model.mail.MailFoldersModel',
autoLoad: true,
proxy: {
type: 'ajax',
url: 'http://url/mail/folders',
reader: {
type: 'json',
rootProperty: 'items',
successProperty: 'success'
}
},
root: {
text: 'root',
iconCls: 'mail-folders-owner'
}
}, cfg)]);
}
});
Store is autoloaded, all works correctly, store contains 11 records.
var MailFoldersStore = Ext.create('MyDesktop.store.mail.MailFoldersStore', {
storeId: 'MailFoldersStore'
});
If I set autoLoad to false and trying to load by manually - store is empty, 0 records.
var MailFoldersStore = Ext.create('MyDesktop.store.mail.MailFoldersStore', {
storeId: 'MailFoldersStore'
});
MailFoldersStore.load({
callback : function(records, operation, success) {
console.log(records);
}
});
What can be a reason for this behaviour?
I also has same problem. I am using Extjs 5.1. After googling I found one complex solution which needs us to modify the framework.
See the below link if it can help you.
http://www.sencha.com/forum/showthread.php?154823-listeners-quot-exception-quot-in-proxy.ajax-on-TreeStore-do-not-work

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