Hi Qooxdoo team,
I have implemented the Table Cell Editor following the instruction below :
http://demo.qooxdoo.org/2.1/demobrowser/#table~Table_Cell_Editor.html
I have also added the DragStart listener on this table for Drag action, the
problem is if i did not edit the editable column (the second column), i
could drag these rows. But if i edited any row in table, i could not drag
any more. Could you please tell me the reason and solution for this problem
?
I really appreciate for you help, thanks so much.
The code example was attached to this mail, please let me know if you need
more information.
Thanks
Khoa Tran
// 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();
// create some example data
var tableData =
[
[
'username',
'User Name',
'jdoe',
{'required':true}
],
[
'password',
'Password',
'secret',
{
'type': 'password',
'required': true
}
],
[
'role',
'Role',
'editable combobox',
{
'options':
[
'admin',
'manager',
'user'
],
'editable': true
}
]
];
// cell renderer factory function
// returns a cell renderer instance
var propertyCellRendererFactoryFunc = function (cellInfo)
{
var table = cellInfo.table;
var tableModel = table.getTableModel();
var rowData = tableModel.getRowData(cellInfo.row);
var metaData = rowData[3];
var renderer;
for ( var cmd in metaData )
{
switch ( cmd )
{
case "type":
switch ( metaData['type'])
{
case "checkbox":
return new qx.ui.table.cellrenderer.Boolean;
case "password":
return new qx.ui.table.cellrenderer.Password;
}
break;
case "options":
var renderer = new qx.ui.table.cellrenderer.Replace;
var replaceMap = {};
metaData['options'].forEach(function(row){
if (row instanceof Array)
{
replaceMap[row[0]]=row[2];
}
});
renderer.setReplaceMap(replaceMap);
renderer.addReversedReplaceMap();
return renderer;
}
}
return new qx.ui.table.cellrenderer.Default();
}
// create the "meta" cell renderer object
var propertyCellRendererFactory =
new qx.ui.table.cellrenderer.Dynamic(propertyCellRendererFactoryFunc);
// cell editor factory function
// returns a cellEditorFactory instance based on data in the row itself
var propertyCellEditorFactoryFunc = function (cellInfo)
{
var table = cellInfo.table;
var tableModel = table.getTableModel();
var rowData = tableModel.getRowData(cellInfo.row);
var metaData = rowData[3];
var cellEditor = new qx.ui.table.celleditor.TextField;
var validationFunc = null;
for ( var cmd in metaData )
{
switch ( cmd )
{
case "options":
if (metaData.editable)
{
cellEditor = new qx.ui.table.celleditor.ComboBox();
}
else
{
cellEditor = new qx.ui.table.celleditor.SelectBox();
}
cellEditor.setListData( metaData['options'] );
break;
case "editable":
break;
case "type":
switch ( metaData['type'] )
{
case "password":
cellEditor = new qx.ui.table.celleditor.PasswordField;
break;
case "checkbox":
cellEditor = new qx.ui.table.celleditor.CheckBox;
break;
case "email":
cellEditor.setValidationFunction (
function( newValue, oldValue )
{
var re =
/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*\.(\w{2}|(com|net|org|edu|int|mil|gov|arpa|biz|aero|name|coop|info|pro|museum))$/;
if ( re.test(newValue) )
{
return newValue;
}
alert("You did not enter a valid email address");
return oldValue;
});
break;
}
break;
case "regExp":
cellEditor.setValidationFunction (
function( newValue, oldValue )
{
var re = new RegExp(metaData['regExp']);
if ( re.test(newValue) )
{
return newValue;
}
alert(metaData['failMsg']);
return oldValue;
});
break;
case "validationFunc":
cellEditor.setValidationFunction (metaData['validationFunc']);
break;
case "required":
validationFunc = function( newValue, oldValue )
{
if (! newValue)
{
alert("You need to supply a value here");
return oldValue;
}
return newValue;
};
break;
}
}
return cellEditor;
}
// create a "meta" cell editor object
var propertyCellEditorFactory =
new qx.ui.table.celleditor.Dynamic(propertyCellEditorFactoryFunc);
// create table
var propertyEditor_tableModel = new qx.ui.table.model.Simple();
propertyEditor_tableModel.setColumns(
[
'Property',
'Property',
'Doubleclick on cell to edit value'
]);
var propertyEditor_resizeBehaviour =
{
tableColumnModel : function(obj)
{
return new qx.ui.table.columnmodel.Resize(obj);
}
};
var propertyEditor = new qx.ui.table.Table(
propertyEditor_tableModel,propertyEditor_resizeBehaviour);
// remove decor
//propertyEditor.setDecorator(null);
// layout
propertyEditor.setColumnVisibilityButtonVisible(false);
propertyEditor.setKeepFirstVisibleRowComplete(true);
propertyEditor.setStatusBarVisible(false);
propertyEditor.setDraggable(true);
propertyEditor.setDroppable(true);
propertyEditor.setFocusCellOnMouseMove(true);
// selection mode
propertyEditor.getSelectionModel().setSelectionMode(
qx.ui.table.selection.Model.SINGLE_SELECTION);
// Get the table column model
var tcm = propertyEditor.getTableColumnModel();
// first table columns is not visible, has the key
tcm.setColumnVisible(0,false);
// second column has the label
tcm.getBehavior().setWidth(1,100);
// third column for editing the value and has special cell renderers
// and cell editors
tcm.getBehavior().setWidth(2,300);
propertyEditor_tableModel.setColumnEditable(2,true);
tcm.setDataCellRenderer(2, propertyCellRendererFactory);
tcm.setCellEditorFactory(2, propertyCellEditorFactory);
// fourth column is not visible, has the metadata
// set data
propertyEditor.getTableModel().setData(tableData);
// create event listener for data change event. this would normally
// send the data back to the server etc.
propertyEditor.addListener(
"dragstart",
function(e){
e.addAction("move");
e.addType("movetransfer");
},
propertyEditor
);
propertyEditor.getTableModel().addListener(
"dataChanged",
function(event)
{
if ( !(event instanceof qx.event.type.Data))
{
return;
}
var changedData = event.getData();
// get changed data
var model =
this.getTableModel();
var key =
model.getValue(0,changedData.firstRow);
var value =
model.getValue(changedData.firstColumn, changedData.firstRow);
this.info("User edited property '" + key +
"' and entered value '" + value +"'.");
},
propertyEditor);
win.add(propertyEditor);------------------------------------------------------------------------------
Everyone hates slow websites. So do we.
Make your web apps faster with AppDynamics
Download AppDynamics Lite for free today:
http://p.sf.net/sfu/appdyn_sfd2d_oct
_______________________________________________
qooxdoo-devel mailing list
[email protected]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
