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

上記のコードでわかるように、treepanelに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 私も同様のタスクを1つ試しています。出力があればお手伝いします。問題を解決する場合は、ここに書き留めておいてください。それは私にも役立ちます。

このサンプルのソースも確認してください。http://docs.sencha.com/ext-js/4-0/#!/example/dd/dragdropzones.html .

幸運をお祈りしています。

于 2012-05-07T10:06:26.497 に答える