ExtJSのトレパネルにドラッグドロップ機能を作成中にthis.elがnullです。

Question

ExtJS 4のtreepanelにドラッグアンドドロップ機能を実装しようとしています。基本的に、treepanelからいくつかのノードをテキストにドラッグしたいボックス。 ExtJS 4でdrag-n-dropが実装されている方法とかなり混乱していますが、私はいくつかのコードを書くことも試みました。それが正しいかどうかわからない。

次のように私のコードは次のとおりです。

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

次のように私はAttritionViewerファイル内でこのCustomChartパネルを使用しています：

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のためにと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; 
    }   
}); 

をこのコードの後、私はext-debug.js (line 7859)でthis.el is nullエラーを取得しています。私は次に何をすべきかを知らない。

テキストフィールド内でtreepanelからノードをドラッグする方法を教えてください。

ありがとうございます!!!

Answer 1

このリンクを確認してください。 http://examples.extjs.eu/?ex=tree2divdrag 私も同じような仕事をしています。私はいくつかの出力を得る場合私はあなたを助けることができます。 問題を解決した場合は、ここで注意してください。

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

最高の願い。