On Thu, Aug 12, 2010 at 14:22, nexar <[email protected]> wrote:
> Ideally you want to be able to use 'return' or 'tab' to navigate the table
> row by row. i.e. each cell in a row before moving to the next row.
Hi Purvez. I guess ideally *you* want that behavior. I don't. :-) In any
case, it's not too difficult to achieve. Here's a playground snippet that
does what you asked. I extend qx.ui.table.Table to create the my.Table
class, and override the _onKeyPress method to handle Enter and Tab
specially...
qx.Class.define("my.Table",
{
extend : qx.ui.table.Table,
members :
{
_onKeyPress : function(evt)
{
// If this table is not enabled...
if (! this.getEnabled())
{
// ... then get outta Dodge!
return;
}
// Get the identifier for the key that was pressed
var identifier = evt.getKeyIdentifier();
// The only ones we care about handling specially are Enter and Tab
if ((identifier == "Enter" || identifier == "Tab") &&
evt.getModifiers() == 0)
{
// If the cell is being edited...
if (this.isEditing())
{
// ... then first stop editing.
this.stopEditing();
}
// Determine the currently-focused cell
var row = this.getFocusedRow();
var col = this.getFocusedColumn() + 1; // assume next column
// Find out how many columns are visible
var columnModel = this.getTableColumnModel();
var colCount = columnModel.getVisibleColumnCount();
// Is this next column out of bounds?
if (col >= colCount)
{
// Yup. Reset it to zero and assume next row
col = 0;
row++;
}
// Are we still within row bounds?
var tableModel = this.getTableModel();
if (row < tableModel.getRowCount())
{
// Yup. Set the new focused cell.
this.setFocusedCell(col, row, true);
}
// Prevent additional action on this event
evt.preventDefault();
evt.stopPropagation();
}
else
{
// We're not handling this key event specially. Pass to superclass.
this.base(arguments, evt);
}
}
}
});
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);
var table = new my.Table(tableModel);
table.set(
{
showCellFocusIndicator : true,
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"));
> Skipping non editable cells would be a bonus.
>
This is left as an exercise for the reader. You'll find the method
tableModel.isColumnEditable(col) to be invaluable for the purpose.
Cheers,
Derrell
------------------------------------------------------------------------------
This SF.net email is sponsored by
Make an app they can't live without
Enter the BlackBerry Developer Challenge
http://p.sf.net/sfu/RIM-dev2dev
_______________________________________________
qooxdoo-devel mailing list
[email protected]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
