ExtJS Kitchensink 中的多选器搜索

Question

我修改了 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 搜索框包含所列项目中的复选框，而我的则没有。因此，我无法 select 多个项目。

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

当我将鼠标悬停在

上时，不管它值多少钱

xtype: 'multi-selector',

在 WebStorm 中，我收到一条消息 "Ext JS class for type 'multi-selector' not found"

Answer 1

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

看这里：

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

看这里：

Answer 2

看起来您已经找到了解决方法，但无论何时 'requiring' 第一次在您的应用程序中使用新的 ExtJS 组件，您需要运行 'sencha app refresh'（或运行像您一样构建）以便微加载器知道也可以拉取在所述组件的样式中。

ExtJS Kitchensink 中的多选器搜索

multiselector search in ExtJS Kitchensink

css

extjs

gridview

multi-select