ExtJS: Ищете компонент почти как перетаскивание?

Question

Мне нужен компонент, но я не смог найти его в примерах Kitchen Sink.

Есть ли какой-либо компонент, как на этом изображении ниже?

---

Коротко;

• В левом контейнере будет несколько предметов;элементы будут загружаться через веб-сервис.

• В центре будет кнопка add , которая переносит выбранный элемент на левом держателе в правый контейнер.

• Наконец, в правом контейнере эти элементы будут собраны, и с помощью кнопки Save эти элементы в правом контейнере будут загружены в БД с процессом CRUD.

Эта функция можетбыть перетаскивающим также ...

Заранее спасибо.

Answer 1

Вы можете реализовать эту функцию, используя itemselectorfield или itemselector extjs компонент.

В этом FIDDLE , я создал демо, используя itemselector компонент.Надеюсь, что это поможет / поможет вам достичь ваших требований.

КОД 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