在 Chrome 浏览器的 GXT EditorGrid 中单击鼠标时，焦点不会从 TextField 中出来

Question

我使用 GXT 2.2.3 创建了一个 EditorGrid。在该网格中，一列以 TextField 作为编辑器。我的代码如下：

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);

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

请建议如何解决这个问题。

更新

如果用鼠标单击行以外的行，则无法从 TextField 中获得焦点，这就是问题，并且 Tab 键也无法在此 Grid 上工作。

我为正确对齐行和列而设置的 Css 在 IE 中运行良好，但在 Chrome 和 Firefox 中运行不正常

Answer 1

首先尝试以下示例代码，如果此示例还有任何问题，请告诉我。它在所有浏览器中都能正常工作。

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

示例代码：

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);
    }

}

---

--编辑--

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

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

    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
                }
            }
        }
    });