GXT 列表字段在滚动后不允许 shift 选择



我有一个使用GXT 2.2.5和GWT 2.4.0的页面来生成一个包含多个选择列表的表单。当用户选择一个项目,然后shift +点击另一个项目,而不滚动,它的工作原理与预期一样。但是,当他们选择一个项目时,滚动使所选项目不再可见,然后shift+单击另一个项目,没有选择。看起来整个列表正在被选中,然后又被取消选中。

我能够在Chrome 36和ie9中使用下面的简化代码复制此。

public class SimpleMultiSelectView implements WidgetFactory {
    public Widget buildWidget(String userName, Entry entry) {
        final Viewport viewport = new Viewport();
        final FormData formData = new FormData("-10");
        ListStore<ModelData> store = new ListStore();
        for (int i = 1; i< 50; i++) {
            ModelData modelData = new BaseModel();
            modelData.set("id", i);
            modelData.set("display", "Test " + i);
            store.add(modelData);
        }
        ListField<ModelData> selectionBox = new ListField<ModelData>();
        selectionBox.setStore(store);
        selectionBox.setDisplayField("display");
        selectionBox.setFieldLabel("display");
        selectionBox.setWidth(300);
        selectionBox.setHeight(300);
        LayoutContainer workFlowSearch = new LayoutContainer();    
        workFlowSearch.add(selectionBox, formData);
        viewport.add(workFlowSearch);
        return viewport;
    }
}

重现问题:

  1. 选择列表中的任意项
  2. 滚动使所选项目不再可见
  3. 按住SHIFT键选择任意项目
  4. 查看没有被选中

有人见过这个吗?我能做些什么来改变这种行为?

指出

我确实尝试过将项目更新到GWT 3.1.0和GWT 2.6.1,但似乎没有什么不同。

我也把这些HTML放在一起来检查我自己

<html>
    <body>    
        <form action="">
            <select name="selection" multiple style="height: 200px; width: 125px">
                <option value="Option 1">Option 1</option>
                <option value="Option 2">Option 2</option>
                <option value="Option 3">Option 3</option>
                <option value="Option 4">Option 4</option>
                <option value="Option 5">Option 5</option>
                <option value="Option 6">Option 6</option>
                <option value="Option 7">Option 7</option>
                <option value="Option 8">Option 8</option>
                <option value="Option 9">Option 9</option>
                <option value="Option 10">Option 10</option>
                <option value="Option 11">Option 11</option>
                <option value="Option 12">Option 12</option>
                <option value="Option 13">Option 13</option>
                <option value="Option 14">Option 14</option>
                <option value="Option 15">Option 15</option>
                <option value="Option 16">Option 16</option>
                <option value="Option 17">Option 17</option>
                <option value="Option 18">Option 18</option>
                <option value="Option 19">Option 19</option>
            </select>
            <input type="submit">
        </form>    
    </body>
</html>

如果遵循上面的复制步骤,您将看到两个选择之间的所有内容都被选中了(包括),正如预期的那样。

谢谢

gxt3中的ListField类(因为您也测试了3,而我没有2)。)是为单个选择而设计的-类声明将其标记为某些T上的通用,因此它可分配给HasValue<T>并包装呈现T项的ListView。仅从这一点来看,我预测(并证实)ListView是为单个select连接的:

public ListField(ListView<M, T> view) {
  super(view);
  this.listView = view;
  this.listView.getSelectionModel().setSelectionMode(SelectionMode.SINGLE);

当然,您可以修改此设置,但它不会更改泛型,因此getValue()突然返回List<T>而不是T

这意味着发生的事情不是选择被打破,而是你试图在一个为单选择设置的列表中进行多选择。


如果您实际上不需要ListField,但想要获得多选择数据,请考虑只创建ListView。这在GXT 2或GXT 3中应该或多或少是相同的——像您目前所做的那样创建ListView,这次将选择模型设置为MULTISIMPLE(检查JavaDoc以决定哪个适用)。

要验证这应该在两个GXT 2/3中工作:

  • http://www.sencha.com/examples-2/#listtolist有多个列表视图,配置为使用多选择,我通过单击中间项验证,滚动到接近结束,shift单击当前可见的中间项,验证所有预期的项目现在都被选中。

  • http://www.sencha.com/examples/#ExamplePlace:listtolist在gxt3中相当于上述内容,似乎遵循相同的基本步骤工作。

最新更新