devnull
10-31-2007, 01:32 PM
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()
})
...
})
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()
})
...
})