本文介绍了如何在主面板中拖动面板的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

如何允许拖放在主面板中放置面板?
我有一个面板包含一个面板(暂时)或一些面板,我想允许拖放组织面板。
喜欢这个例子:
但我不明白如何适应我的应用程序。

How to allow drag & drop panels in a main panel ?I have a panel which contains one panel ( for the moment ) or somes panels and i want allow drag and drop for organize panels.like this examples : http://examples.extjs.eu/freedrag.htmlbut i don't understand how to adapte this with my application .

我的代码:
(粘滞物品是tabobj tab.Panel然后我想要拖放)

My code :( Is the Sticky items into tabobj tab.Panel then i want drag & drop )

Ext.require([
    'Ext.grid.*',
    'Ext.data.*',
    'Ext.util.*',
    'Ext.Action',
    'Ext.tab.*',
    'Ext.button.*',
    'Ext.form.*',
    'Ext.layout.*'
]);

Ext.onReady(function() {

    Ext.tip.QuickTipManager.init();

    Ext.define('Mesclasses.objet.sticky', {

        alias: ['widget.stick'],
        extend: 'Ext.panel.Panel',
        bodyStyle: {
            background: 'yellow',

        },
        height: 150,

        width: 150,
        margin: '10 0 0 10',
        draggable: true,
        items: [{

            xtype: 'label',
            text: 'Title',
            listeners: {

                move: function (me, x, y, opt) {

                    alert('move');
                }
            }
        }],
    });

    var item2 = Ext.create('Ext.Panel', {
        title: 'Accordion Item 2',
        html: '<empty panel>',
        cls: 'empty'
    });

    var item3 = Ext.create('Ext.Panel', {
        title: 'Accordion Item 3',
        html: '<empty panel>',
        cls: 'empty'
    });

    var item4 = Ext.create('Ext.Panel', {
        title: 'Accordion Item 4',
        html: '<empty panel>',
        cls: 'empty'
    });

    var item5 = Ext.create('Ext.Panel', {
        title: 'Accordion Item 5',
        html: '<empty panel>',
        cls: 'empty'
    });

    var accordion = Ext.create('Ext.Panel', {
        region: 'west',
        margins: '5 0 5 5',
        split: true,
        width: 210,
        layout: 'accordion',
        items: [item2, item3, item4, item5]
    });

    var paneltitle = Ext.create('Ext.panel.Panel', {
        region: 'north',
        html: '<h1 class="x-panel-header" id="title">Your Sticky World</h1>',
        height: 40

    });

    var montab = Ext.create('Ext.tab.Tab', {
        title: 'lol',
    });

    var tabobj = Ext.create('Ext.tab.Panel', {

        region: 'center',
        //xtype: 'tabpanel', // TabPanel itself has no title
        activeTab: 0, // First tab active by default

        items: [{
            title: 'My Stickys',
            xtype: 'panel',

            items: [{

                xtype: 'stick',
            }]
        }]
    });

    Ext.create('Ext.container.Viewport', {
        layout: 'border',
        renderTo: Ext.getBody(),
        items: [
            paneltitle,
            accordion, {
                region: 'south',
                title: 'South Panel',
                collapsible: true,
                html: 'Information goes here',
                split: true,
                height: 100,
                minHeight: 100
            }, {
                region: 'east',
                title: 'East Panel',
                collapsible: true,
                split: true,
                width: 150
            },
            tabobj]
    });
});


推荐答案

查看可以帮助。

主要思想是,一般来说,创建 for您正在拖动的每个面板。
所以,以下代码段可以帮助您获得基本功能:

The main idea is, generally, to create Ext.dd.DDProxy for each panel you are dragging.So, the following snippet could help you get the basic functionality working:

{
    title: 'My Stickys',
    xtype: 'panel',
    items : [{
        xtype : 'stick',
        listeners : {
            afterrender : function(stick){
                stick.dd = new Ext.dd.DDProxy(stick.el.dom.id, 'group');
            }
        }
    }]
}

或者,为了更通用(检查afterrender监听器):

Or, to be more generic (check the afterrender listener):

Ext.define('Mesclasses.objet.sticky',{
    alias : ['widget.stick'],
    extend : 'Ext.panel.Panel',
    bodyStyle: {
        background: 'yellow',

    },
    height : 150,

    width : 150,
    margin : '10 0 0 10',
    draggable : true,
    items: [{
        xtype: 'label',
        text : 'Title',
        listeners : {
            move : function(me,x,y,opt){
                alert('move');
            }
        }
    }],
    listeners : {
        afterrender : function(stick){
            stick.dd = new Ext.dd.DDProxy(stick.el.dom.id, 'group');
        }
    }
});

以下是您最感兴趣的渲染部分(使用ExtJS 3的原始页面):

Here is the render part you are mostly interested in (original page using ExtJS 3 though):

// runs after the window is rendered
,afterRender:function() {

    // create items using template
    Ext.Window.prototype.afterRender.apply(this, arguments);
    this.tpl.overwrite(this.body, this);

    // setup D&D
    var items = this.body.select('div.draggable');

    // loop through draggable items
    items.each(function(el, ce, index) {

        // create DDProxy
        el.dd = new Ext.dd.DDProxy(el.dom.id, 'group');

        // configure the proxy
        Ext.apply(el.dd, {
             win:this
            ,itemIndex:index

            // runs on drag start
            // create nice proxy and constrain it to body
            ,startDrag:function(x, y) {
                var dragEl = Ext.get(this.getDragEl());
                var el = Ext.get(this.getEl());

                dragEl.applyStyles({border:'','z-index':this.win.lastZIndex + 1});
                dragEl.update(el.dom.innerHTML);
                dragEl.addClass(el.dom.className + ' dd-proxy');

                this.constrainTo(this.win.body);
            } // eo function startDrag

            // runs on drag end
            // save new position of item and fire itemdrag event to save state
            ,afterDrag:function() {
                var el = Ext.get(this.getEl());
                var div = this.win.divs[this.itemIndex];
                div.x = el.getLeft(true);
                div.y = el.getTop(true);
                this.win.fireEvent('itemdrag', this);
            } // eo function afterDrag

        }) // eo apply

    }, this); // eo each
} // eo function afterRender

这篇关于如何在主面板中拖动面板的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-03 23:30