Question

我使用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<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。

请建议如何解决此问题。

更新

After Clicking On the TextField in the EditorGrid

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

我设置正确对齐行和列的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
                }
            }
        }
    });

enter image description here

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

1 个答案: