javascript - ExtJS:寻找一个几乎像拖放一样的组件？

Question

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

是否有类似下图的组件？

---

简单地说；

• 在左边的容器上会有几个项目；项目将通过网络服务加载。

• 中间会有一个添加按钮，用于将左侧硬币容器中的选定项目转移到右侧容器。

• 最后，在右侧的容器中，这些项目将被收集并使用 Save 按钮，右侧容器中的这些项目将通过 CRUD 过程上传到数据库。

此功能也可以是拖放...

提前致谢。

Answer 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'
                }]
            });

        });
    }
});