ExtJS：正在寻找一个类似于拖放的组件？答案

【问题标题】：ExtJS: Looking for a component almost like drag-drop?ExtJS：正在寻找一个类似于拖放的组件？
【发布时间】：2018-05-23 11:16:46
【问题描述】：

我需要一个组件，但在 Kitchen Sink 示例中找不到。

有没有像下图这样的组件？

简单地说；

在左边的容器上会有几个项目；项目将通过网络服务加载。
在中间会有一个添加按钮，将左侧硬币容器上的选定项目转移到右侧容器。
最后在右侧容器中，这些项目将被收集，并使用Save 按钮，右侧容器中的这些项目将通过 CRUD 过程上传到数据库。

这个功能也可以拖放...

提前致谢。

【问题讨论】：

标签： javascript extjs drag-and-drop components

【解决方案1】：

您可以使用itemselectorfield 实现此功能或itemselector extjs 组件。

在这个Fiddle中，我使用itemselector组件创建了一个演示。

代码片段

Ext.application({
    name: 'Fiddle',

    launch: function () {

        Ext.onReady(function () {

            Ext.define('Items', {
                extend: 'Ext.data.Store',
                alias: 'store.itemsstore',
                fields: ['value', 'text'],
                data: [{
                    text: 'Item 1',
                    value: 'item1'
                }, {
                    text: 'Item 2',
                    value: 'item3'
                }, {
                    text: 'Item 3',
                    value: 'item3'
                }, {
                    text: 'Item 4',
                    value: 'item4'
                }, {
                    text: 'Item 5',
                    value: 'item5'
                }, {
                    text: 'Item 6',
                    value: 'item6'
                }, {
                    text: 'Item 7',
                    value: 'item7'
                }, {
                    text: 'Item 8',
                    value: 'item8'
                }]
            });

            Ext.create({
                xtype: 'form',
                title: 'Drag and Drop example',

                bodyPadding: 10,
                renderTo: Ext.getBody(),
                items: [{
                    xtype: 'itemselector',
                    anchor: '100%',
                    store: {
                        type: 'itemsstore'
                    },
                    displayField: 'text',
                    valueField: 'value',
                    allowBlank: false,
                    msgTarget: 'side',
                    fromTitle: 'Available',
                    toTitle: 'Selected'
                }]
            });

        });
    }
});

【讨论】：

也非常感谢您提供样品。这将完美地工作。

【解决方案2】：

您应该使用MultiSelect 或ItemSelector

【讨论】：