* @param {Roo.EventObject} e
*/
"rowdblclick" : true,
+ /**
+ * @event mouseover
+ * Fires when a mouseover occur
+ * @param {Roo.bootstrap.Table} this
+ * @param {Roo.Element} el
+ * @param {Number} rowIndex
+ * @param {Number} columnIndex
+ * @param {Roo.EventObject} e
+ */
+ "mouseover" : true,
+ /**
+ * @event mouseout
+ * Fires when a mouseout occur
+ * @param {Roo.bootstrap.Table} this
+ * @param {Roo.Element} el
+ * @param {Number} rowIndex
+ * @param {Number} columnIndex
+ * @param {Roo.EventObject} e
+ */
+ "mouseout" : true,
/**
* @event rowclass
* Fires when a row is rendered, so you can change add a style to it.
CellSelection : false,
layout : false,
+ // Roo.Element - the tbody
+ mainBody: false,
getAutoCreate : function(){
var cfg = Roo.apply({}, Roo.bootstrap.Table.superclass.getAutoCreate.call(this));
return;
}
- Roo.log('initEvents with ds!!!!');
+ //Roo.log('initEvents with ds!!!!');
+
+ this.mainBody = this.el.select('tbody', true).first();
+
var _this = this;
this.store.on('load', this.onLoad, this);
this.store.on('beforeload', this.onBeforeLoad, this);
+ this.store.on('update', this.onUpdate, this);
+
+ },
+
+ onMouseover : function(e, el)
+ {
+ var cell = Roo.get(el);
+
+ if(!cell){
+ return;
+ }
+
+ if(e.getTarget().nodeName.toLowerCase() != 'td'){
+ cell = cell.findParent('td', false, true);
+ }
+
+ var row = cell.findParent('tr', false, true);
+ var cellIndex = cell.dom.cellIndex;
+ var rowIndex = row.dom.rowIndex - 1; // start from 0
+
+ this.fireEvent('mouseover', this, cell, rowIndex, cellIndex, e);
+
+ },
+
+ onMouseout : function(e, el)
+ {
+ var cell = Roo.get(el);
+
+ if(!cell){
+ return;
+ }
+
+ if(e.getTarget().nodeName.toLowerCase() != 'td'){
+ cell = cell.findParent('td', false, true);
+ }
+
+ var row = cell.findParent('tr', false, true);
+ var cellIndex = cell.dom.cellIndex;
+ var rowIndex = row.dom.rowIndex - 1; // start from 0
+
+ this.fireEvent('mouseout', this, cell, rowIndex, cellIndex, e);
},
onClick : function(e, el)
{
var cell = Roo.get(el);
+
+ if(!cell || (!this.CellSelection && !this.RowSelection)){
+ return;
+ }
+
+
+ if(e.getTarget().nodeName.toLowerCase() != 'td'){
+ cell = cell.findParent('td', false, true);
+ }
+
var row = cell.findParent('tr', false, true);
var cellIndex = cell.dom.cellIndex;
- var rowIndex = row.dom.rowIndex;
+ var rowIndex = row.dom.rowIndex - 1;
if(this.CellSelection){
this.fireEvent('cellclick', this, cell, rowIndex, cellIndex, e);
onDblClick : function(e,el)
{
- var cell = Roo.get(el);;
+ var cell = Roo.get(el);
+
+ if(!cell || (!this.CellSelection && !this.RowSelection)){
+ return;
+ }
+
+ if(e.getTarget().nodeName.toLowerCase() != 'td'){
+ cell = cell.findParent('td', false, true);
+ }
+
var row = cell.findParent('tr', false, true);
var cellIndex = cell.dom.cellIndex;
- var rowIndex = row.dom.rowIndex;
+ var rowIndex = row.dom.rowIndex - 1;
if(this.CellSelection){
this.fireEvent('celldblclick', this, cell, rowIndex, cellIndex, e);
for(var i = 0, len = cm.getColumnCount(); i < len; i++){
var config = cm.config[i];
-
- if(typeof(config.hidden) != 'undefined' && config.hidden){
- continue;
- }
var c = {
tag: 'th',
html: cm.getColumnHeader(i)
};
+ if(typeof(config.hidden) != 'undefined' && config.hidden){
+ c.style += ' display:none;';
+ }
+
if(typeof(config.dataIndex) != 'undefined'){
c.sort = config.dataIndex;
}
return footer;
},
+
+
onLoad : function()
{
Roo.log('ds onload');
var _this = this;
var cm = this.cm;
+ var ds = this.store;
Roo.each(this.el.select('thead th.sortable', true).elements, function(e){
e.removeClass(['glyphicon', 'glyphicon-arrow-up', 'glyphicon-arrow-down']);
}
});
- var tbody = this.el.select('tbody', true).first();
+ var tbody = this.mainBody;
var renders = [];
- if(this.store.getCount() > 0){
- this.store.data.each(function(d,rowIndex){
- var row = {
- tag : 'tr',
- cn : []
- };
-
- for(var i = 0, len = cm.getColumnCount(); i < len; i++){
- var config = cm.config[i];
-
- if(typeof(config.hidden) != 'undefined' && config.hidden){
- continue;
- }
-
- var renderer = cm.getRenderer(i);
- var value = '';
- var id = Roo.id();
-
- if(typeof(renderer) !== 'undefined'){
- value = renderer(d.data[cm.getDataIndex(i)], false, d);
- }
-
- if(typeof(value) === 'object'){
- renders.push({
- container : id,
- cfg : value
- })
- }
-
- var rowcfg = {
- record: d,
- rowIndex : rowIndex,
- colIndex : i,
- rowClass : ''
- }
-
- _this.fireEvent('rowclass', this, rowcfg);
-
- var td = {
- tag: 'td',
- id: id,
- cls : rowcfg.rowClass,
- style: '',
- html: (typeof(value) === 'object') ? '' : value
- };
-
- if(typeof(config.align) != 'undefined' && config.align.length){
- td.style += ' text-align:' + config.align + ';';
- }
-
- if(typeof(config.width) != 'undefined'){
- td.style += ' width:' + config.width + 'px;';
- }
-
-
- row.cn.push(td);
-
- }
+ if(ds.getCount() > 0){
+ ds.data.each(function(d,rowIndex){
+ var row = this.renderRow(cm, ds, rowIndex);
tbody.createChild(row);
- });
+ }, this);
}
_this.renderColumn(r);
})
}
+
+ 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);
+ });
//if(this.loadMask){
// this.maskEl.hide();
//}
},
+
+ onUpdate : function(ds,record)
+ {
+ this.refreshRow(record);
+ },
+ onRemove : function(ds, record, index, isUpdate){
+ if(isUpdate !== true){
+ this.fireEvent("beforerowremoved", this, index, record);
+ }
+ var bt = this.mainBody.dom;
+ if(bt.rows[index]){
+ bt.removeChild(bt.rows[index]);
+ }
+
+ if(isUpdate !== true){
+ //this.stripeRows(index);
+ //this.syncRowHeights(index, index);
+ //this.layout();
+ this.fireEvent("rowremoved", this, index, record);
+ }
+ },
+
+
+ refreshRow : function(record){
+ var ds = this.store, index;
+ if(typeof record == 'number'){
+ index = record;
+ record = ds.getAt(index);
+ }else{
+ index = ds.indexOf(record);
+ }
+ this.insertRow(ds, index, true);
+ this.onRemove(ds, record, index+1, true);
+ //this.syncRowHeights(index, index);
+ //this.layout();
+ this.fireEvent("rowupdated", this, index, record);
+ },
+
+ insertRow : function(dm, rowIndex, isUpdate){
+
+ if(!isUpdate){
+ this.fireEvent("beforerowsinserted", this, firstRow, lastRow);
+ }
+ //var s = this.getScrollState();
+ var row = this.renderRow(this.cm, this.store, rowIndex);
+ // insert before rowIndex..
+ var e = this.mainBody.createChild(row,this.getRowDom(rowIndex));
+ Roo.log(e);
+
+ if(!isUpdate){
+ this.fireEvent("rowsinserted", this, firstRow, lastRow);
+ //this.syncRowHeights(firstRow, lastRow);
+ //this.stripeRows(firstRow);
+ //this.layout();
+ }
+
+ },
+
+
+ getRowDom : function(rowIndex)
+ {
+ // not sure if I need to check this.. but let's do it anyway..
+ return (this.mainBody.dom.rows && (rowIndex-1) < this.mainBody.dom.rows.length ) ?
+ this.mainBody.dom.rows[rowIndex] : false
+ },
+ // returns the object tree for a tr..
+
+
+ renderRow : function(cm, ds, rowIndex) {
+
+ var d = ds.getAt(rowIndex);
+
+ var row = {
+ tag : 'tr',
+ cn : []
+ };
+
+
+
+ for(var i = 0, len = cm.getColumnCount(); i < len; i++){
+ var config = cm.config[i];
+
+ var renderer = cm.getRenderer(i);
+ var value = '';
+ var id = Roo.id();
+
+ if(typeof(renderer) !== 'undefined'){
+ value = renderer(d.data[cm.getDataIndex(i)], false, d);
+ }
+
+ if(typeof(value) === 'object'){
+ renders.push({
+ container : id,
+ cfg : value
+ })
+ }
+
+ var rowcfg = {
+ record: d,
+ rowIndex : rowIndex,
+ colIndex : i,
+ rowClass : ''
+ }
+
+ this.fireEvent('rowclass', this, rowcfg);
+
+ var td = {
+ tag: 'td',
+ id: id,
+ cls : rowcfg.rowClass,
+ style: '',
+ html: (typeof(value) === 'object') ? '' : value
+ };
+
+ if(typeof(config.hidden) != 'undefined' && config.hidden){
+ td.style += ' display:none;';
+ }
+
+ if(typeof(config.align) != 'undefined' && config.align.length){
+ td.style += ' text-align:' + config.align + ';';
+ }
+
+ if(typeof(config.width) != 'undefined'){
+ td.style += ' width:' + config.width + 'px;';
+ }
+
+ row.cn.push(td);
+
+ }
+ return row;
+
+ },
+
+
+
onBeforeLoad : function()
{
//Roo.log('ds onBeforeLoad');
renderColumn : function(r)
{
var _this = this;
-
- var t = r.cfg.render(r.container);
- Roo.log(t);
+ var t = r.cfg.render(r.container);
if(r.cfg.cn){
Roo.each(r.cfg.cn, function(c){
projects / roojs1 / blobdiff