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
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)
}
}
How can I send my entire store data to the server in one POST call?
It could be in json format.
thanks.
Update:
this is my store code:
Ext.define('App.store.consultorio.Receita', {
extend: 'Ext.data.Store',
model: 'App.model.consultorio.Receita',
autoLoad: false,
proxy: {
type: 'rest',
reader: {
type: 'json'
},
writer: {
type: 'json'
},
url: 'consultas/receita.json'
}
});
You could set every record in the store dirty, then call sync()
store.each(function(record){
record.setDirty();
});
store.sync();
Also, your store is using a RESTful proxy, which by default does not batch actions. See http://docs.sencha.com/ext-js/4-2/#!/api/Ext.data.proxy.Rest-cfg-batchActions
Your store should look like:
Ext.define('App.store.consultorio.Receita', {
extend: 'Ext.data.Store',
model: 'App.model.consultorio.Receita',
autoLoad: false,
proxy: {
type: 'rest',
batchActions: true, //<------
reader: {
type: 'json'
},
writer: {
type: 'json'
},
url: 'consultas/receita.json'
}
});
I am trying to centralize my configuration of EXTJS stores within my application, however, I cannot seem to figure out how to make this happen. I am using ExtJS 4.1.
I have a base store, which I want to hold all of the repetitive configuration stuff, and then my more specific stores to hold what's actually different.
Ext.define('My.store.Abstract', {
extend: 'Ext.data.Store',
autoload:false,
proxy: {
type: 'ajax',
reader: {
type: 'json',
root: 'data',
totalProperty: 'total',
successProperty: 'success',
messageProperty: 'message'
},
writer: {
type: 'json',
encode: true,
writeAllFields: true,
root: 'data',
allowSingle: false
},
simpleSortMode: true
}
});
Then I would like to provide the store specific stuff on a store by store basis --
Ext.define('My.store.Products', {
extend: 'My.store.Abstract',
storeId: 'Products',
model: 'My.model.Product',
proxy: {
api: {
create: '/myurl/create',
read: '/myurl/index',
update: '/myurl/update',
destroy: '/myurl/delete'
}
}
});
What I am finding is that it just doesnt behave at all. I believe it has something to do with the proxy, but I just can't track it down.
What is the correct way to do this? I would prefer not to replicate the same configuration stuff (from my abstract store) across the 350+ stores in my application. As of now, that it what I have, and I thought I was trying to implement a pretty basic concept .. to no avail.
I know things are not working, as basic as the pageSize, or even the autoLoad .. because they are not being respected at all.
I've played around with constructors, and calling the parent.
Any help would be greatly appreciated.
You can't do it that way because you're expecting to to merge the objects which it just won't do.
Instead, you'll want to look at something like this (untested):
Ext.define('Base', {
extend: 'Ext.data.Store',
autoLoad: false,
constructor: function(config) {
// applyIf means only copy if it doesn't exist
Ext.applyIf(config, {
proxy: this.createProxy()
});
this.callParent([config]);
},
createProxy: function() {
return {
reader: {
type: 'json',
root: 'data',
totalProperty: 'total',
successProperty: 'success',
messageProperty: 'message'
},
writer: {
type: 'json',
encode: true,
writeAllFields: true,
root: 'data',
allowSingle: false
},
simpleSortMode: true
}
}
});
Ext.define('Sub', {
extend: 'Base',
createProxy: function(){
var proxy = this.callParent();
proxy.api = {
create: 'create',
update: 'update'
};
return proxy;
}
});
Here is another way:
Base store (app/store/Base.js):
Ext.define('Admin3.store.Base', {
extend: 'Ext.data.Store',
autoLoad: true,
autoSync: true
});
Base proxy (app/proxy/Base.js):
Ext.define('Admin3.proxy.Base', {
extend: 'Ext.data.proxy.Ajax',
alias: 'proxy.base',
reader: {
type: 'json',
root: 'items',
successProperty: 'success',
messageProperty: 'message'
},
listeners: {
exception: function(proxy, response, operation){
console.log(response, operation);
Ext.Msg.show({
title: 'Remote Exception',
msg: typeof operation.getError() === 'string' ? operation.getError() : operation.getError().statusText,
icon: Ext.Msg.ERROR,
buttons: Ext.Msg.OK
});
}
}
});
Concrete store (app/store/Users.js):
Ext.define('Admin3.store.Users', {
extend: 'Admin3.store.Base',
model: 'Admin3.model.User',
proxy: Ext.create('Admin3.proxy.Base', {
api: {
read: 'data/read.php',
update: 'data/update.php'
}
})
});
I think the other answers here might be a bit more complicated than they need to be. As of version 4.0.0, ExtJS has an Ext.Object.merge() method that will allow an approach very close to what the asker was attempting.
Using the values that the asker has, I'd define my "abstract" store like this:
Ext.define("Ext.ux.data.Store", {
extend: "Ext.data.Store",
constructor: function(config) {
var defaults = {
autoload: false,
proxy: {
type: "ajax",
reader: {
type: "json",
root: "data",
totalProperty: "total",
successProperty: "success",
messageProperty: "message"
},
writer: {
type: "json",
encode: true,
writeAllFields: true,
root: "data",
allowSingle: false
},
simpleSortMode: true
}
};
this.callParent([Ext.Object.merge({}, defaults, config)]);
}
});
I'd then create my concrete stores like this:
Ext.create("Ext.ux.data.Store", {
storeId: "ExampleStore",
model: "ExampleModel",
autoLoad: true, // This overrides the defaults
proxy: {
api: {
read: "/example/read" // This overrides the defaults
}
}
});
This approach will also work for multiple levels of components. You could, for instance, model a read-only store:
Ext.define("Ext.ux.data.ReadonlyStore", {
extend: "Ext.ux.data.Store",
constructor: function(config) {
var overrides = {
proxy: {
api: {
create: undefined,
update: undefined,
destroy: undefined
}
}
}
this.callParent([Ext.Object.merge({}, config, overrides)]); // Note that the order of parameters changes here
}
});
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
}
}
});