ExtJS Kitchensink中的多选择器搜索

时间:2015-03-06 21:49:48

标签: css extjs gridview multi-select

我在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();


    });
} 

在大多数情况下,它可以正常工作,但是当我点击搜索按钮时,它看起来像这样:

My Multi-Selector Search box

而不是Kitchensink中的那个,看起来像:

Kitchensink version of Search Box

如您所见,Kitchensink搜索框中列出了所列项目的复选框,而我的搜索框没有。因此,我无法选择多个项目。

我认为这是由于缺少CSS文件,但除了kitchennsink css文件,我不知道该使用什么。

当我将鼠标悬停在

上时,它的价值是什么

xtype:'多重选择器',

在WebStorm中,我收到一条消息," Ext JS类用于类型'多选择器'找不到"

2 个答案:

答案 0 :(得分:0)

Sho'n nuf:将<link rel="stylesheet" type="text/css" href="resources/css/style.css"/>添加到index.html,做了一个“sencha app build”,一切都很好!

见这里:Correct output with checkboxes

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

见这里:Unchecked

答案 1 :(得分:0)

看起来你找到了一个解决方法,但无论你什么时候 在您的应用程序中第一次'需要'一个新的ExtJS组件,您需要运行'sencha app refresh'(或像您一样运行构建),以便microloader知道还拉入所述组件的样式。