Widgety wewnątrz dojo dgrid

Question

Nasza firma przeszła od dojox/DataGrid do dgrid jakiś czas temu. Teraz dowiadujemy się, że dgrid nie obsługuje już widżetów dijit/dojox po wyjęciu z pudełka.

dojox/DataGrid ma formatter(), który może zwrócić widżet. Tak łatwo to tam zrobić! API comparison on GitHub mówi

„dgrid obsługuje funkcje formater, ale nie obsługuje przekazujących widget z .dgrid nich ma również renderCell, co do której oczekuje się zamian węzła DOM. To mogłoby rzekomo być używany do wyświetlania widżety (i wtyczka kolumny redaktora robi dokładnie to). Zauważ, że do celów edycji komórek, użycie wtyczki kolumny redaktora jest wysoce zalecane . "

Jak dokładnie?

Próbowałem użyć wtyczki edytora z {editor: ' ', editorArgs:' '}. Spowoduje to renderowanie widgetu, ale jest zbyt restrykcyjne. Np. Jak wyrenderować dijit/Button z etykietą będącą wartością komórki? Lub coś bardziej złożonego, jak używać (mniej znanego) dojox/image/MagnifierLite z <img> generowanym z funkcji formatyzatora o wartości src będącej wartością sklepu?

Answer 1

można użyć tej Przykładowy kod

require(
    [ 
     "dgrid/List", 
     "dgrid/OnDemandGrid", 
     "dgrid/Selection", 
     "dgrid/editor", 
     "dgrid/Keyboard", 
     "dgrid/tree", 
     "dojo/_base/declare", 
     "dojo/store/JsonRest", 
     "dojo/store/Observable", 
     "dojo/store/Cache", 
     "dojo/store/Memory", 
     "dijit/form/Button", 
     "dojo/domReady!" 
    ], 

    function(
     List, 
     Grid, 
     Selection, 
     editor, 
     Keyboard, 
     tree, 
     declare, 
     JsonRest, 
     Observable, 
     Cache, 
     Memory, 
     Button 
    ) { 

     var columns = [ 
      { 
       label:"Actions", 
       field:"id", 
       width: "200px", 
       renderCell: actionRenderCell 
      } 
     ]; 

     var actionRenderCell = function (object, data, cell) { 

      var btnDelete = new Button({ 
       rowId : object.id, 
       label: "Delete", 
       onClick: function() { 
        myStore.remove(this.rowId); 
       } 
      }, cell.appendChild(document.createElement("div"))); 

      btnDelete._destroyOnRemove = true; 

      return btnDelete; 

     } 

     grid = new (declare([Grid, Selection, Keyboard]))({ 
      store: myStore, 
      getBeforePut: false, 
      columns: columns 
     }, "grid"); 

}