I created an EditorGrid using GXT 2.2.3.In that grid,one column is with the TextField as Editor.My code is as below:
ColumnConfig checkinTimecolumn=new ColumnConfig();
checkinTimecolumn.setId("checkinTime");
checkinTimecolumn.setHeader("Check In Time");
checkinTimecolumn.setWidth(80);
checkinTimecolumn.setMenuDisabled(true);
checkinTimecolumn.setSortable(false);
checkinTimecolumn.setStyle("width:100%;");
checkinTimecolumn.setStyle("padding-right:3px;");
final TextField<String> checkintime = new TextField<String>();
checkintime.setAllowBlank(true);
checkintime.setWidth(15);
checkintime.addListener(Events.Change, new Listener<BaseEvent>() {
@Override
public void handleEvent(BaseEvent be) {
String prevcheckIntime=ACCCheckBoxModel.getSelectedItem().getCheckinTime();
String variable = checkintime.getRawValue().trim();
// Window.alert("Getting the previous time-->"+prevcheckIntime);
if(variable != null & !variable.equalsIgnoreCase(""))
{
if(!variable.matches(REG_EXP))
{
if(prevcheckIntime!=null){
checkintime.setValue(prevcheckIntime);
setDuration(ACCCheckBoxModel.getSelectedItem().getCheckinDate(),
checkintime.getRawValue(),
ACCCheckBoxModel.getSelectedItem().getCheckoutDate(),ACCCheckBoxModel.getSelectedItem().getCheckoutTime());
}
else {
checkintime.clear();
setDuration(ACCCheckBoxModel.getSelectedItem().getCheckinDate(),
null,
ACCCheckBoxModel.getSelectedItem().getCheckoutDate(), ACCCheckBoxModel.getSelectedItem().getCheckoutTime());
}
MsgBox.info("Enter time in hh:mm format");
checkintime.focus();
return;
}
String [] a=variable.split(":");
if(Integer.parseInt(a[0])>24) {
if(prevcheckIntime!=null){
checkintime.setValue(prevcheckIntime);
setDuration(ACCCheckBoxModel.getSelectedItem().getCheckinDate(),
checkintime.getRawValue(),
ACCCheckBoxModel.getSelectedItem().getCheckoutDate(), ACCCheckBoxModel.getSelectedItem().getCheckoutTime());
}
else {
checkintime.clear();
setDuration(ACCCheckBoxModel.getSelectedItem().getCheckinDate(),
null,
ACCCheckBoxModel.getSelectedItem().getCheckoutDate(), ACCCheckBoxModel.getSelectedItem().getCheckoutTime());
}
MsgBox.info(variable+" is not a valid time. 00:00 to 23:59 are valid" );
checkintime.focus();
return;
}
else{
setDuration(ACCCheckBoxModel.getSelectedItem().getCheckinDate(),
checkintime.getRawValue(),
ACCCheckBoxModel.getSelectedItem().getCheckoutDate(), ACCCheckBoxModel.getSelectedItem().getCheckoutTime());
}
}
else {
setDuration(ACCCheckBoxModel.getSelectedItem().getCheckinDate(),
null,
ACCCheckBoxModel.getSelectedItem().getCheckoutDate(), ACCCheckBoxModel.getSelectedItem().getCheckoutTime());
}
}
});
checkinTimecolumn.setRenderer(checkinRenderer);
checkinTimecolumn.setEditor(new CellEditor(checkintime));
checkinTimecolumn.setAlignment(HorizontalAlignment.LEFT);
configs.add(checkinTimecolumn);
Now the issue is if the after clicking on checkIntime field in the CheckInTime column, the focus is not coming out if I click on the some other place in the Gird.This issue is happening in Chrome only.It's working well in IE and Firefox.
Please suggest how to resolve this.
UPDATE
If the Click on other than the row with mouse,focus from the TextField is not coming out that is the issue And Tab Key also not working on this Grid.
Css that I am setting for proper alignment of the rows and columns is working fine in IE but not working fine in Chrome and Firefox
Try with below sample code first and Let me know if still there is any issue with this sample as well. It's working fine for me in all browsers.
I am using gxt-2.2.3-gwt22.jar.
Sample code:
public class EXTJSGXT implements EntryPoint {
private EditorGrid<ModelData> grid;
private ListStore<ModelData> gridStore;
private ColumnModel cm;
@Override
public void onModuleLoad() {
grid();
}
private void grid() {
ContentPanel cp = new ContentPanel();
cp.setSize(450, 150);
List<ColumnConfig> configs = new ArrayList<ColumnConfig>();
List<String> eventList = new ArrayList<String>();
eventList.add("Mark/Modify Attendance");
eventList.add("Remove Attendance");
eventList.add("Modify Roster");
eventList.add("Mark OD");
eventList.add("Forgot To Checkin");
final SimpleComboBox<String> eventcombo = new SimpleComboBox<String>();
eventcombo.setEmptyText("");
eventcombo.setTriggerAction(TriggerAction.ALL);
CellEditor eventComboEditor = new CellEditor(eventcombo) {
public Object preProcessValue(Object value) {
if (value == null) {
return value;
}
return eventcombo.findModel(value.toString());
}
public Object postProcessValue(Object value) {
if (value == null) {
return value;
}
return ((ModelData) value).get("value");
}
};
eventcombo.setForceSelection(true);
eventcombo.setEmptyText("");
eventcombo.setTriggerAction(TriggerAction.ALL);
eventcombo.add(eventList);
ColumnConfig column = new ColumnConfig();
column.setId("event");
column.setHeader("Co Manager/Distributor");
column.setEditor(eventComboEditor);
column.setWidth(200);
configs.add(column);
ColumnConfig column2 = new ColumnConfig();
column2.setId("test");
column2.setHeader("Test");
column2.setEditor(new CellEditor(new TextField<String>()));
column2.setWidth(100);
configs.add(column2);
ColumnConfig column3 = new ColumnConfig();
column3.setId("desk");
column3.setHeader("Desk");
column3.setEditor(new CellEditor(new TextField<String>()));
column3.setWidth(105);
configs.add(column3);
cm = new ColumnModel(configs);
gridStore = new ListStore<ModelData>();
ModelData md = new BaseModelData();
md.set("checkinTime", "12-12-2003");
md.set("event", "Modify Roster");
md.set("test", "A1");
md.set("desk", "A2");
gridStore.add(md);
md = new BaseModelData();
md.set("checkinTime", "13-12-2003");
md.set("event", "Remove Attendance");
md.set("test", "B1");
md.set("desk", "B2");
gridStore.add(md);
md = new BaseModelData();
md.set("checkinTime", "14-12-2003");
md.set("event", "Mark OD");
md.set("test", "C1");
md.set("desk", "C2");
gridStore.add(md);
gridStore.commitChanges();
grid = new EditorGrid<ModelData>(gridStore, cm);
grid.setBorders(true);
grid.setStripeRows(true);
grid.setTrackMouseOver(true);
grid.disableTextSelection(false);
grid.setHideHeaders(false);
grid.setHeight(500);
grid.getSelectionModel().setSelectionMode(SelectionMode.SINGLE);
Viewport viewport = new Viewport();
viewport.setLayout(new FlowLayout());
cp.add(grid);
viewport.add(cp, new FitData(new Margins(0, 0, 56, 0)));
RootPanel.get().add(viewport);
}
}
--EDIT--
need to disable the cell of that particular row only.But now it's disabling the entire column.
Try with BeforeEdit listener and call event.setCancelled(true) on the basis of your condition to disable the editing.
grid.addListener(Events.BeforeEdit, new Listener<GridEvent<ModelData>>() {
public void handleEvent(GridEvent<ModelData> be) {
ModelData data = be.getModel();
String val = data.get("event");
if (val.equalsIgnoreCase("Remove Attendance")) {
if (be.getColIndex() == 2) { // disable 2nd cell only
be.setCancelled(true);// Disable edition
}
}
}
});
来源：https://stackoverflow.com/questions/23467057/focus-is-not-coming-out-from-the-textfield-on-mouse-click-in-gxt-editorgrid-in-c