Last active
March 12, 2018 17:14
-
-
Save level420/247c4a8e89be9d2a447836db9a425f40 to your computer and use it in GitHub Desktop.
Playground sample automatic closing of cell editor on blur
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
qx.Class.define("qx.ui.table.pane.ScrollerMod", | |
{ | |
extend : qx.ui.table.pane.Scroller, | |
members : | |
{ | |
startEditing : function () { | |
console.log('startEditing'); | |
var startedEditing = this.base(arguments); | |
if (startedEditing) { | |
if (!(this._cellEditor instanceof qx.ui.window.Window)) { | |
this._cellEditor.addListenerOnce('focusin', this._onFocusinCellEditorAddBlurListener, this); | |
this.debug('added FOCUSIN listener to hash: ' + this._cellEditor.$$hash); | |
} | |
} | |
return startedEditing; | |
}, | |
/** | |
* Focusin event handler which attaches the blur event listener ot the cell editor | |
* and uses a timer event to allow the focusin event listener execution before | |
* the blur event listener execution | |
*/ | |
_onFocusinCellEditorAddBlurListener : function (e) { | |
this.debug("executed FOCUSIN event listener for hash: " + e.getTarget().$$hash); | |
qx.event.Timer.once(function() { | |
this._cellEditor.addListenerOnce('blur', this._onBlurCellEditorStopEditing, this); | |
this.debug('added BLUR listener to hash: ' + this._cellEditor.$$hash); | |
}, this, 0); | |
}, | |
/** | |
* Stop editing whenever the cell editor blurs. | |
*/ | |
_onBlurCellEditorStopEditing : function (e) { | |
this.debug("executed BLUR listener for hash " + e.getTarget().$$hash); | |
if (this._cellEditor === e.getTarget()) { | |
this.debug('hash: ' + this._cellEditor.$$hash); | |
this.stopEditing(); | |
} | |
} | |
} | |
}); | |
function createRandomRows(rowCount) { | |
var rowData = []; | |
var now = new Date().getTime(); | |
var dateRange = 400 * 24 * 60 * 60 * 1000; // 400 days | |
var nextId = 0; | |
for (var row = 0; row < rowCount; row++) { | |
var date = new Date(now + Math.random() * dateRange - dateRange / 2); | |
rowData.push([ nextId++, Math.random() * 10000, date, (Math.random() > 0.5) ]); | |
} | |
return rowData; | |
} | |
// window | |
var win = new qx.ui.window.Window("Table").set({ | |
layout : new qx.ui.layout.Grow(), | |
allowClose: false, | |
allowMinimize: false, | |
contentPadding: 0 | |
}); | |
this.getRoot().add(win); | |
win.moveTo(30, 40); | |
win.open(); | |
// table model | |
var tableModel = new qx.ui.table.model.Simple(); | |
tableModel.setColumns([ "ID", "A number", "A date", "Boolean" ]); | |
tableModel.setData(createRandomRows(1000)); | |
// make second column editable | |
tableModel.setColumnEditable(1, true); | |
// table | |
var table = new qx.ui.table.Table(tableModel, { | |
tablePaneScroller : function(obj) { return new qx.ui.table.pane.ScrollerMod(obj) } | |
}).set({ | |
decorator: null | |
}); | |
win.add(table); | |
var tcm = table.getTableColumnModel(); | |
// Display a checkbox in column 3 | |
tcm.setDataCellRenderer(3, new qx.ui.table.cellrenderer.Boolean()); | |
// use a different header renderer | |
tcm.setHeaderCellRenderer(2, new qx.ui.table.headerrenderer.Icon("icon/16/apps/office-calendar.png", "A date")); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment