2

我正在尝试在treepanelExtJS 4 中实现拖放功能。基本上我想将一些节点从树形面板拖到文本框中。我对在 ExtJS 4 中实现拖放的方式感到非常困惑，但后来我也尝试编写一些代码。我不确定它是否正确。

我的代码如下：

CustomChart.js文件内容

Ext.define('dd.view.CustomChart', {
    extend : 'Ext.panel.Panel',
    alias : 'widget.customChart',
    layout : {
        type : 'vbox',
        align : 'stretch'
    },

    initComponent : function() {
        this.items = [
            {
                xtype : 'textfield',
                name : 'values',
                fieldLabel : 'Drop values here'
            }
        ];
        this.callParent(arguments);
    }
});

我CustomChart在文件中使用这个面板AttritionViewer如下：

Ext.define('dd.view.AttritionViewer', {
    extend : 'Ext.panel.Panel',
    alias : 'widget.attritionViewer',
    title : 'View attrition by dimensions',

    layout : 'border',

    initComponent : function() {
        this.items = [
            {
                xtype : 'treepanel',
                title : 'Select dimensions',
                store : 'Dimensions',
                rootVisible : false,
                region : 'west',
                height : '100%',
                width : '20%',
                viewConfig : {
                    plugins : {
                        ptype : 'treeviewdragdrop',
                        ddGroup: 'GridExample'
                    }
                }
            },
            {
                xtype : 'panel',
                region : 'center',
                    layout : {
                    type : 'vbox',
                    align : 'stretch'
                },
                items : [
                    {
                        xtype : 'customChart',
                        flex : 1
                    }
                ]
            }
        ];
        this.callParent(arguments);
    }
});

正如您在上面的代码中看到的，我已经为树面板设置了ViewConfig和ddGroup。现在我不确定将以下代码放在哪里，所以我把它放在init()控制器的方法中。init()我的控制器的方法如下所示：

var customChartEl =  Ext.widget('customChart');

var formPanelDropTarget = Ext.create('Ext.dd.DropTarget', customChartEl, {
    ddGroup: 'GridExample',

    notifyEnter: function(ddSource, e, data) {
        console.log('inside notifyEnter() method');
        //Add some flare to invite drop.
    /*    formPanel.body.stopAnimation();
        formPanel.body.highlight(); */
    },
    notifyDrop  : function(ddSource, e, data){
        console.log('inside notifyDrop() method');
        return true;
    }        
});

在这段代码之后，我this.el is null在ext-debug.js (line 7859). 我不知道下一步该做什么。

请指导我如何从文本字段内的树形面板中拖动节点。

提前致谢 ！！！

4

1 回答 1

3

检查此链接， http ://examples.extjs.eu/?ex=tree2divdrag 我也在尝试一项类似的任务。如果我得到一些输出，我可以帮助你。如果您解决了您的问题，请在此处记下，这对我也有帮助。

也检查这个样本的来源。http://docs.sencha.com/ext-js/4-0/#!/example/dd/dragdropzones.html。

最良好的祝愿。

于 2012-05-07T10:06:26.497 回答