* @cfg {Boolean} scrollBody (true|false) default false - body scrolled / fixed header
* @cfg {Roo.bootstrap.PagingToolbar} footer a paging toolbar
* @cfg {Boolean} lazyLoad auto load data while scrolling to the end (default false)
+ * @cfg {Boolean} auto_hide_footer auto hide footer if only one page (default false)
*
* @constructor
CSS : Roo.util.CSS,
+ auto_hide_footer : false,
+
getAutoCreate : function()
{
var cfg = Roo.apply({}, Roo.bootstrap.Table.superclass.getAutoCreate.call(this));
}
// this lot should be simplifed...
+ var _t = this;
+ var cp = [
+ 'align',
+ 'bgcolor',
+ 'border',
+ 'cellpadding',
+ 'cellspacing',
+ 'frame',
+ 'rules',
+ 'sortable',
+ 'summary',
+ 'width'
+ ].forEach(function(k) {
+ if (_t[k]) {
+ cfg[k] = _t[k];
+ }
+ });
+
- if (this.align) {
- cfg.align=this.align;
- }
- if (this.bgcolor) {
- cfg.bgcolor=this.bgcolor;
- }
- if (this.border) {
- cfg.border=this.border;
- }
- if (this.cellpadding) {
- cfg.cellpadding=this.cellpadding;
- }
- if (this.cellspacing) {
- cfg.cellspacing=this.cellspacing;
- }
- if (this.frame) {
- cfg.frame=this.frame;
- }
- if (this.rules) {
- cfg.rules=this.rules;
- }
- if (this.sortable) {
- cfg.sortable=this.sortable;
- }
- if (this.summary) {
- cfg.summary=this.summary;
- }
- if (this.width) {
- cfg.width=this.width;
- }
if (this.layout) {
cfg.style = (typeof(cfg.style) == 'undefined') ? ('table-layout:' + this.layout + ';') : (cfg.style + ('table-layout:' + this.layout + ';'));
}
this.mainBody = this.el.select('tbody', true).first();
this.mainHead = this.el.select('thead', true).first();
+ this.mainFoot = this.el.select('tfoot', true).first();
- var _this = this;
-
Roo.each(this.el.select('thead th.sortable', true).elements, function(e){
- e.on('click', _this.sort, _this);
- });
+ e.on('click', this.sort, this);
+ }, this);
this.mainBody.on("click", this.onClick, this);
this.mainBody.on("dblclick", this.onDblClick, this);
}
}
- this.maskEl = new Roo.LoadMask(this.el, { store : this.ds, msgCls: 'roo-el-mask-msg' });
+ if(this.loadMask) {
+ this.maskEl = new Roo.LoadMask(this.el, { store : this.ds, msgCls: 'roo-el-mask-msg' });
+ }
this.store.on('load', this.onLoad, this);
this.store.on('beforeload', this.onBeforeLoad, this);
var rowIndex = this.getRowIndex(row);
// why??? - should these not be based on SelectionModel?
- if(this.cellSelection){
+ //if(this.cellSelection){
this.fireEvent('cellclick', this, cell, rowIndex, cellIndex, e);
- }
+ //}
- if(this.rowSelection){
+ //if(this.rowSelection){
this.fireEvent('rowclick', this, row, rowIndex, e);
- }
-
-
+ //}
+
},
onDblClick : function(e,el)
var sort = col.attr('sort');
var dir = 'ASC';
- if(col.select('i', true).first().hasClass('glyphicon-arrow-up')){
+ if(col.select('i', true).first().hasClass('fa-arrow-up')){
dir = 'DESC';
}
tag: 'th',
cls : 'x-hcol-' + i,
style : '',
+
html: cm.getColumnHeader(i)
};
+ var tooltip = cm.getColumnTooltip(i);
+ if (tooltip) {
+ c.tooltip = tooltip;
+ }
+
+
var hh = '';
if(typeof(config.sortable) != 'undefined' && config.sortable){
c.cls = 'sortable';
- c.html = '<i class="glyphicon"></i>' + c.html;
+ c.html = '<i class="fa"></i>' + c.html;
}
+ // could use BS4 hidden-..-down
+
if(typeof(config.lgHeader) != 'undefined'){
- hh += '<span class="hidden-xs hidden-sm hidden-md">' + config.lgHeader + '</span>';
+ hh += '<span class="hidden-xs hidden-sm hidden-md ">' + config.lgHeader + '</span>';
}
if(typeof(config.mdHeader) != 'undefined'){
if(typeof(config[size]) == 'undefined'){
return;
}
-
+
if (!config[size]) { // 0 = hidden
- c.cls += ' hidden-' + size;
+ // BS 4 '0' is treated as hide that column and below.
+ c.cls += ' hidden-' + size + ' hidden' + size + '-down';
return;
}
- c.cls += ' col-' + size + '-' + config[size];
-
+ c.cls += ' col-' + size + '-' + config[size] + (
+ size == 'xs' ? (' col-' + config[size] ) : '' // bs4 col-{num} replaces col-xs
+ );
+
+
});
header.cn.push(c)
- onLoad : function(e)
+ onLoad : function()
{
// Roo.log('ds onload');
this.clear();
var ds = this.store;
Roo.each(this.el.select('thead th.sortable', true).elements, function(e){
- e.select('i', true).removeClass(['glyphicon-arrow-up', 'glyphicon-arrow-down']);
+ e.select('i', true).removeClass(['fa-arrow-up', 'fa-arrow-down']);
if (_this.store.sortInfo) {
if(e.hasClass('sortable') && e.attr('sort') == _this.store.sortInfo.field && _this.store.sortInfo.direction.toUpperCase() == 'ASC'){
- e.select('i', true).addClass(['glyphicon-arrow-up']);
+ e.select('i', true).addClass(['fa-arrow-up']);
}
if(e.hasClass('sortable') && e.attr('sort') == _this.store.sortInfo.field && _this.store.sortInfo.direction.toUpperCase() == 'DESC'){
- e.select('i', true).addClass(['glyphicon-arrow-down']);
+ e.select('i', true).addClass(['fa-arrow-down']);
}
}
});
}, this);
}
+ var tfoot = this.el.select('tfoot', true).first();
+
+ if(this.footerShow && this.auto_hide_footer && this.mainFoot){
+
+ this.mainFoot.setVisibilityMode(Roo.Element.DISPLAY).hide();
+
+ var total = this.ds.getTotalCount();
+
+ if(this.footer.pageSize < total){
+ this.mainFoot.show();
+ }
+ }
+
Roo.each(this.el.select('tbody td', true).elements, function(e){
e.on('mouseover', _this.onMouseover, _this);
});
Roo.each(this.el.select('tbody td', true).elements, function(e){
e.on('mouseout', _this.onMouseout, _this);
});
- this.fireEvent('rowsrendered', this, e);
- //if(this.loadMask){
- // this.maskEl.hide();
- //}
+ this.fireEvent('rowsrendered', this);
this.autoSize();
},
record = ds.getAt(index);
}else{
index = ds.indexOf(record);
+ if (index < 0) {
+ return; // should not happen - but seems to
+ }
}
this.insertRow(ds, index, true);
this.autoSize();
var td = {
tag: 'td',
+ // this might end up displaying HTML?
+ // this is too messy... - better to only do it on columsn you know are going to be too long
+ //tooltip : (typeof(value) === 'object') ? '' : value,
cls : rowcfg.rowClass + ' x-col-' + i,
style: '',
html: (typeof(value) === 'object') ? '' : value
if(typeof(config.align) != 'undefined' && config.align.length){
td.style += ' text-align:' + config.align + ';';
}
+ if(typeof(config.valign) != 'undefined' && config.valign.length){
+ td.style += ' vertical-align:' + config.valign + ';';
+ }
if(typeof(config.width) != 'undefined'){
td.style += ' width:' + config.width + 'px;';
return;
}
+
+
if (!config[size]) { // 0 = hidden
- td.cls += ' hidden-' + size;
+ // BS 4 '0' is treated as hide that column and below.
+ td.cls += ' hidden-' + size + ' hidden' + size + '-down';
return;
}
- td.cls += ' col-' + size + '-' + config[size];
+ td.cls += ' col-' + size + '-' + config[size] + (
+ size == 'xs' ? (' col-' + config[size] ) : '' // bs4 col-{num} replaces col-xs
+ );
+
});
onBeforeLoad : function()
{
- //Roo.log('ds onBeforeLoad');
- //this.clear();
-
- //if(this.loadMask){
- // this.maskEl.show();
- //}
},
/**
* Remove all rows
var tfd = this.getGridEl().select('tfoot', true).first();
var cw = ctr.getWidth();
+ this.getGridEl().select('tfoot tr, tfoot td',true).setWidth(cw);
if (tbd) {
- tbd.setSize(ctr.getWidth(),
- ctr.getHeight() - ((thd ? thd.getHeight() : 0) + (tfd ? tfd.getHeight() : 0))
- );
+ tbd.setWidth(ctr.getWidth());
+ // if the body has a max height - and then scrolls - we should perhaps set up the height here
+ // this needs fixing for various usage - currently only hydra job advers I think..
+ //tdb.setHeight(
+ // ctr.getHeight() - ((thd ? thd.getHeight() : 0) + (tfd ? tfd.getHeight() : 0))
+ //);
var barsize = (tbd.dom.offsetWidth - tbd.dom.clientWidth);
cw -= barsize;
}
cw = Math.max(cw, this.totalWidth);
- this.getGridEl().select('tr',true).setWidth(cw);
+ this.getGridEl().select('tbody tr',true).setWidth(cw);
+
// resize 'expandable coloumn?
return; // we doe not have a view in this design..
this.mainHead.remove();
this.mainHead = table.createChild(header, this.mainBody, false);
+
+ Roo.each(this.el.select('thead th.sortable', true).elements, function(e){
+ e.on('click', this.sort, this);
+ }, this);
+
+
},
onHiddenChange : function(colModel, colIndex, hidden)
this.onHeaderChange();
this.onLoad();
+ },
+
+ setColumnWidth: function(col_index, width)
+ {
+ // width = "md-2 xs-2..."
+ if(!this.colModel.config[col_index]) {
+ return;
+ }
+
+ var w = width.split(" ");
+ var rows = this.el.dom.getElementsByClassName("x-col-"+col_index);
+
+ var h_row = this.el.dom.getElementsByClassName("x-hcol-"+col_index);
+
+
+ for(var j = 0; j < w.length; j++) {
+
+ if(!w[j]) {
+ continue;
+ }
+
+ var size_cls = w[j].split("-");
+
+ if(!Number.isInteger(size_cls[1] * 1)) {
+ continue;
+ }
+
+ if(!this.colModel.config[col_index][size_cls[0]]) {
+ continue;
+ }
+
+ if(!h_row[0].classList.contains("col-"+size_cls[0]+"-"+this.colModel.config[col_index][size_cls[0]])) {
+ continue;
+ }
+
+ h_row[0].classList.replace(
+ "col-"+size_cls[0]+"-"+this.colModel.config[col_index][size_cls[0]],
+ "col-"+size_cls[0]+"-"+size_cls[1]
+ );
+
+ for(var i = 0; i < rows.length; i++) {
+
+ var size_cls = w[j].split("-");
+
+ if(!Number.isInteger(size_cls[1] * 1)) {
+ continue;
+ }
+
+ if(!this.colModel.config[col_index][size_cls[0]]) {
+ continue;
+ }
+
+ if(!rows[i].classList.contains("col-"+size_cls[0]+"-"+this.colModel.config[col_index][size_cls[0]])) {
+ continue;
+ }
+
+ rows[i].classList.replace(
+ "col-"+size_cls[0]+"-"+this.colModel.config[col_index][size_cls[0]],
+ "col-"+size_cls[0]+"-"+size_cls[1]
+ );
+ }
+
+ this.colModel.config[col_index][size_cls[0]] = size_cls[1];
+ }
}
-
});
projects / roojs1 / blobdiff