ExtJS 4.1 - 使用RowExpander拖放問題

更新9/11/13 - 下面是一個完全正常的jsFiddle演示問題...體驗問題，展開網格並嘗試將嵌套行拖到TreePanel。 drag元素將被TreePanel模糊處理，就好像它在後面一樣。鏈接在這裏：http://jsfiddle.net/ZGxf5/ExtJS 4.1 - 使用RowExpander拖放問題

這裏有點獨特的路障我碰到的......我想它會用圖像來最好的說明：

Drag and Drop Woes

正如你可以在圖片中看到，我試圖拖動div，通過在圖像的左下角所示的網格中使用的RowExpander插件的rowBodyTpl屬性生成。我能夠「抓住」元素並將其移動，但它似乎受限於RowExpander生成的div。我不能拖動任何更離開的div，也不能從原來的位置向上拖動div。試圖將其移動到面板右側會導致拖動div被模糊處理，如圖所示。

我試圖完全消除startDrag方法的所有約束，你將在下面的代碼中看到，但都無濟於事。我基本上只是使用Sencha的5 Steps to Understanding Drag and Drop with ExtJS Blog Post中提供的代碼，但顯然需要對我的實現進行一些調整。

下面是我對初始化目標DIV拖動代碼..如下

/** 
    * NOTE: The following code is executed whenever 
    * the contents of the grid's store change 
    */ 

    var me = this, // ENTIRE left panel, including the TreePanel and lower GridPanel 
     divs = Ext.select('div[name=storage-item-div]', false, me.getEl().dom), 
     dragOverrides = {}; // provided separately, see below 

    Ext.each(divs.elements, function(el){ 
     console.warn("mkaing new dd", el); 
     var dd = new Ext.dd.DD(el, 'storageItemDDGroup',{ 
      isTarget: false 
     }); 

     Ext.apply(dd, dragOverrides); 
    });

的dragOverrides對象被定義（注意我的約束調試）

 dragOverrides = { 
      b4StartDrag : function() { 

       // Cache the drag element 
       if (!this.el) { 
        this.el = Ext.get(this.getEl()); 
       } 

       //Cache the original XY Coordinates of the element, we'll use this later. 
       this.originalXY = this.el.getXY(); 

      }, 
      startDrag: function(){ 
       /** DEBUGGING */ 
       _t = this; 
       this.resetConstraints(); 
       this.setXConstraint(1000,1000); 
       this.setYConstraint(1000,1000); 
      }, 
      // Called when element is dropped not anything other than a dropzone with the same ddgroup 
      onInvalidDrop : function() { 
       // Set a flag to invoke the animated repair 
       this.invalidDrop = true; 
      }, 
      // Called when the drag operation completes 
      endDrag : function() { 
       // Invoke the animation if the invalidDrop flag is set to true 
       if (this.invalidDrop === true) { 
        // Remove the drop invitation 
        this.el.removeCls('dropOK'); 

        // Create the animation configuration object 
        var animCfgObj = { 
         easing : 'elasticOut', 
         duration : 1, 
         scope : this, 
         callback : function() { 
          // Remove the position attribute 
          this.el.dom.style.position = ''; 
         } 
        }; 

        // Apply the repair animation 
        this.el.moveTo(this.originalXY[0], this.originalXY[1], animCfgObj); 
        delete this.invalidDrop; 
       } 

      }

最後，我想下層網格配置的rowBodyTpl部分可能對解決這個問題很有用，所以這裏是源代碼！

rowBodyTpl : ['<div id="OrderData-{item_id}" style="margin-left: 50px;">'+ 
        '<tpl for="order_data">'+ 
         '<tpl for=".">' + 
          '<div name="storage-item-div" class="draggable" style="padding-bottom: 5px;">' + 
          '<b>{quantity}</b> from Purchase Order <b>{purchase_order_num}</b> @ ${purchase_cost}' + 
          '<input type="button" style="margin-left: 10px;" name="storageViewOrderButton" orderid="{purchase_order_id}" value="View Order"/>' + 
          '</div>' + 
         '</tpl>' + 
        '</tpl>'+ 
        '</div>']

來源

2013-09-10 John Hall

新增jsFiddle示例：http://jsfiddle.net/ZGxf5/ –

我能在小提琴得到這個工作，但我不得不切換我RowExpander模板，而不是渲染Ext.view.View而不是我以前用的是div。使用Ext.view.View讓我基本上只是按照煎茶演示使用DragZone和DropZone ..有點想它不是那麼複雜，但是，嘿，這只是它是如何有時候，我猜。

見很凌亂的jsfiddle源這裏使用DragZone和DropZone一個工作演示，隨意調整自己的需要：http://jsfiddle.net/knppJ/

同樣，這裏的問題是從裏面拖出一個div嵌套一個的GridPanel內部的RowExpander生成的行到一個單獨的相鄰面板。我在上面的問題中詳細描述了我遇到的問題。我無法按照我想要的方式獲得正常的div，所以我最終使用Ext.view.View代替了網格。這需要添加一些額外的邏輯在由RowExpander插件觸發的事件onbodyexpand，基本上只是渲染Ext.view.View由RowExpander產生的div。

來源

2013-09-11 21:22:26

ExtJS 4.1 - 使用RowExpander拖放問題

回答

相關問題