Question

我正在使用rails 3.x实现给出here的Extjs 4（MVC）示例。

我有以下结构：在公共目录中，

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 （WITHOUT PLUGIN）中实现拖放功能。

有什么建议吗？

Answer 1

我认为这不是完美的方式，但它适用于我的项目：

将侦听器添加到要拖动的元素或/或删除：
```
listeners: {
      render: initializeDD
}
```

实施d＆amp; d configuretaion方法（在我的情况下重新排序组件）：

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

在没有插件的情况下，2个网格之间有4个拖放？

1 个答案: