extjs 4 drag-n-drop между 2 сетками без плагина? - PullRequest
Новая
       54

extjs 4 drag-n-drop между 2 сетками без плагина?

3 голосов
/ 22 июля 2011

Я реализую пример Extjs 4 (MVC), данный здесь с рельсами 3.x.

У меня есть следующая структура: в Public dir, 

Manager 
-> mainapp
    - controller
        -> Dragdrops.js    
    - model
        -> Dragdrop.js    
    - store
        -> FirstDragdrops.js
        -> SecondDragdrops.js    
    - view
        -dragdrop
            -> DragdropList.js

View (DragdropList.js) имеет панель, которая содержит 2 сетки. 

/* -- View - Drag n Drop list grid -- */
Ext.require([
    'Ext.grid.*',
    'Ext.data.*',
    'Ext.dd.*'
]);
Ext.define('mainapp.view.dragdrop.DragdropList', {
    extend: 'Ext.panel.Panel',
    alias : 'widget.dragdroplist',
    title : 'Drag Drop List',
    layout: 'hbox',

    initComponent: function() {
        this.items = [
            {
                xtype: 'grid',
                title: 'First Grid',
                id: 'firstgrid',
                store: 'FirstDragdrops',
                flex: 1,    enableDragDrop   : true,
                ddGroup: 'mydd',
                ddText: 'Shift Row',

                columns : [
                    {text: "Item Name",  sortable: true, dataIndex: 'name'},
                    {text: "Quantity",  sortable: true, dataIndex: 'qty'},
                    {text: "Amount", sortable: true, dataIndex: 'amt'}
                ],

                    singleSelect:true,
                    listeners: {
                        beforerowselect: function(sm,i,ke,row){
                        //grid.ddText = title_str(row.data.title, null, row);
                    },
                        selectionchange: function(){
                            alert("Row Selected! " + this.ddText);
                            //grid.ddText(row.data.title, null, row);
                            }
                    }

            },
            {
                xtype: 'grid',
                title: 'Second Grid',
                id: 'secondgrid',
                store: 'SecondDragdrops',
                flex: 2,
                singleSelect: true,
                enableDragDrop   : true,
                stripeRows: true,
                columns : [
                    {text: "Item Name", sortable: true, dataIndex: 'name'},
                    {text: "Quantity", sortable: true, dataIndex: 'qty'},
                    {text: "Amount", sortable: true, dataIndex: 'amt'}
                ]
            }
        ]
        this.callParent(arguments);
    }

});

Но я не могу реализовать функцию перетаскивания в extjs 4 (БЕЗ ПЛАГИНА) .

Есть предложения ??

1 Ответ

1 голос
/ 27 июля 2011

Я думаю, что это не идеальный способ, но он работает в моем проекте:

  1. Добавить слушателя к элементам, которые вы хотите перетащить или / adn drop: 

    listeners: {
      render: initializeDD
}

  2. Реализация метода настройки d & d (в моем случае изменение порядка расположения компонентов): 

    function initializeDD (v) {
    var el = Ext.get(v.getEl().id);

    el.on('dblclick', function() {
        var component = Ext.ComponentManager.get(v.getEl().id).getComponent(0);             
        component.focus();
    }, this);

    v.dragZone = Ext.create('Ext.dd.DragZone', v.getEl(), {
        ddGroup: 'blankAttsReorder',                
        getDragData: function(e) {
            var sourceEl = e.getTarget(v.itemSelector, 10), d;
            if (sourceEl) {
                d = sourceEl.cloneNode(true);
                d.id = Ext.id();
                return v.dragData = {
                    sourceEl: sourceEl,
                    repairXY: Ext.fly(sourceEl).getXY(),
                    ddel: d,
                    originalid: v.getEl().id
                };
            }
        },
        getRepairXY: function() {
            return this.dragData.repairXY;
        }
    });

    v.dropZone = Ext.create('Ext.dd.DropZone', v.el, {
        ddGroup: 'blankAttsReorder',
        getTargetFromEvent: function(e) {
            return e.getTarget('.blankbuilder-attribute');
        },
        onNodeOver : function(target, dd, e, data){
                        // specific code there 
            var targetN = Ext.Array.indexOf(blank.items, Ext.ComponentManager.get(target.id), 0);
            var sourceN = Ext.Array.indexOf(blank.items, Ext.ComponentManager.get(data.originalid), 0);
            if (targetN!=sourceN) {
                blank.move(sourceN, targetN);
            }
            return Ext.dd.DropZone.prototype.dropAllowed;
        },
        onNodeDrop : function(target, dd, e, data){
            Ext.ComponentManager.get(target.id).getComponent(0).blur();
        }
    });
}

P. S. Пример перетаскивания компонентов одного типа на компоненты другого типа (содержат некоторый код, специфичный для проекта): 

    function initializeAttributeDragZone (v) {
        v.dragZone = Ext.create('Ext.dd.DragZone', v.getEl(), {
            ddGroup: 'attsToBlank',
            getDragData: function(e) {
                var sourceEl = e.getTarget(v.itemSelector, 10), d;
                if (sourceEl) {
                    d = sourceEl.cloneNode(true);
                    d.id = Ext.id();
                    return v.dragData = {
                        sourceEl: sourceEl,
                        repairXY: Ext.fly(sourceEl).getXY(),
                        ddel: d,
                        attributeData: v.getRecord(sourceEl).data
                    };
                }
            },
            getRepairXY: function() {
                return this.dragData.repairXY;
            }
        });
    }

    // Добавляем возможность дропать атрибуты из списка на бланк
    function initializeBlankDropZone (v) {
        v.dropZone = Ext.create('Ext.dd.DropZone', v.el, {
            ddGroup: 'attsToBlank',
            getTargetFromEvent: function(e) {
                return e.getTarget('.blankbuilder-attribute-new');
            },
            onNodeEnter : function(target, dd, e, data){
                Ext.fly(target).addCls('blankbuilder-attribute-new-hover');
            },
            onNodeOut : function(target, dd, e, data){
                Ext.fly(target).removeCls('blankbuilder-attribute-new-hover');
            },
            onNodeOver : function(target, dd, e, data){
                return Ext.dd.DropZone.prototype.dropAllowed;
            },
            onNodeDrop : function(target, dd, e, data){
                // some code
            }
        });
    }
...