ExtJS 4/5 - 爲自定義規則不允許的拖放設置正確的CSS

我有兩個並排的網格。左邊的網格有一個用戶可以選擇的標籤列表，右邊的網格是空的，因此用戶可以拖動他想要的標籤。ExtJS 4/5 - 爲自定義規則不允許的拖放設置正確的CSS

兩個網格插件代碼爲：

viewConfig: { 
    plugins: [ 
     Ext.create('Ext.grid.plugin.DragDrop', { 
      ddGroup: 'selectedTags' 
     }) 
    ] 
}

所以，我希望能夠限制用戶能夠拖動只有5標籤，我已經添加以下代碼到網格右側：

listeners: { 
    beforedrop: { 
     fn: function() { 
      if (grid.getStore().data.items.length > 4) { 
       dropHandlers.cancelDrop(); 
      } 
     }, 
     scope: me 
    } 
}

這是工作完美，但我想要的是顯示NO-DROP圖標時，項目拖過網，而不是呈現猶如該訴訟被允許的綠線。

感謝，

來源

2013-10-22 Guilherme Lopes

經過一段時間尋找這個解決方案後，我終於想通了。

您必須添加兩種方法的靶標網格懸浮窗： notifyOver和onNodeDrop

我的問題的解決方案將是下面的代碼：

Ext.create('Ext.grid.Panel', { 
    store: myStore, 
    columns: [columns], 
    viewConfig: { 
     plugins: { 
      ptype: 'gridviewdragdrop', 
      dragText: 'Drag and drop to reorganize', 
      pluginId : 'dragNdrop', 
      dropZone:{ 
       notifyOver:function(source, e, data){ 
        var store = this.view.ownerCt.getStore(); 

        return store.getCount()<5?this.dropAllowed:this.dropNotAllowed 
       }, 
       onNodeDrop:function(targetNode,dragZone,e,data){ 
        var sourceStore = dragZone.view.ownerCt.getStore(), 
         targetStore = this.view.ownerCt.getStore(), 
         isDropValid = targetStore.getCount()<5; 
        if(isDropValid){ 
         sourceStore.remove(data.records[0]) 
         targetStore.add(data.records[0]); 
        } 

        return isDropValid; 
       } 
      } 
     } 
    }, 
    height: 200, 
    width: 400, 
    renderTo: Ext.getBody() 
});

來源

2014-10-17 18:16:56

洛佩斯，你也可以使用列渲染器網格在那裏你可以檢查的項目數，並顯示相應的圖標。代碼片段供您參考：

gridCheckboxRenderer: function(value, meta, rec, rowInd, colInd, store){ 
     var cssPrefix = Ext.baseCSSPrefix, cls = [cssPrefix + 'grid-checkheader']; 
     if (condition == false) { 
     cls.push(cssPrefix + 'grid-checkheader-checked-disabled'); 
     return '<div class="' + cls.join(' ') + '">&#160;</div>'; 
     } 
     return '<div class="x-grid-row-checker">&#160;</div>'; 
    }

希望它有幫助。

來源

2013-10-23 08:39:32 Rajinder

ExtJS 4/5 - 爲自定義規則不允許的拖放設置正確的CSS

回答

相關問題