在Chrome浏览器中的GXT EditorGrid中单击鼠标时，焦点不会从TextField中传出 [英] Focus is not coming out from the TextField on mouse click in GXT EditorGrid in Chrome Browser
本文介绍了在Chrome浏览器中的GXT EditorGrid中单击鼠标时，焦点不会从TextField中传出的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我使用GXT 2.2.3创建了一个EditorGrid。在该网格中，一列以TextField作为Editor。我的代码如下：
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（）;
字符串变量= checkintime.getRawValue（）。trim（）;
// Window.alert（获取上一次 - > + 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（）。getChe ckoutDate（），ACCCheckBoxModel.getSelectedItem（）getCheckoutTime（））。
}
else {
checkintime.clear（）;
setDuration（ACCCheckBoxModel.getSelectedItem（）。getCheckinDate（），
null，
ACCCheckBoxModel.getSelectedItem（）。getCheckoutDate（），ACCCheckBoxModel.getSelectedItem（）。getCheckoutTime（））;
}
MsgBox.info（以hh：mm格式输入时间）;
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（变量+不是有效时间，00:00到23:59有效）;
checkintime.focus（）;
return;
$ b其他{
setDuration（ACCCheckBoxModel.getSelectedItem（）。getCheckinDate（），
checkintime.getRawValue（），
ACCCheckBoxModel 。getSelectedItem（）。getCheckoutDate（），ACCCheckBoxModel.getSelectedItem（）。getCheckoutTime（））;
$ b其他{
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中无法正常工作 解决方案
请尝试使用以下示例代码首先让我知道如果这个样本还有问题。它在所有浏览器中都能正常工作。
我使用 gxt-2.2.3-gwt22.jar 。
示例代码：
public class EXTJSGXT implements EntryPoint {
$ b $ private EditorGrid< ModelData>格;
私人ListStore< ModelData> Gridstore的;
私人ColumnModel cm;
@Override
public void onModuleLoad（）{
grid（）;
private void grid（）{
ContentPanel cp = new ContentPanel（）;
cp.setSize（450，150）;
列表< ColumnConfig> configs = new ArrayList< ColumnConfig>（）;
列表< String> eventList = new ArrayList< String>（）;
eventList.add（Mark / Modify Attendance）;
eventList.add（删除考勤）;
eventList.add（修改名册）;
eventList.add（Mark OD）;
eventList.add（忘记登记）;
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 eventcombo.findModel（value.toString（））;
public Object postProcessValue（Object value）{
if（value == null）{
return value; $（b）b
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（事件，修改名册）;
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。如果（be.getColIndex（）== 2）{//禁用第二个单元格
be.setCancelled（true）; //禁用版本
（Remove Attendance }
}
}
}）;
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
}
}
}
});
这篇关于在Chrome浏览器中的GXT EditorGrid中单击鼠标时，焦点不会从TextField中传出的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
