I know how to do it in the store with the backend paging. But would you please give the suggestions about how to do it with the frontend paging?
You can use a memory proxy and set the config property enablePaging to true.
Example:
var store = Ext.create('Ext.data.Store', {
autoLoad: true,
pageSize: 5,
data: data,
proxy: {
type: 'memory',
enablePaging: true,
reader: {
type: 'json',
rootProperty: 'people'
}
}
});
I created a fiddle for this:
https://fiddle.sencha.com/#view/editor&fiddle/3c6e
Related
I have a remote store using a MySQL database.
here is the store definition
Ext.define('rgpd.store.sOutil', {
extend: 'Ext.data.Store',
requires: [
'rgpd.model.mOutil'
],
model: 'rgpd.model.mOutil',
autoLoad: true,
autoSync: true,
pageSize: 0,
remoteSort: true,
remoteFilter: true,
proxy: {
type: 'ajax',
api: {
create: 'data/app.php?class=Outil&action=create',
read: 'data/app.php?class=Outil&action=read',
update: 'data/app.php?class=Outil&action=update',
destroy: 'data/app.php?class=Outil&action=destroy',
},
reader: {
type: 'json',
root: 'data',
totalProperty: 'totalCount',
successProperty: 'success'
},
writer: {
type: 'json',
writeAllFields: false,
successProperty: 'success',
encode: true,
extraParams: "id",
idProperty: "id",
rootProperty: 'data'
}
}
});
I have an array of ids, those i want to keep so i need to apply a filter.
I found 2 different solutions but none worked. The first was using filtreBy method
Ext.getStore('sOutil').filterBy(function(record, id) {
return Ext.Array.contains(ids_intervenant_outils, record.get('id'));
});
I did this bug i get an error in Firefox "too much recursion". So i tried an other way to do it and found this on an other stack-overflow post (here) but I ge Ext.escapeRe which according to firefox "is not a function". I tried to find an other function i found Ext.String.escapeRegex() but I got one more error in Firefox "p.replace is not a function"
var filterValue = Ext.isArray(ids_intervenant_outils)
? new RegExp('^(?:' + Ext.Array.map(ids_intervenant_outils, function(value){return Ext.String.escapeRegex(value)}).join('|') + ')$')
: values;
Ext.getStore('sOutil').clearFilter(false);
Ext.getStore('sOutil').filter('id', filterValue);
here is the too much recursion calls trace
RegExpGlobalReplaceOptFunc self-hosted:4702:22
[Symbol.replace] self-hosted:4499:24
replace self-hosted:5248:13
encodeString http://localhost/rgpd/extjs6/ext-all.js:22:383387
doEncode http://localhost/rgpd/extjs6/ext-all.js:22:382867
encodeObject http://localhost/rgpd/extjs6/ext-all.js:22:384535
doEncode http://localhost/rgpd/extjs6/ext-all.js:22:383117
encodeObject ...
found the issue for "too much recursion" error. remoteFilter: true must be remoteFilter: false, in the store definition.
I am following the code in the link below to page data on a Ext.grid.Panel without success. Data is rendered altogether in the panel without paging. Apparently, the paging toolbar has no data to display but it is correctly configured to the store that has the data and it is hanging as an item of the grid.
I have copied the exact configurations of store and grid from the example below but nothing happened. Why is the data not being paged?
http://jsfiddle.net/jardalu/TE4ah/
This is my store which is linked to the grid and the paging toolbar:
constructor: function(cfg) {
var me = this;
cfg = cfg || {};
me.callParent([Ext.apply({
pageSize: 50,
remoteSort: true,
storeId: 'Users',
autoLoad: false,
model: 'AICWeb.model.User',
sortOnLoad: false,
proxy: {
type: 'ajax',
type: 'localstorage',
simpleSortMode: true,
reader: {
type: 'xml'
}
},
sorters: {
property: 'email'
}
}, cfg)]);
}
If you are using localstorage you need to implement the PagingMemoryProxy. This should be the only type on the proxy config, and enable the paging config:
proxy: {
type: 'pagingmemory'
enablePaging: true,
...
}
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 using PagingToolbar to filter my result search, I want do display 20 result per page, but in my grid still display all records.
The bbar in my grid
bbar: Ext.create('Ext.PagingToolbar',
store: store,
pageSize: 20,
displayInfo : true,
plugins: Ext.create('Ext.ux.ProgressBarPager', {})
}),
My Store
Ext.define('Mystore', {
extend: 'Ext.data.Store',
model: 'Mymodel',
pageSize: 20,
autoLoad: true,
remoteSort: true,
proxy: {
type: 'rest',
url: 'search',
reader: {
type: 'json',
root: 'root',
idProperty: 'id'
},
writer: {
type: 'json',
writeAllFields: true
}
}
});
Anybody could help me ??
Thanks.
Your /search REST service that provides the data for the store needs to support the start, limit, and/or page parameters so that the store can request a single page of results at a time.
To support the limit parameter, your service must limit the number of returned results to no more than the count specified in that parameter. You'd typically implement that by passing the limit value through to the database query you're using to provide the results.
Your Store must contain this parameter with start and limit and your backend need to use these parameters.
baseParams : {
start:0, limit:20
}
In java backend,
String startPage = request.getParameter("start");
String limits = request.getParameter("limit");
It's kind of filter for your grid.
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
}
}
});