ExtJS Kitchensink 中的多选搜索答案

【问题标题】：multiselector search in ExtJS KitchensinkExtJS Kitchensink 中的多选搜索
【发布时间】：2015-05-08 14:49:14
【问题描述】：

我在 extJS Kitchensink 示例 (http://dev.sencha.com/extjs/5.0.0/examples/kitchensink/#multi-selector) 中修改了表单字段菜单选项下的多选器网格。

        var ms = Ext.create('Ext.container.Container', {
            xtype: 'multi-selector',
            width: 300,
            height: 300,
            requires: [
                'Ext.view.MultiSelector'
            ],
            layout: 'fit',

            renderTo: Ext.getBody(),
            items: [{
                xtype: 'multiselector',
                title: 'Selected Dx',

                fieldName: 'string_value',

                viewConfig: {
                    deferEmptyText: false,
                    emptyText: 'No Dx selected'
                },

                search: {
                    field: 'string_value',

                    store: {
                        fields: [
                            {
                                name: 'string_value',
                                type: 'string'
                            }
                        ],
                        proxy: {
                            type: 'ajax',
                            url: 'http://127.0.0.1:5000/api/factor',
                            reader: {
                                type: 'json',
                                rootProperty: '0'
                            }
                        }
                    }
                }
            }]
        }).center();


    });
}

大部分情况下它都有效，但是当我点击搜索按钮时，它看起来像这样：

与 Kitchensink 中的相反，它看起来像：

如您所见，Kitchensink 搜索框包含来自所列项目的复选框，而我的则没有。因此，我无法选择多个项目。

我认为这是由于缺少 CSS 文件，但除了 kitchensink css 文件之外，我不确定该使用什么。

当我将鼠标悬停在上面时，它的价值是什么

xtype: '多选器',

在 WebStorm 中，我收到一条消息“未找到用于类型 'multi-selector' 的 Ext JS 类”

【问题讨论】：

xtype 基本上是 ExtJS 类的别名。如果您使用 Ext.create 创建组件，则您已经指定了类 - 不需要 xtype。所以在这种情况下，Ext.create('Ext.container.Container' 无论您指定什么 xtype，都会创建一个容器。在 KitchenSink 示例中，他们正在定义一个类，并且他们给它一个别名/xtype 'multi-selector'。由于您没有在任何地方包含该代码，WebStorm 不知道“多选择器”是什么。尽管如此，代码看起来还不错，我认为这是一个 CSS 问题。它是否允许您选择项目？
是的，我想出了一些关于删除无关 xtype 的方法。是的，它允许我选择多个项目，但当然没有复选框，用光标点击正确的位置是一个问题。当我找到解决方案时，我会发布。

标签： css extjs gridview multi-select

【解决方案1】：

您似乎找到了解决方法，但无论何时第一次在您的应用程序中“需要”一个新的 ExtJS 组件，您需要运行“sencha app refresh”（或像您一样运行构建），以便微加载器知道也为所述组件拉入样式。

【讨论】：

【解决方案2】：

Sho' 'nuf：在 index.html 中添加了 <link rel="stylesheet" type="text/css" href="resources/css/style.css"/>，做了一个“sencha app build”，一切都很好！

请看这里：

有趣的是，当我从搜索列表中取消选中项目时，它们不会从选定的窗格中删除。

请看这里：

【讨论】：