ExtJS：寻找一个几乎像拖放一样的组件？

Question

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

下图中是否有任何组件？

简言之;

• 在左侧容器上会有几件物品;项目将通过网络服务加载。

• 在中间会有一个添加按钮，将左侧容器中的选定项目传输到右侧容器。

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

此功能也可以拖放...

提前致谢。

Answer 1

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

在此 FIDDLE 中，我使用itemselector组件创建了一个演示。希望这有助于/指导您实现您的要求。

CODE SNIPPET

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

        });
    }
});

Answer 2

您应该使用MultiSelect或ItemSelector