Ext.js5(弹出搜索表单)（给一个面板添加数据）(34)_extjs根据搜索框添加内容-优快云博客

本文介绍如何使用Multiselector组件从大量记录中选择特定条目。Multiselector基于表格组件并包含一个弹出搜索表单，可以延迟显示空文本直至加载第一条记录。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

/**
 * This example shows how to use the "multiselector" component to build a selection of
 * records from a larger set. The "multiselector" is basically a Grid component with a
 * popup search form.
 * 这个例子展示了怎么使用multiselector组件。他是基于表格和弹出的搜索表单。
 */
Ext.define('KitchenSink.view.grid.MultiSelector', {
    extend: 'Ext.container.Container',

    xtype: 'multi-selector',

    requires: [
        'Ext.view.MultiSelector'
    ],

    width: 400,
    height: 300,
    layout: 'fit',

    items: [{
        xtype: 'multiselector',
        title: 'Selected Employees',

        fieldName: 'name',

        viewConfig: {
        //延迟空文本 True 延迟emptyText被应用，直到 store's 的第一项被加载。
            deferEmptyText: false,
            emptyText: 'No employees selected'
        },
       //这个对象配置搜索弹组件。默认的包括xtype（继承Ext.view.MoultiSelectorSearch）还有指定autoLoad对应的仓库。
       //默认的设置有：Defaults to: {xtype: 'multiselector-search', width: 200, height: 200, store: {autoLoad: true}}
        search: {
            field: 'name',

            store: {
                model: 'KitchenSink.model.grid.Employee',
                sorters: 'name',
                proxy: {
                    type: 'ajax',
                    //要在request中发送的名称为'limit'的参数。默认为'limit'。 如果不想要发送一个limit参数的话就将该配置项设置为''。
                    limitParam: null,
                    url: '/KitchenSink/Employees'
                }
            }
        }
    }]
});