/**
* @class Roo.bootstrap.PagingToolbar
- * @extends Roo.bootstrap.NavSimplebar
+ * @extends Roo.bootstrap.nav.Simplebar
* A specialized toolbar that is bound to a {@link Roo.data.Store} and provides automatic paging controls.
* @constructor
* Create a new PagingToolbar
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.nav.Group({ cls: 'pagination' });
+ }
};
-Roo.extend(Roo.bootstrap.PagingToolbar, Roo.bootstrap.NavSimplebar, {
+Roo.extend(Roo.bootstrap.PagingToolbar, Roo.bootstrap.nav.Simplebar, {
/**
- * @cfg {Roo.data.Store} dataSource
+ * @cfg {Roo.bootstrap.Button} buttons[]
+ * Buttons for the toolbar
+ */
+ /**
+ * @cfg {Roo.data.Store} store
* The underlying data store providing the paged data
*/
/**
if(this.buttons){
Roo.each(_this.buttons, function(e){ // this might need to use render????
- Roo.factory(e).onRender(_this.el, null);
+ Roo.factory(e).render(_this.el);
});
}
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,
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,
preventDefault: true,
listeners : { click : this.onClick.createDelegate(this, ["prev"]) }
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,
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,
preventDefault: true,
listeners : { click : this.onClick.createDelegate(this, ["last"]) }
//this.addSeparator();
this.loading = this.navgroup.addItem({
tooltip: this.refreshText,
- icon: 'fa fa-refresh',
+ cls: "btn-outline-secondary",
+ html : ' <i class="fa fa-refresh"></i>',
preventDefault: true,
listeners : { click : this.onClick.createDelegate(this, ["refresh"]) }
});
// private
onLoad : function(ds, r, o)
{
- this.cursor = o.params ? o.params.start : 0;
+ this.cursor = o.params && o.params.start ? o.params.start : 0;
+
var d = this.getPageData(),
ap = d.activePage,
ps = d.pages;
- if(this.afterTextEl) {
- this.afterTextEl.dom.innerHTML = String.format(this.afterPageText, 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);
},
// private
- onLoadError : function(){
+ onLoadError : function(proxy, o){
this.loading.enable();
+ if (this.ds.events.loadexception.listeners.length < 2) {
+ // nothing has been assigned to loadexception except this...
+ // so
+ Roo.MessageBox.alert("Error loading",o.raw.errorMsg);
+
+ }
},
// private