/**
* @class Roo.bootstrap.PagingToolbar
- * @extends Roo.Row
+ * @extends Roo.bootstrap.NavSimplebar
* A specialized toolbar that is bound to a {@link Roo.data.Store} and provides automatic paging controls.
* @constructor
* Create a new PagingToolbar
* @param {Object} config The config object
+ * @param {Roo.data.Store} store
*/
Roo.bootstrap.PagingToolbar = function(config)
{
// old args format still supported... - xtype is prefered..
// created from xtype...
- var ds = config.dataSource;
+
+ this.ds = config.dataSource;
+
+ if (config.store && !this.ds) {
+ this.store= Roo.factory(config.store, Roo.data);
+ this.ds = this.store;
+ this.ds.xmodule = this.xmodule || false;
+ }
+
this.toolbarItems = [];
if (config.items) {
this.toolbarItems = config.items;
-// config.items = [];
}
Roo.bootstrap.PagingToolbar.superclass.constructor.call(this, config);
- this.ds = ds;
+
this.cursor = 0;
- if (ds) {
- this.bind(ds);
+
+ if (this.ds) {
+ this.bind(this.ds);
}
- this.navgroup = new Roo.bootstrap.NavGroup({ cls: 'pagination' });
+ if (Roo.bootstrap.version == 4) {
+ this.navgroup = new Roo.bootstrap.ButtonGroup({ cls: 'pagination' });
+ } else {
+ this.navgroup = new Roo.bootstrap.NavGroup({ cls: 'pagination' });
+ }
};
// add the buttons to the navgroup
if(this.displayInfo){
- Roo.log(this.el.select('ul.navbar-nav',true).first());
this.el.select('ul.navbar-nav',true).first().createChild({cls:'x-paging-info'});
this.displayEl = this.el.select('.x-paging-info', true).first();
// var navel = this.navgroup.addItem( { tagtype : 'span', html : '', cls : 'x-paging-info', preventDefault : true } );
var _this = this;
if(this.buttons){
- Roo.each(_this.buttons, function(e){
- Roo.factory(e).onRender(_this.el, null);
+ Roo.each(_this.buttons, function(e){ // this might need to use render????
+ Roo.factory(e).render(_this.el);
});
}
_this.navgroup.addItem(e);
});
+
this.first = this.navgroup.addItem({
tooltip: this.firstText,
- cls: "prev",
- icon : 'fa fa-backward',
+ cls: "prev btn-outline-secondary",
+ html : ' <i class="fa fa-step-backward"></i>',
disabled: true,
- listeners : { click : this.onClick.createDelegate(this, ["first"], true) }
+ preventDefault: true,
+ listeners : { click : this.onClick.createDelegate(this, ["first"]) }
});
this.prev = this.navgroup.addItem({
tooltip: this.prevText,
- cls: "prev",
- icon : 'fa fa-step-backward',
+ cls: "prev btn-outline-secondary",
+ html : ' <i class="fa fa-backward"></i>',
disabled: true,
- listeners : { click : this.onClick.createDelegate(this, ["prev"], true) }
+ preventDefault: true,
+ listeners : { click : this.onClick.createDelegate(this, ["prev"]) }
});
//this.addSeparator();
var field = this.navgroup.addItem( {
tagtype : 'span',
- cls : 'x-paging-position',
-
+ cls : 'x-paging-position btn-outline-secondary',
+ disabled: true,
html : this.beforePageText +
'<input type="text" size="3" value="1" class="x-grid-page-number">' +
'<span class="x-paging-after">' + String.format(this.afterPageText, 1) + '</span>'
//this.addSeparator();
this.next = this.navgroup.addItem({
tooltip: this.nextText,
- cls: "next",
- html : ' <i class="fa fa-step-forward">',
+ cls: "next btn-outline-secondary",
+ html : ' <i class="fa fa-forward"></i>',
disabled: true,
- listeners : { click : this.onClick.createDelegate(this, ["next"], true) }
+ preventDefault: true,
+ listeners : { click : this.onClick.createDelegate(this, ["next"]) }
});
this.last = this.navgroup.addItem({
tooltip: this.lastText,
- icon : 'fa fa-forward',
- cls: "next",
+ html : ' <i class="fa fa-step-forward"></i>',
+ cls: "next btn-outline-secondary",
disabled: true,
- listeners : { click : this.onClick.createDelegate(this, ["last"], true) }
+ preventDefault: true,
+ listeners : { click : this.onClick.createDelegate(this, ["last"]) }
});
//this.addSeparator();
this.loading = this.navgroup.addItem({
tooltip: this.refreshText,
- icon: 'fa fa-refresh',
-
- listeners : { click : this.onClick.createDelegate(this, ["refresh"], true) }
+ cls: "btn-outline-secondary",
+ html : ' <i class="fa fa-refresh"></i>',
+ preventDefault: true,
+ listeners : { click : this.onClick.createDelegate(this, ["refresh"]) }
});
-
+
},
// private
},
// private
- onLoad : function(ds, r, o){
- this.cursor = o.params ? o.params.start : 0;
- var d = this.getPageData(),
+ onLoad : function(ds, r, o)
+ {
+ this.cursor = o.params && o.params.start ? o.params.start : 0;
+
+ var d = this.getPageData(),
ap = d.activePage,
ps = d.pages;
- this.afterTextEl.dom.innerHTML = String.format(this.afterPageText, d.pages);
- this.field.dom.value = ap;
- this.first.setDisabled(ap == 1);
- this.prev.setDisabled(ap == 1);
- this.next.setDisabled(ap == ps);
- this.last.setDisabled(ap == ps);
- this.loading.enable();
- this.updateInfo();
+
+ this.afterTextEl.dom.innerHTML = String.format(this.afterPageText, d.pages);
+ this.field.dom.value = ap;
+ this.first.setDisabled(ap == 1);
+ this.prev.setDisabled(ap == 1);
+ this.next.setDisabled(ap == ps);
+ this.last.setDisabled(ap == ps);
+ this.loading.enable();
+ this.updateInfo();
},
// private
{
var v = this.field.dom.value, pageNum;
var increment = (e.shiftKey) ? 10 : 1;
- if(k == e.DOWN || k == e.LEFT || k == e.PAGEDOWN)
- increment *= -1;
+ if(k == e.DOWN || k == e.LEFT || k == e.PAGEDOWN) {
+ increment *= -1;
+ }
if(!v || isNaN(pageNum = parseInt(v, 10))) {
this.field.dom.value = d.activePage;
return;
},
// private
- onClick : function(o, e, which){
- Roo.log('onclick!!!!!!!!!!!!!!!!');
- if(typeof(e) == 'undefined'){
- which = o;
- } else {
- e.preventDefault();
- }
+ onClick : function(which){
var ds = this.ds;
if (!ds) {
projects / roojs1 / blobdiff