在GXT中激活上下文菜单时，如何保持选中的文本高亮显示?(EXT GWT 2.x）

How to keep selected text highlighted when activating a context menu in GXT? (EXT GWT 2.x)?

本文关键字：显示 EXT 高亮 GWT 文本 菜单 上下文 激活 GXT 何保持      更新时间：2023-09-26

当用户使用Sencha的EXT GWT 2.x激活上下文菜单（右键菜单）时，我正试图找到一种方法来保持选中的文本高亮显示（尽管我对3.x解决方案很满意，如果有的话）。

用例：

  1. 用户正在查看屏幕上的内容
  2. 用户选择某个文本块（例如短语）
  3. 用户右键单击可查看上下文菜单，以便对所选文本执行操作并查看上下文菜单出现菜单时，所选文本保持选中状态

在测试中，GXT上下文菜单显示时会自动取消选择文本。有没有办法防止这种情况并对所选文本采取行动？

到目前为止，我已经尝试过：

a。在上下文菜单事件（Events.OnContextMenu）的面板中添加一个侦听器，以查看是否有可以更改的属性（类似于contextMenu.disableTextSelection(false)的属性，即使它已经在视图的构造中设置）。

b。通过向同一侦听器（Events.OnContextMenu）添加一个本地方法来覆盖上下文菜单的出现所产生的取消选择效果，然后该侦听器使用JS尝试获取当前选定的文本，将其复制到临时变量中，然后立即将其添加回页面上的范围（有效地重新选择已选定的文本），但这也不起作用。我能够确认，本机方法触发了，检测到了文本，并似乎将其放回了范围内，但似乎又触发了另一个事件或发生了一些其他操作，这些操作仍然在菜单出现之前清除了选择。

任何想法都将不胜感激。

我还不知道官方的解决方案，我开始认为这是GXT 2.x中的一个错误，但我想出了一个解决办法，并将其发布在这里，以防其他人遇到类似的问题。

对于初学者来说，这个问题似乎发生在Firefox中，而不是IE中

  1. 在组件/容器/面板等上为Events.OnContextMenu事件添加侦听器。
    • 覆盖handleEvent方法并添加一个本地方法以使用JS来检测用户是否在屏幕上选择了文本。如果选择了文本，则将其保存到JavaScriptObject（GWT提供的JS对象的不透明包装器，有关详细信息，请参阅GWT文档）
  2. 向上下文菜单对象上的Events.Show事件添加侦听器。
    • 重写handleEvent方法并添加一个本地方法以使用JS重新选择以前的选择
  3. 向上下文菜单对象上的Events.Hide事件添加侦听器。
    • 重写handleEvent方法并清除您的选择变量，然后运行本机方法清除任何剩余的选择（如果需要）

使用这些步骤，我可以在Firefox中显示上下文菜单时保持选中的文本。

示例代码
（这些只是示例代码块，有助于更好地说明步骤-复制/粘贴此代码并不能提供所需的一切）

public class ContextMenuExample {
    JavaScriptObject selection;
    Menu contextMenu = new Menu();
  public void buildPanelExample() {
    ContentPanel panel = new ContentPanel();  
    panel.addListener(Events.onContextMenu, new Listener<BaseEvent>() {
      if (!GXT.isIE) {
        selection = findSelectedTextOnScreen();
      }
    });
    contextMenu.addListener(Events.Show, new Listener<BaseEvent>() {
      if (!GXT.isIE) {
        reSelectText(selection);
      }
    });
    contextMenu.addListener(Events.Hide, new Listener<BaseEvent>() {
      if (!GXT.isIE) {
        clearSelection();
      }
    });
    private native JavaScriptObject findSelectedTextOnScreen() /*-{
      // use JS method to get selected text as a range
      return selectedText;
    }-*/;
    private native void reSelectedText(JavaScriptObject range) /*-{
      // use JS method to find a range a select it
    }-*/;
    private native void clearSelection() /*-{ 
      // us JS to clear any selected ranges 
    }-*/;
    private void clearSelections() {
      selection = null;
      clearSelection();
    }
  }
}
相关文章：