在Chrome浏览器的GXT EditorGrid中单击鼠标时,TextField不会显示焦点

我使用GXT 2.2.3创建了一个EditorGrid。在该网格中,一列使用TextField作为Editor.My代码如下:

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 checkintime = new TextField(); checkintime.setAllowBlank(true); checkintime.setWidth(15); checkintime.addListener(Events.Change, new Listener() { @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); 

现在的问题是,如果点击CheckInTime列中的checkIntime字段后,如果我点击Gird中的其他位置,焦点就不会出现。这个问题仅在Chrome中发生。它在IE和Firefox中运行良好。

请建议如何解决此问题。

UPDATE

单击EditorGrid中的TextField后

如果使用鼠标单击除行之外的其他行,则TextField中的焦点不会出现问题而且Tab键也无法在此Grid上运行。

我设置正确对齐行和列的Css在IE中正常工作但在Chrome和Firefox中工作不正常

首先尝试使用以下示例代码,如果此示例仍然存在任何问题,请告诉我。 它适用于所有浏览器。

我正在使用gxt-2.2.3-gwt22.jar 。

示例代码:

 public class EXTJSGXT implements EntryPoint { private EditorGrid grid; private ListStore gridStore; private ColumnModel cm; @Override public void onModuleLoad() { grid(); } private void grid() { ContentPanel cp = new ContentPanel(); cp.setSize(450, 150); List configs = new ArrayList(); List eventList = new ArrayList(); eventList.add("Mark/Modify Attendance"); eventList.add("Remove Attendance"); eventList.add("Modify Roster"); eventList.add("Mark OD"); eventList.add("Forgot To Checkin"); final SimpleComboBox eventcombo = new SimpleComboBox(); 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())); column2.setWidth(100); configs.add(column2); ColumnConfig column3 = new ColumnConfig(); column3.setId("desk"); column3.setHeader("Desk"); column3.setEditor(new CellEditor(new TextField())); column3.setWidth(105); configs.add(column3); cm = new ColumnModel(configs); gridStore = new ListStore(); 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(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); } } 

– 编辑 –

需要仅禁用该特定行的单元格。但现在它禁用整个列。

尝试使用BeforeEdit侦听器并根据您的条件调用event.setCancelled(true)以禁用编辑。

  grid.addListener(Events.BeforeEdit, new Listener>() { public void handleEvent(GridEvent 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 } } } }); 

在此处输入图像描述