PDA

View Full Version : Bug: RowEditor editing a row can't click to set focus on fields GXT 2.2.5



somuchh8
9 Feb 2012, 12:03 PM
Versions:
GWT 2.4.0
GXT 2.2.5

Browsers Tested(Windows):
IE8
Firefox 3.6

Problem:
In IE8 I have a Grid with a RowEditor plugin. When editing I have a row with a TextField, ComboBox, NumberField, and DateField but unless I click on text which is inside an editable field I can not click to set the focus on any of the fields. Firefox 3.6 doesn't have this problem. If I use the sencha.com/examples and try the RowEditor Grid using IE8 I can not reproduce the problem.

Demonstrate the problem:


import java.util.ArrayList;
import java.util.List;


import com.extjs.gxt.ui.client.Style.HorizontalAlignment;
import com.extjs.gxt.ui.client.data.BaseModel;
import com.extjs.gxt.ui.client.data.ModelData;
import com.extjs.gxt.ui.client.store.ListStore;
import com.extjs.gxt.ui.client.widget.Window;
import com.extjs.gxt.ui.client.widget.form.DateField;
import com.extjs.gxt.ui.client.widget.form.NumberField;
import com.extjs.gxt.ui.client.widget.form.SimpleComboBox;
import com.extjs.gxt.ui.client.widget.form.TextField;
import com.extjs.gxt.ui.client.widget.form.ComboBox.TriggerAction;
import com.extjs.gxt.ui.client.widget.grid.CellEditor;
import com.extjs.gxt.ui.client.widget.grid.ColumnConfig;
import com.extjs.gxt.ui.client.widget.grid.ColumnModel;
import com.extjs.gxt.ui.client.widget.grid.Grid;
import com.extjs.gxt.ui.client.widget.grid.RowEditor;
import com.extjs.gxt.ui.client.widget.layout.FitLayout;
import com.google.gwt.i18n.client.DateTimeFormat;
import com.google.gwt.i18n.client.NumberFormat;


public class PopupRowEditorTestTable extends Window
{
private DateTimeFormat df = DateTimeFormat.getFormat("MM/dd/y");


public PopupRowEditorTestTable()
{
super();

setLayout(new FitLayout());


final SimpleComboBox<String> combo = new SimpleComboBox<String>();
combo.setForceSelection(true);
combo.setTriggerAction(TriggerAction.ALL);
combo.add("Bob");
combo.add("Harry");
combo.add("Frank");

TextField<String> inputText = new TextField<String>();
inputText.setAllowBlank(false);

List<ColumnConfig> configs = new ArrayList<ColumnConfig>();

ColumnConfig column = new ColumnConfig();
column.setId("TEXT");
column.setHeader("text");
column.setWidth(220);
column.setEditor(new CellEditor(inputText));
configs.add(column);

CellEditor editor = new CellEditor(combo) {
@Override
public Object preProcessValue(Object value) {
if (value == null) {
return value;
}
return combo.findModel(value.toString());
}

@Override
public Object postProcessValue(Object value) {
if (value == null) {
return value;
}
return ((ModelData) value).get("value");
}
};

column = new ColumnConfig();
column.setId("COMBO");
column.setHeader("combo");
column.setWidth(65);
column.setEditor(editor);
configs.add(column);

column = new ColumnConfig();
column.setId("NUMBER");
column.setHeader("number");
column.setAlignment(HorizontalAlignment.RIGHT);
column.setWidth(55);
column.setNumberFormat(NumberFormat.getCurrencyFormat());
column.setEditor(new CellEditor(new NumberField()));

configs.add(column);

DateField dateField = new DateField();
dateField.getPropertyEditor().setFormat(DateTimeFormat.getFormat("MM/dd/y"));

column = new ColumnConfig();
column.setId("DATE");
column.setHeader("date");
column.setWidth(95);
column.setEditor(new CellEditor(dateField));
column.setDateTimeFormat(DateTimeFormat.getFormat("MMM dd yyyy"));
configs.add(column);

ColumnModel cm = new ColumnModel(configs);

List<ModelData> models = new ArrayList<ModelData>();
BaseModel model = new BaseModel();
model.set("COMBO", "Bob");


model.set("TEXT", "delete, click off, try to regain focus by clicking");


model.set("NUMBER", 2.3);
model.set("DATE", df.parse("03/15/2006"));
models.add(model);

ListStore<ModelData> store = new ListStore<ModelData>();
store.add(models);

final RowEditor<ModelData> re = new RowEditor<ModelData>();
final Grid<ModelData> grid = new Grid<ModelData>(store, cm);
grid.setAutoExpandColumn("TEXT");
grid.setBorders(false);
grid.addPlugin(re);
grid.getView().setForceFit(true);
grid.getView().setAutoFill(true);

add(grid);
setSize(600, 150);
}


}

somuchh8
13 Feb 2012, 6:52 AM
Hmm, so I guess I'm the only one having trouble with the RowEditor in 2.2.5?

dariusjb
16 Feb 2012, 5:31 AM
The issue is coming from the Window component, it is stealing the focus from your field, because the field is into a Cell, and the SelectionModel for the grid or even for the roweditor, do not comply with Window management of Focus.

your need to override the handleMouseClick(GridEvent e) from the GridSelectionModel,
let it do it s super stuff
if(isInput(e.getTarget()))
then
refWindow.setFocusWidget(current_field),
refWindow.focus();

current_field can be found, from the selected item from the event
refWindow needs to be replaced by your current this object.

If Sven has a nicer explanation and solution, I also would like to know how to regain full access to selecting the text input into my field, using the Mouse down event. I can only use my keybord when the grid is into a Window.

sven
16 Feb 2012, 5:54 AM
Try to extend window and clear out the doFocus method.

dariusjb
16 Feb 2012, 10:44 AM
Hi Sven,

Do you think ithis is why the text from the input field cannot be selected using mouse pointer?

Without overriding Window, with my method, I can gain focus on the text field, but I cannot select the text.
I can only use the keyboard to change the text.

Thank you for your answer.

nageshm
26 Mar 2012, 5:54 PM
Hi Somuchh8,

I am also getting the same problem, did you find any solution for that?

Regards,
Nagesh