ExtJS 4.1 - 拖放与 RowExpander 问题答案

【问题标题】：ExtJS 4.1 - Drag and Drop with RowExpander IssuesExtJS 4.1 - 拖放与 RowExpander 问题
【发布时间】：2013-09-10 20:54:55
【问题描述】：

2013 年 9 月 11 日更新 - 这是一个完整工作的 jsFiddle，演示了该问题...体验该问题，展开网格并尝试将嵌套行拖到 TreePanel。拖动元素将被 TreePanel 混淆，就好像它在它后面一样。链接在这里：http://jsfiddle.net/ZGxf5/

这是我遇到的一个独特的障碍......我认为最好用图片来说明：

正如您在图片中看到的，我正在尝试拖动一个div，该div 是通过图片左下角显示的网格中使用的RowExpander 插件的rowBodyTpl 属性生成的。我能够“抓住”元素并移动它，但它似乎受限于 RowExpander 生成的 div。我不能将 div 向左拖动，也不能从其原始位置向上拖动。尝试将其移动到右侧的面板中会导致拖动的 div 被混淆，如图所示。

我试图完全消除startDrag 方法中的所有约束，正如您将在下面的代码中看到的那样，但无济于事。我基本上只是在使用 Sencha 的5 Steps to Understanding Drag and Drop with ExtJS Blog Post 中提供的代码，但它显然需要对我的实现进行一些调整。

下面是我在目标 div 上初始化 Drag 的代码。

 /** 
   * 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 对象定义如下（注意我对 Constrain 的调试）

        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>']

【问题讨论】：

添加了 jsFiddle 示例：jsfiddle.net/ZGxf5

标签： javascript extjs drag-and-drop extjs4.1

【解决方案1】：

我能够在 Fiddle 中完成这项工作，但我不得不切换我的 RowExpander 模板来渲染 Ext.view.View 而不是我之前使用的 div。使用Ext.view.View 让我基本上可以按照使用DragZone 和DropZone 的Sencha 演示进行操作。有点希望它不是那么复杂，但是嘿，我猜有时就是这样。

在此处查看 very messy jsFiddle 源代码以获取使用 DragZone 和 DropZone 的工作演示，请随时根据自己的需要进行调整：http://jsfiddle.net/knppJ/

同样，这里的问题是将 nested div 从 gridpanel 内的 RowExpander 生成的行中拖动到 单独的相邻面板。我遇到的问题在我上面的问题中得到了彻底的描述。我无法让常规的div 以我想要的方式工作，所以我最终使用Ext.view.View 代替了网格。这需要在RowExpander 插件触发的onbodyexpand 事件中添加一些额外的逻辑，基本上只是将Ext.view.View 渲染到div 生成的RowExpander。

【讨论】：