PDA

View Full Version : Ext.ux.grid.PageSizer and Ext.ux.grid.AutoRefresher



devnull
31 Oct 2007, 9:32 AM
I have converted two extension that I had for Ext 1 (that are based on someone elses code) to Ext 2 plugins. I know there are other versions of the PageSizer, but none of them had all the options that I wanted. Let me know if either of these seem to be missing features that would be usefull.
Also, I notice that there have been several different naming conventions used for plugins, is there one in particular that is preferred?

Ext.ux.grid.PageSizer; Use with a PagingToolbar.


/*
* Ext.ux.grid.PageSizer
*
* Dynamically sets the PageSize config of a PagingToolbar
*/
Ext.namespace("Ext.ux.grid");
Ext.ux.grid.PageSizer = function(config){
Ext.apply(this, config);
};

Ext.extend(Ext.ux.grid.PageSizer, Ext.util.Observable, {
/**
* @cfg {Array} sizes
* An array of pageSize choices to populate the comboBox with
*/
sizes: [[10],[25],[50]],
/**
* @cfg {String} beforeText
* Text to display before the comboBox
*/
beforeText: 'Show',
/**
* @cfg {String} afterText
* Text to display after the comboBox
*/
afterText: 'records at a time',
/**
* @cfg {Mixed} addBefore
* Toolbar item(s) to add before the PageSizer
*/
addBefore: '-',
/**
* @cfg {Mixed} addAfter
* Toolbar item(s) to be added after the PageSizer
*/
addAfter: null,
init: function(PagingToolbar){
this.PagingToolbar = PagingToolbar;

this.store = PagingToolbar.store;

PagingToolbar.on("render", this.onRender, this);
},
update: function(c){
this.PagingToolbar.pageSize = c.getValue();
this.PagingToolbar.onClick("refresh");
},
onRender: function(){
var config = {
maskRe: /^\d*$/,
store: new Ext.data.SimpleStore({
fields: ['pageSize'],
data : this.sizes
}),
displayField:'pageSize',
typeAhead: true,
mode: 'local',
emptyText: this.pageSize,
triggerAction: 'all',
selectOnFocus:true,
value: this.PagingToolbar.pageSize,
width:50
}
Ext.apply(config,this.comboCfg)
var combo = new Ext.form.ComboBox(config);
combo.on("change", this.update, this);
combo.on("select", this.update, this);
if (this.addBefore) {this.PagingToolbar.add(this.addBefore)};
this.PagingToolbar.add(this.beforeText,combo,this.afterText);
if (this.addAfter) {this.PagingToolbar.add(this.addAfter)};
combo.getEl().on('keydown',function(e){
var key = e.getKey();
switch (key) {
case Ext.EventObject.ENTER:
this.update(combo);
}
},this);
}
})


Example:


var grid = new Ext.grid.GridPanel({
...
bbar: new Ext.PagingToolbar({
pageSize: 25,
...
plugins: new Ext.ux.grid.PageSizer({
afterText: 'sales at a time',
sizes: [[10],[25],[50],[100]],
comboCfg: {width: 100}
})
})
...
})


Ext.ux.grid.AutoRefresher; Designed for use with a PagingToolbar, but can be used on any Toolbar if a 'store' config option is passed to it.


/*
* Ext.ux.grid.AutoRefresher
*
* Refresh a grid every x minutes
*/
Ext.namespace("Ext.ux.grid");
Ext.ux.grid.AutoRefresher = function(config){
Ext.apply(this, config);
};
Ext.extend(Ext.ux.grid.AutoRefresher, Ext.util.Observable, {
/**
* @cfg {Array} intervals
* List of refresh intervals (as minutes) to populate the comboBox with
*/
intervals: [[1],[5],[10],[15],[30],[60]],
/**
* @cfg {String} beforeText
* Text to display before the comboBox
*/
beforeText: 'Refresh every',
/**
* @cfg {String} afterText
* Text to display after the comboBox
*/
afterText: 'minutes',
/**
* @cfg {Mixed} addBefore
* Toolbar item(s) to add before the PageSizer
*/
addBefore: '-',
/**
* @cfg {Mixed} addAfter
* Toolbar item(s) to be added after the PageSizer
*/
addAfter: null,
init: function(Toolbar) {
this.Toolbar = Toolbar;

if (Toolbar.store) {this.store = Toolbar.store}

Toolbar.on("render", this.onRender, this);

this.store.startAutoRefresh = function(interval){
if(this.autoRefreshProcId){
clearInterval(this.autoRefreshProcId);
}
this.autoRefreshProcId = setInterval(this.reload.createDelegate(this, [{}]), interval*1000);
}
this.store.stopAutoRefresh = function(){
if(this.autoRefreshProcId){
clearInterval(this.autoRefreshProcId);
}
}
},
update: function(c){
var value = c.getValue();
if (value > 0) {
this.store.startAutoRefresh(value*60);
} else {
this.store.stopAutoRefresh();
}
},
onRender: function(){
this.intervals.unshift(['']); //add a 'never' value
var config = {
maskRe: /^\d*$/,
store: new Ext.data.SimpleStore({
fields: ['autoRefresh'],
data : this.intervals
}),
displayField:'autoRefresh',
typeAhead: true,
mode: 'local',
emptyText: 'never',
triggerAction: 'all',
selectOnFocus:true,
width:50
};
Ext.apply(config,this.comboCfg)
var combo = new Ext.form.ComboBox(config);
combo.on("change", this.update, this);
combo.on("select", this.update, this);
if (this.addBefore) {this.Toolbar.add(this.addBefore)};
this.Toolbar.add(this.beforeText,combo,this.afterText);
if (this.addAfter) {this.Toolbar.add(this.addAfter)};
combo.getEl().on('keydown',function(e){
var key = e.getKey();
switch (key) {
case Ext.EventObject.ENTER:
this.update(combo);
}
},this);
}
});


Example:


var grid = new Ext.grid.GridPanel({
...
bbar: new Ext.PagingToolbar({
...
plugins: new Ext.ux.grid.AutoRefresher()
})
...
})

Hani
31 Oct 2007, 9:37 AM
PageSizer looks very useful! One suggestion, how about using a template for the text? That way it can all be in one string and so more easily internationalised.

devnull
31 Oct 2007, 10:07 AM
Good idea, I'll see about doing that.
Seems I even remember considering that, cant recall why it never made it past that stage...

galdaka
31 Oct 2007, 3:29 PM
Kive example please!!

Thanks in advance and good work!!

andrei.neculau
1 Nov 2007, 8:29 AM
I second galdaka! Live demo/example, please!

mjoksa
13 Nov 2007, 6:23 AM
I was looking just for something like this.
10x, U made my day...

andrei.neculau
13 Nov 2007, 6:37 AM
@mjocksa - if you are referring to a pageSizer, you might want to check http://extjs.com/forum/showthread.php?t=17257 which is an improved version.

gthe
25 Jun 2008, 9:58 AM
This old message, but all the same I shall risk to ask a question.
I have a Tabpanel with several tabs, on each of which is Grid, with this plug-in.
A question - how to stop autoupdating those grids which are not on visible tabs.
My idea was - to catch Grid's events (hide/show) and to stop/start autoupdating Grid's store.



cacti.plugin.snmptt.def_grid = Ext.extend(Ext.grid.GridPanel, {

initComponent:function() {
Ext.apply(this, {

viewConfig:{forceFit:true},
layout: 'fit',
loadMask: true,


}); // eo apply
this.bbar = new Ext.PagingToolbar({
plugins:[(new Ext.ux.Andrie.pPageSize({beforeText : 'Rows per page:', afterText : ''})),(new Ext.ux.Andrie.AutoRefresher)],
pageSize: 50,
store: this.store,
stateful : true,
displayInfo: true,
displayMsg: 'Displaying rows {0} - {1} of {2} for {3}sec ({4}ms/row)',
emptyMsg: "No rows to display"
});

// call parent
cacti.plugin.snmptt.def_grid.superclass.initComponent.apply(this, arguments);
}, // eo function initComponent

onRender:function() {
this.store.load({params:{start:0, limit:50, filter: "null"}});


this.on({
render:function(){
Ext.Msg.alert('Message', 'The render=' );
},
hide:function(){
Ext.Msg.alert('Message', 'The hide=' );
},
resize:function(){
Ext.Msg.alert('Message', 'The resize=' );
}
});

cacti.plugin.snmptt.def_grid.superclass.onRender.apply(this, arguments);

}

});

Ext.reg('snmptt_def_grid', cacti.plugin.snmptt.def_grid);


With this extended Grid I see only render and resize alert and don't see hide alert when I switched on another tab(grid).

How it is possible to solve the given problem?
Thanks and sorry for my English.

border9
17 Jul 2008, 11:36 AM
When you refresh the page its always at Never. How do i go about making your Autorefresher always set to at least 1 minute rather then having to change it each time? Thanks

mathiasuhl
31 Jul 2008, 8:23 AM
i've got a problem with the autoupdate ext and a edit grid. Everytime a update is done, the editor loses the foucus on the cell. Any idea ?

Jets
20 Aug 2008, 11:06 PM
excellent work!!

gthe
11 Sep 2008, 10:01 PM
When you refresh the page its always at Never. How do i go about making your Autorefresher always set to at least 1 minute rather then having to change it each time? Thanks

Here is my version for this:


/*

* Ext.ux.grid.AutoRefresher

*

* Refresh a grid every x minutes

*/


Ext.ux.Andrie.AutoRefresher = function(config){

Ext.apply(this, config);

};

Ext.extend(Ext.ux.Andrie.AutoRefresher, Ext.util.Observable, {

/**

* @cfg {Array} intervals

* List of refresh intervals (as minutes) to populate the comboBox with

*/

intervals: [[0],[0.2],[0.5],[1],[5],[10],[15],[30],[60]],


/**
* @cfg {integer} interval
* default value
*/
interval: 0,


/**

* @cfg {String} beforeText

* Text to display before the comboBox

*/

beforeText: 'Refresh every',

/**

* @cfg {String} afterText

* Text to display after the comboBox

*/

afterText: 'minutes',

/**

* @cfg {Mixed} addBefore

* Toolbar item(s) to add before the PageSizer

*/

addBefore: '-',

/**

* @cfg {Mixed} addAfter

* Toolbar item(s) to be added after the PageSizer

*/

addAfter: null,

init: function(Toolbar) {

this.Toolbar = Toolbar;



if (Toolbar.store) {this.store = Toolbar.store}



Toolbar.on("render", this.onRender, this);



this.store.startAutoRefresh = function(interval){

if(this.autoRefreshProcId){

clearInterval(this.autoRefreshProcId);

}

this.autoRefreshProcId = setInterval(this.reload.createDelegate(this, [{}]), interval*1000);

}

this.store.stopAutoRefresh = function(){

if(this.autoRefreshProcId){

clearInterval(this.autoRefreshProcId);

}

}

},

update: function(c){

var value = c.getValue();

if (value > 0) {

this.store.startAutoRefresh(value*60);

} else {

this.store.stopAutoRefresh();

}

},

onRender: function(){

// this.intervals.unshift(['']); //add a 'never' value

var config = {

maskRe: /^d*$/,

store: new Ext.data.SimpleStore({

fields: ['autoRefresh'],

data : this.intervals

}),

displayField:'autoRefresh',

typeAhead: true,

mode: 'local',

//emptyText: 'never',

triggerAction: 'all',


selectOnFocus:true,

width:50

};

Ext.apply(config,this.comboCfg)

var combo = new Ext.form.ComboBox(config);

combo.on("change", this.update, this);

combo.on("select", this.update, this);

if (this.addBefore) {this.Toolbar.add(this.addBefore)};

this.Toolbar.add(this.beforeText,combo,this.afterText);

if (this.addAfter) {this.Toolbar.add(this.addAfter)};

combo.getEl().on('keydown',function(e){

var key = e.getKey();

switch (key) {

case Ext.EventObject.ENTER:

this.update(combo);

}

},this);


combo.setValue(this.interval);

if (this.interval > 0) {

this.store.startAutoRefresh(this.interval*60);

} else {

this.store.stopAutoRefresh();

}

},


});
Use it:

plugins:[(new Ext.ux.Andrie.AutoRefresher({intervals: [[0],[0.5],[1],[5]], interval: 0.5 }))],I have one more idea - stop autorefresh when grid is inactive, but I cannot get access to grid through store. (this.store.getGrid or something similar) :-?

border9
11 Oct 2008, 5:53 AM
yes i see where your going with that but i need it to be able to do it at least 1 minute. and not have to have the user change it every time they load the page. It can start at 1 minute and they can change it if they need to, but if its at 0, people are forget and wont remember to change it from 0 - 1.

See where im going with that?

NM im an and didn't read the last bit of code you wrote :) Thanks

border9
11 Oct 2008, 6:35 AM
Ok, so i got it kinda figured out but the issue im having now is that when the script loads its still not auto refreshing until you actually select something, I need it to be selected on 1 - 5 minutes automaticly and from the time the grid loads refresh at that rate rather then having to select an item.

I have it so the default Value is set to 1 but the actual script doesn't fire until you select an item in the drop down.

Any ideas? Thanks

Glen

gthe
11 Oct 2008, 7:42 AM
But the script works how you want!

I corrected one error - new version:


/*

* Ext.ux.grid.AutoRefresher

*

* Refresh a grid every x minutes

*/


Ext.ux.Andrie.AutoRefresher = function(config){

Ext.apply(this, config);

};

Ext.extend(Ext.ux.Andrie.AutoRefresher, Ext.util.Observable, {

/**

* @cfg {Array} intervals

* List of refresh intervals (as minutes) to populate the comboBox with

*/

intervals: [[0],[0.2],[0.5],[1],[5],[10],[15],[30],[60]],


/**
* @cfg {integer} interval
* default value
*/
interval: 0,


/**

* @cfg {String} beforeText

* Text to display before the comboBox

*/

beforeText: 'Refresh every',

/**

* @cfg {String} afterText

* Text to display after the comboBox

*/

afterText: 'minutes',

/**

* @cfg {Mixed} addBefore

* Toolbar item(s) to add before the PageSizer

*/

addBefore: '-',

/**

* @cfg {Mixed} addAfter

* Toolbar item(s) to be added after the PageSizer

*/

addAfter: null,

init: function(Toolbar) {

this.Toolbar = Toolbar;



if (Toolbar.store) {this.store = Toolbar.store}



Toolbar.on("render", this.onRender, this);



this.store.startAutoRefresh = function(interval){

if(this.autoRefreshProcId){

clearInterval(this.autoRefreshProcId);

}

this.autoRefreshProcId = setInterval(this.reload.createDelegate(this, [{}]), interval*1000);

}

this.store.stopAutoRefresh = function(){

if(this.autoRefreshProcId){

clearInterval(this.autoRefreshProcId);

}

}

},

update: function(c){

var value = c.getValue();

if (value > 0) {

this.store.startAutoRefresh(value*60);

} else {

this.store.stopAutoRefresh();

}

},

onRender: function(){

// this.intervals.unshift(['']); //add a 'never' value

var config = {

maskRe: /^d*$/,

store: new Ext.data.SimpleStore({

fields: ['autoRefresh'],

data : this.intervals

}),

displayField:'autoRefresh',

typeAhead: true,

mode: 'local',

//emptyText: 'never',

triggerAction: 'all',


selectOnFocus:true,

width:50

};

Ext.apply(config,this.comboCfg)

var combo = new Ext.form.ComboBox(config);

combo.on("change", this.update, this);

combo.on("select", this.update, this);

if (this.addBefore) {this.Toolbar.add(this.addBefore)};

this.Toolbar.add(this.beforeText,combo,this.afterText);

if (this.addAfter) {this.Toolbar.add(this.addAfter)};

combo.getEl().on('keydown',function(e){

var key = e.getKey();

switch (key) {

case Ext.EventObject.ENTER:

this.update(combo);

}

},this);


combo.setValue(this.interval);

if (this.interval > 0) {

this.store.startAutoRefresh(this.interval*60);

} else {

this.store.stopAutoRefresh();

}

}


});

border9
11 Oct 2008, 7:51 AM
Awesome man, Thank you very much :)

border9
11 Oct 2008, 8:33 AM
OK, new problem, before it when it refreshed it stayed on the page you where on and the area you where in.

Now, it goes back to the first page at the top again.

Any ideas?

gthe
11 Oct 2008, 10:18 AM
I think that this is not this plugin problem, but BaseParams.

border9
11 Oct 2008, 4:24 PM
I dont follow what do you mean?


mainquoteStore.load({params:{start: 0, limit: 20}});

Where it loads the store into the grid?

I set it up exactly as you have it layed out above, but when the page reloads it goes back to the very first page and to the top of it rather then refreshing and staying at the current location.

How would you recommend fixing this?

Thanks
Glen

Edit: Ok i played with it for a few minutes and i have it staying on the page selected but its jumping to the very top of that page, rather then Staying in the middle of the Grid / Store. Still not sure why its doing that.

gthe
12 Oct 2008, 8:46 AM
may be this ? - http://extjs.com/forum/showthread.php?t=8215

johnsbrn
14 Oct 2008, 4:41 PM
OK, new problem, before it when it refreshed it stayed on the page you where on and the area you where in.

Now, it goes back to the first page at the top again.

Any ideas?

this.autoRefreshProcId = setInterval(this.reload.createDelegate(this, [null]), this.interval*1000);

passing {} uses default options. Passing null uses the options from the last load

johnsbrn
7 Nov 2008, 2:06 PM
Autorefresh stopped working with 2.2. The problem appears to be changes to the Combo.js file, I fixed it by adding valueField to the combo config in onRender


var config = {
maskRe: /^d*$/,
store: new Ext.data.SimpleStore({
fields: ['autoRefresh'],
data : this.intervals
}),
displayField:'autoRefresh',
valueField:'autoRefresh',
typeAhead: true,
mode: 'local',
value: 2,
emptyText: 'never',
triggerAction: 'all',
selectOnFocus:true,
width:50
};

xava
7 Mar 2009, 6:12 PM
oh! great work!!

krzak
7 Sep 2009, 3:42 AM
I'm getting this error:


Błąd: combo.getEl() is undefined
Source file: http://localhost/static/extxplus/Ext.ux.grid.PageSizer.js
Row: 142

krzak
7 Sep 2009, 5:54 AM
I adapted it to Ext 3.0.0. Here is modified version:


/*
* Ext.ux.grid.PageSizer
*
* Dynamically sets the PageSize config of a PagingToolbar
* adapted for 3.0.0 Marcin Krzyzanowski
*/

Ext.namespace("Ext.ux.grid");

Ext.ux.grid.PageSizer = function(config){
Ext.apply(this, config);
};



Ext.extend(Ext.ux.grid.PageSizer, Ext.util.Observable, {

/**
* @cfg {Array} sizes
* An array of pageSize choices to populate the comboBox with
*/

sizes: [[10],[25],[50]],

/**
* @cfg {String} beforeText
* Text to display before the comboBox
*/

beforeText: 'Show',

/**
* @cfg {String} afterText
* Text to display after the comboBox
*/

afterText: 'records at a time',

/**
* @cfg {String} emptyText
* Text to display if valye is empty
*/

emptyText: 'never',

/**
* @cfg {Mixed} addBefore
* Toolbar item(s) to add before the PageSizer
*/

addBefore: '-',

/**
* @cfg {Mixed} addAfter
* Toolbar item(s) to be added after the PageSizer
*/

addAfter: null,

init: function(PagingToolbar){
this.PagingToolbar = PagingToolbar;
this.store = PagingToolbar.store;
PagingToolbar.on("render", this.onRender, this);

},

update: function(c){
this.PagingToolbar.pageSize = c.getValue();
alert(this.PagingToolbar.pageSize);
this.PagingToolbar.doLoad(this.PagingToolbar.cursor); //due to bug in 3.0.0
},

onRender: function(){

var config = {
maskRe: /^\d*$/,
store: new Ext.data.SimpleStore({
fields: ['autoRefresh'],
data : this.sizes
}),
displayField:'autoRefresh',
value: this.PagingToolbar.pageSize,
typeAhead: false,
mode: 'local',
emptyText: this.emptyText,
triggerAction: 'all',
selectOnFocus:false,
enableKeyEvents: true,
width:50,
listeners: {
scope: this,
'keyup': function(cmb,e) {
var key = e.getKey();
switch (key) {
case Ext.EventObject.ENTER:
this.update(cmb);
}
},
'select': function(cmb) {
this.update(cmb);
}
}
};


Ext.apply(config,this.comboCfg)

var combo = new Ext.form.ComboBox(config);
if (this.addBefore) {this.PagingToolbar.add(this.addBefore)};

this.PagingToolbar.add(this.beforeText,combo,this.afterText);

if (this.addAfter) {this.PagingToolbar.add(this.addAfter)};
}

})

dotnetwise
20 Mar 2010, 3:28 PM
How to make the pageSize and pageIndex stateful and persist/load them to/from the current state manager?

dotnetwise
20 Mar 2010, 3:42 PM
When the pageSize is changed, by pressing next / prev the page jumps from 1 to 61 instead of 2. ExtJS 3.1
Any ideas why?

Lonely Wolf
21 Mar 2010, 7:45 AM
I refactored this code, it was tested under 3.2beta. Worked fine.


/*
* Ext.ux.grid.AutoRefresher
*
* Refresh a grid every x minutes
*/
Ext.namespace("Ext.ux.grid");
Ext.ux.grid.AutoRefresher = Ext.extend(Object, {
/**
* @cfg {Array} intervals
* List of refresh intervals (as minutes) to populate the comboBox with
*/
intervals: [[0],[1],[5],[10],[15],[30],[60]],

/**
* @cfg {String} beforeText
* Text to display before the comboBox
*/
beforeText: 'Обновлять каждые', // Refresh every

/**
* @cfg {String} afterText
* Text to display after the comboBox
*/
afterText: 'минут', // minutes

/**
* @cfg {Mixed} addBefore
* Toolbar item(s) to add before the PageSizer
*/
addBefore: '-',

/**
* @cfg {Mixed} addAfter
* Toolbar item(s) to be added after the PageSizer
*/
addAfter: null,

init: function(Toolbar) {

this.Toolbar = Toolbar;

if (Toolbar.store) {
this.store = Toolbar.store
}

Toolbar.on("render", this.onRender, this);
Toolbar.on("beforedestroy", this.beforedestroy, this);

this.store.startAutoRefresh = function(interval){
if(this.autoRefreshProcId){
clearInterval(this.autoRefreshProcId);
}
this.autoRefreshProcId = setInterval(this.reload.createDelegate(this, [{}]), interval*1000);
}

this.store.stopAutoRefresh = function(){
if(this.autoRefreshProcId){
clearInterval(this.autoRefreshProcId);
}
}
},
update: function(c){
var value = c.getValue();
if (value > 0) {
this.store.startAutoRefresh(value*60);
} else {
this.store.stopAutoRefresh();
}
},
beforedestroy: function(){
this.store.stopAutoRefresh();
},
onRender: function(){
var config = {
store: new Ext.data.SimpleStore({
fields: ['autoRefresh'],
data : this.intervals
}),
displayField: 'autoRefresh',
typeAhead: true,
mode: 'local',
value: 0,
triggerAction: 'all',
selectOnFocus: true,
width: 50
};

Ext.apply(config,this.comboCfg)
var combo = new Ext.form.ComboBox(config);
combo.on("select", this.update, this);

var position = 11;
if (this.addBefore) {
this.Toolbar.insert(position, this.addBefore);
position++;
};

this.Toolbar.insert(position, this.beforeText,combo,this.afterText);
position += 3;

if (this.addAfter) {
this.Toolbar.insert(position, this.addAfter);
};

}

});

dotnetwise
22 Mar 2010, 1:21 AM
Lonely Wolf - your post has nothing to do with the bugs I've reported. I don't want an AutoRefresh, but with an "user customizable" items/page combo

Jerem
2 Apr 2010, 9:47 AM
When the pageSize is changed, by pressing next / prev the page jumps from 1 to 61 instead of 2. ExtJS 3.1
Any ideas why?

I did the following correction in the code for PageSizer provided by krzak (thanks !) to remove this issue:


update: function(c){
this.PagingToolbar.pageSize = parseInt(c.getValue());
//alert(this.PagingToolbar.pageSize);
this.PagingToolbar.doLoad(this.PagingToolbar.cursor); //due to bug in 3.0.0
},The "parseInt()" was missing, causing pageSize to be string-concatenated instead of summed.
BTW I also commented the alert dialog poping-up ;)

wemerson.januario
23 Mar 2011, 3:46 PM
How to stop task runner when the grid is destroyed?

I hava a grid in a tabPanel and when I close the window, the store keep reloading.
I would like to stop the runner when the paging toolbar is destroyed

wemerson.januario
23 Mar 2011, 3:53 PM
resolved using this



pagingToolbar.on('beforedestroy', function(p){
this.store.stopAutoRefresh()
}, this);