javascript - Sencha Ext JS 4，使用另一个面板创建可拖动面板时遇到问题

Question

我尝试在 sencha 论坛上问这个问题，但没有成功: http://www.sencha.com/forum/showthread.php?175816-Attempting-to-create-draggable-panel-within-another-panel-stuck-in-upper-left-corner

我正在尝试在另一个面板中添加一个小面板，并允许用户在屏幕上拖动它。

Ext.define('CS.view.StartScreen', { extend: 'Ext.panel.Panel',
    alias: 'widget.startscreen',
    items: [{
        xtype: 'panel',
        title: 'Hello',
    //  closable: true,
    //  collapsible: true,
        draggable: true,
    //  resizable: true,
    //  maximizable: true,
        constrain: true,
        height: 300,
        width: 300
    }],
    dockedItems: [{
        xtype: 'toolbar',
        dock: 'bottom',
        layout: 'hbox',
        pack: 'center',
        items: [
            {xtype: 'button', text: 'Click Me'}
        ]
    }]
});

但是，每当我尝试拖动面板时，它都会弹回到左上角。谁能告诉我我做错了什么？谢谢!

<小时/>

编辑 1有问题的应用程序的完整代码:

app.js

Ext.Loader.setConfig({
    enabled: true
});

Ext.application({
    name: 'CS',

    appFolder: 'ccms/app',
    autoCreateViewport: true,

    controllers: [
        'TestCreator',
        'Primary',
        'Manager'
    ],

    launch: function(){

    }
});

TestCreator.js

Ext.define('CS.controller.TestCreator', {
    extend: 'Ext.app.Controller',

    views: [
        'testcreator.ViewTestCreator'
    ],

    init: function(){

        console.log('testcreator init');

        this.control({

        });

    }
});

Primary.js

Ext.define('CS.controller.Primary',{
    extend: 'Ext.app.Controller',

    views: [
        'ViewLogin',
    ],

    init: function(){

        this.control({
            'viewport': {
                afterrender: function(viewport, opts){

                    viewport.add([{
                        xtype: 'viewlogin',
                        itemId: 'viewlogin'
                    }]);

                }
            },
            'viewlogin button[text = Submit]': {
                click: function(btn, e, eOpts){

                    var form = btn.up('form').getForm();
                    form.submit({
                        success: function(form, action){

                            console.log(action.result);

                            btn.up('viewport').remove('viewlogin');
                            var viewport = Ext.ComponentQuery.query('viewport');

                            if(viewport.length > 0)
                                viewport[0].add({xtype: 'dashboard'});

                        },
                        failure: function(form, action){

                        },
                        scope: this
                    });

                }
            }
        });

    }

});

Manager.js

Ext.define('CS.controller.Manager', {
    extend: 'Ext.app.Controller',

    views: [
        'ViewDashboard'
    ],

    init: function(){

        this.control({
            'viewport > formbuilder': {
                render: function(){
                    console.log('render yo');
                }
            }
        });

    }
});

Viewport.js

Ext.define('CS.view.Viewport', {
    extend: 'Ext.container.Viewport',
    layout: 'fit'
})

ViewLogin.js

    Ext.define('CS.view.ViewLogin',{
    extend: 'Ext.panel.Panel',
    alias: 'widget.viewlogin',
    layout: {
        type: 'vbox',
        align: 'center',
        pack: 'start'
    },
    items: [{
        flex: 1,
        border: false
    },{
        xtype: 'form',
        url: '/index.php/auth',
        baseParams: {
            csrf_token: Ext.util.Cookies.get('ci_csrf'),
            cs_method: 'user_login'
        },
        width: 300,
        layout: 'anchor',
        title: 'Login',
        defaults: {
            margin: '5 5 5 5'
        },
        items: [{
                xtype: 'textfield',
                fieldLabel: 'Username',
                inputType: 'text',
                name: 'username'
            },{
                xtype: 'textfield',
                fieldLabel: 'Password',
                inputType: 'password',
                name: 'password'
            }],
        buttons: [{
                text: 'Reset',
                handler: function() {
                    console.log('button pressed');
                    this.up('form').getForm().reset();
                }
            },{
                text: 'Submit'
            }]
    },{
        flex: 2,
        border: false
    }]
});

ViewDashboard.js

Ext.define('CS.view.ViewDashboard', {
    extend: 'Ext.panel.Panel',
    alias: 'widget.dashboard',
    layout: 'fit',

    bodyStyle: {"background-color":"#FF6600"},

    items: [{
        xtype: 'testcreator'
    }],

    dockedItems: [{
        xtype: 'toolbar',
        dock: 'bottom',
        layout: 'hbox',
        pack: 'center',
        items: [{   
                xtype: 'splitbutton', 
                text: 'Applications',
                handler: function(){
                    console.log('splitbutton');
                },
                menu: new Ext.menu.Menu({
                    items: [
                        {text: 'Item 1', hander: function(){}},
                        {text: 'Item 2', hander: function(){}},
                    ]
                })
        }]
    }],
    listeners: {
        render: function(sender){

            console.log(sender);

            sender.dropZone = new Ext.dd.DropZone(sender.body, {

                getTargetFromEvent: function(e) {

                    console.log('getTargetFromEvent');

                    var temp = { 
                        x: e.getX() - this.DDMInstance.deltaX, 
                        y: e.getY() - this.DDMInstance.deltaY
                    };

                    console.log(temp);
                    return temp;

                },

                // On entry into a target node, highlight that node.
                onNodeEnter : function(target, dd, e, data){ 
                //    Ext.fly(target).addCls('my-row-highlight-class');
                },

                // On exit from a target node, unhighlight that node.
                onNodeOut : function(target, dd, e, data){ 
                //    Ext.fly(target).removeCls('my-row-highlight-class');
                },

                onNodeOver : function(target, dd, e, data){ 
                    return Ext.dd.DropZone.prototype.dropAllowed;
                },

                onNodeDrop : function(target, dd, e, data){

                    console.log('onNodeDrop');
                    data.panel.setPosition(50, 50, true);
                    return true;

                }
            });



        }
    }
});

TestCreator.js

Ext.define('CS.view.testcreator.ViewTestCreator', {
    extend: 'Ext.panel.Panel',

    alias: 'widget.testcreator',

    layout: {
        type: 'hbox',
        pack: 'start',
        align: 'stretch'
    },

    draggable: true,
    title: 'Form Builder',

    width: 600,
    height: 450,

    dockedItems: [{
        xtype: 'toolbar',
        dock: 'top',
        layout: 'hbox',
        items: [{
            text: 'File'
        },{
            text: 'Edit'
        },{
            text: 'Help'
        }]
    }],

    items: [{
        html: 'panel 1',
        flex: 1
    },{
        html: 'panel 2',
        flex: 2
    }]
});

Answer 1

您必须实现drop zone对于CS.view.StartScreen。例如，您可以将以下渲染处理程序添加到代码中:

render: function(sender) {
    sender.dropZone = new Ext.dd.DropZone(sender.body, {

        getTargetFromEvent: function(e) {
            return { 
                x: e.getX() - this.DDMInstance.deltaX, 
                y: e.getY() - this.DDMInstance.deltaY
            };
        },

        onNodeOver : function(target, dd, e, data){ 
            return Ext.dd.DropZone.prototype.dropAllowed;
        },

        onNodeDrop : function(target, dd, e, data){
            data.panel.setPosition(target.x, target.y);
            return true;
        }
    });
}

工作示例:http://jsfiddle.net/lolo/5MXJ9/2/