ExtJS：寻找与拖放类似的组件？

Question

I need a component but couldn't find within Kitchen Sink examples.

Is there any component like on this below image?

---

Briefly;

• On left container there will be several items; items'll load through web-service.

• On middle there will be an add button which transfer selected item on left cointainer to right container.

• Finally at right container those items will collect and with Save button those items in right container will upload to DB with CRUD process.

This functionality could be drag-drop as well...

Thanks in advance.

Answer 1

You can implement this functionality using itemselectorfield or itemselector extjs component.

In this FIDDLE , I have created a demo using itemselector component. Hope this will help/guide you to achieve your requirement.

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