How to clear the store and update a paging toolbar? - extjs

i need to reset paging toolbar parameters as "page", "start", "limit" when i click on a search button to re-load grid store with different parametres!
how can i do it?
the problem is that when i am on the next page, and i do a new search, i have the parameters page=2, start=25, limit=25 dirty, instead i need to reset this parametres.
my code:
listeners: {
click: function(){
Ext.getCmp('GrlGio').getStore().removeAll();
Ext.getCmp('GrlGio').store.load({
params:{
mode: "RIC",
DataRicerca: dd,
Pit: Ext.getCmp('cmbPiattaforma').getValue()
}
});
}
}
thanks!

In Ext 4, I found loadPage() worked pretty well for resetting the data store and making the paging toolbar go back to the first page. Example:
store.loadPage(1) // note: 1-based, not 0-based

Guys currentPage=1 did the trick for me
before loading the store every time call the below
By the way i am getting 500 results and loading in cache
Pagination is for local, any way you can try this before any new search
var store = Ext.getStore('MyStoreS');
store.proxy.extraParams = { employeeId : searchStr};
store.currentPage = 1;
store.load();

you can manualy reset the params
Ext.getCmp('GrlGio').getStore().getProxy().pageParam =1;
Ext.getCmp('GrlGio').getStore().getProxy().startParam =0;
and then do the store load. I know it looks hardcoded but it's the only solution i found...

Try this -
pagingToolbar.moveFirst();

Define following function "resetStartParam" , by overriding ext.data.store:
Ext.override(Ext.data.Store, {
resetStartParam:function(){
//get the latest store options
var storeOptions=this.lastOptions;
if(storeOptions!=undefined){
//get the param names
var pn = this.paramNames;
//get the params from options
var params=storeOptions.params;
//change the param start value to zero
params[pn.start] = 0;
//reset options params with this new params
storeOptions.params=params;
//apply this new options to store options
this.storeOptions(storeOptions);
}
}
});
Now call this function on click of your search button:
Ext.getCmp('GrlGio').getStore().resetStartParam();
Thats it.It should work.

I know that this is an old post but I thought I'd add in my pennies work. I'm using EXTJS 4 and had a similar problem. When I did a new search the page number etc did not reset. The solution I found, which appears to work with the nav bar automatically is using the currentPage attribute of the store. I do have a slight odd setup but doing this.currentPage = 1 when I do a new search works fine for me

try this in your handler
Ext.getCmp('gridpanel').getStore().removeAll();
Ext.getCmp('PagingToolbar').moveFirst();
after this, put your search query and load the store accordingly
Ext.getCmp('gridpanel').getStore().load({params : { start : 0, limit : maxRecords, searchText : _searchText } });
hope it helps

just call pagingToolbar.onLoad() after removeAll(). Plain and simple.

Here is how I achieved search with paging. It only does 1 request and it refreshes the paging data.
onExecuteSearch: function(){
var params = this.getSearchForm().getForm().getFieldValues()
, proxy = this.getSomeGrid().getStore().getProxy();
proxy.extraParams = params;
this.getPagingToolbar().moveFirst();
}
getFieldValues() documentation: http://docs.sencha.com/ext-js/4-0/#!/api/Ext.form.Basic-method-getFieldValues
For more about the proxy "extraParams" look here: ExtJs4 - Store baseParams config property?

This work fine (refresh correctly the paging info):
myStore.removeAll();
myStore.fireEvent('load', myStore, [], {});

Had to change the page size to 500 for printing the WHOLE store/grid, and once printed, restore the grid to the original page size of 25.
// 500 records are now in the store and on the grid
ux.core.grid.Printer.print(this.getOrderList());
store.pageSize = this.displaySize; // new page size is 25
this.getPagingToolbar().doRefresh(); // equivalent of pressing a refresh button on the toolbar
does the trick - reloads store with the same sorters/filters/currentPage

Related

Sencha - store.each() - Data are not available, they are only deep in data class

I have got:
Ext.define("catcher.view.Login", {
extend: "Ext.form.Panel",
// creating login form, including selectfield
Store "Tournaments" is created in stores (autoload:true), have its model. Everyting is set.
need to dynamicly fill selectfield (still in view.Login class):
initialize: function(){
var store = Ext.getStore("Tournaments");
var options = new Array();
store.each(function(radek){
options[radek.get("tournament_id")] = radek.get("tournament_name");
});
}
I do not want to use store:"Tournaments" config options, because of later form.submit(); does not send correct data from selectfield.
There is the problem: console.log(store.getCount()); returns 0. Using store.add({ ... }) I can add anything and getCount() returns corrent count (0 + add()).
Weird part: console.log(store) returns whole class including data object with all items inside. And next weird part - If I use the same code in controller, everything works, the Store is loaded properly and I can use mystore.each();
Store loading is asynchronous, by the time you're accessing it, it's not loaded. You need to listen to the store load event.
Something like:
store.on('load', function(storeRef, records, successful){
//Loop through records
}, this);
on() documentation
load event documentation

How to go to first page after(before) sorting in extJs grid

I have extJs 4.1 grid with paging. For this grid applied remoteSort(maybe remoting style of sorting doesn't matter) behaviour. After sort click(click on header) I wanna go to first page. How can I achive this? Maybe exists presort callback in what I can cancel loading data and forward loading to first page with store.loadPage(1)?
P.S. Sorry for english.
This code is part of the FiltersFeature.js file.
Take a look at how when to specify (local: false) it goes to first page automagically ;)
reload : function () {
var me = this,
store = me.view.getStore();
if (me.local) {
store.clearFilter(true);
store.filterBy(me.getRecordFilter());
store.sort();
} else {
me.deferredUpdate.cancel();
if (store.buffered) {
store.pageMap.clear();
}
store.loadPage(1);
}
}
What you have to do is configure the feature with local: false.

How to override the pagingtoolbar?

I would like to know how to override the displaymsg and page number of the paging toolbar.
I'm trying to get the paging toolbar working with the infinite scrolling. I've got the components working so that when the user moves the infinite vertical scroller I work out what page we're on using javascript and I want to update the paging toolbar with this number. Similarly I work out in what range of records the user is on and want to update the displaymsg with this range.
I could modify the the html to directly change the displaymsg but I would prefer to change these {0}, {1}, {2} variables:
"Displaying {0}-{1} of {2} Item(s)"
Is there some kind of store I can access to change these?
I don't know if the page number is in a store, if it's not I could simply edit the html directly to change that without having to worry about conflicts.
Any idea or tips how I can accomplish this? Thank you.
Thanks altrange. This changes the displaymsg, any idea how to change
the page number in the text box?
You can generate it by yourself.
So... create some public methods -
refreshDisplayMsg(from, to, total) {
var me = this,
displayItem = me.child('#displayItem'),
msg = Ext.String.format(
me.displayMsg,
from
to,
total
);
displayItem.setText(msg);
me.doComponentLayout();
}
Moreover this method will be invoked by store onload hanlder.
Look at sources..
There is a method
// private
updateInfo : function(){
var me = this,
displayItem = me.child('#displayItem'),
store = me.store,
pageData = me.getPageData(),
count, msg;
if (displayItem) {
count = store.getCount();
if (count === 0) {
msg = me.emptyMsg;
} else {
msg = Ext.String.format(
me.displayMsg,
pageData.fromRecord,
pageData.toRecord,
pageData.total
);
}
displayItem.setText(msg);
me.doComponentLayout();
}
},
Probably you can develop a public interface for something like this.
Cheers. :)

ExtJS: Added grid rows wont de-highlight

When adding a rows to a grid, and then clicking on it, it gets selected (and highlighted). Then, clicking elsewhere but the new row remains highlighted (so now there are to highlighted rows).
Please, does anyone know what the problem could be? How to make it behave normally, i.e. clicking a row deselects (de-highlights) the other one?
After I reload the page (so the new row is not new anymore), everything works as expected.
Edit: Here's the code for adding rows:
var rec = new store.recordType({
test: 'test'
});
store.add(rec);
Edit 2: The problem seems to be listful: true. If false, it works! But I need it to be true so I'm looking at this further... It looks like as if the IDs went somehow wrong... If the ID would change (I first create the record and then the server returns proper ID, that would also confuse the row selector, no?)
(Note, correct as ExtJS 3.3.1)
First of all, this is my quick and dirty hack. Coincidentally I have my CheckboxSelectionModel extended in my system:-
Kore.ux.grid.CheckboxSelectionModel = Ext.extend(Ext.grid.CheckboxSelectionModel, {
clearSelections : function(fast){
if(this.isLocked()){
return;
}
if(fast !== true){
var ds = this.grid.store,
s = this.selections;
s.each(function(r){
//Hack, ds.indexOfId(r.id) is not correct.
//Inherited problem from Store.reader.realize function
this.deselectRow(ds.indexOf(r));
//this.deselectRow(ds.indexOfId(r.id));
}, this);
s.clear();
}else{
this.selections.clear();
}
this.last = false;
}
});
And this is the place where the clearSelections fails. They try to deselect rows by using ds.indexOfId(r.id) and it will returns -1 because we do not have the index defined remapped.
And this is why we can't find the id:-
http://imageshack.us/photo/my-images/864/ssstore.gif/
Note that the first item in the image is not properly "remapped". This is because we have a problem in the "reMap" function in our Ext.data.Store, read as follow:-
// remap record ids in MixedCollection after records have been realized. #see Store#onCreateRecords, #see DataReader#realize
reMap : function(record) {
if (Ext.isArray(record)) {
for (var i = 0, len = record.length; i < len; i++) {
this.reMap(record[i]);
}
} else {
delete this.data.map[record._phid];
this.data.map[record.id] = record;
var index = this.data.keys.indexOf(record._phid);
this.data.keys.splice(index, 1, record.id);
delete record._phid;
}
}
Apparently, this method fails to get fired (or buggy). Traced further up, this method is called by Ext.data.Store.onCreateRecords
....
this.reader.realize(rs, data);
this.reMap(rs);
....
It does look fine on the first look, but when I trace rs and data, these data magically set to undefined after this.reader.realize function, and hence reMap could not map the phantom record back to the normal record.
I don't know what is wrong with this function, and I don't know how should I overwrite this function in my JsonReader. If any of you happen to be free, do help us trace up further for the culprit that causes this problem
Cheers
Lionel
Looks like to have multi select enabled for you grid. You can configure the selection model of the grid by using the Ext.grid.RowSelectionModel.
Set your selection model to single select by configuring the sm (selection model) in grid panel as show below:
sm: new Ext.grid.RowSelectionModel({singleSelect:true})
Update:
Try reloading the grid using the load method or loadData method of the grid's store. Are you updating the grid on the client side? then maybe you can use loadData method. If you are using to get data from remote.. you can use load method. I use load method to update my grid with new records (after some user actions like add,refresh etc). Or you could simply reload as follows:
grid.getStore().reload();

ExtJS Paging Toolbar start page

I have an ExtJS GridPanel with a store and a paging toolbar at the bottom. I can manually set the start page through the browser using:
www.someurl.com/page/7
This will load the data store with page 7 correctly. However, the paging toolbar does not update the page number from the store (it still shows 1). I was under the impression that by changing the page of the store also changes the page in the paging toolbar, but this is not the case. Here is some example code:
var _store = new Ext.data.Store({
id : 'store_id',
remoteSort : true,
autoDestroy : true,
restful : true,
proxy : _proxy,
reader : _reader,
writer : _writer
});
var _pagingToolbar = new Ext.PagingToolbar({
displayInfo : true,
pageSize : 20,
store : _store
});
_I.grid = new Ext.ux.GridPanel({
id : _I.options.id+'_grid',
title : _I.options.title,
store : _store,
bbar : _pagingToolbar
});
_I.options.page = 7; //start store on page 7
_I.grid.render('somediv');
_store.load({params:{start:_I.options.page, limit:20, sort:'id', dir:'ASC'}});
Since the start page is set to 7, the data that loads in the store is correct, however, the page in the paging toolbar reads 2. I have tried manually setting the page with
_pagingToolbar.changePage(20); // should set page to 20
I get the same result, the data store loads up the correct page, however the toolbar text does not change. Is the order wrong? I also tried loading the store before the grid is rendered, to no avail, with same result.
As the store and the paging bar are inhernatly linked, you should simply be able to use the .changePage(n) method to change the page and automatically adjust the content of the store. You shouldnt need to also code the store with a recordset update. Also, are you 100% sure the store is displaying the correct records for page '7'?
What pagination info are you returning from the server side? PagingToolbar just takes that info from the store.
Could you please show your reader and the part of server response showing pagination data?

Resources