Focus is not coming out from the TextField on mouse click in GXT EditorGrid in Chrome Browser

Question

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 ColumnCon         


        

Answer 1

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