Ext JS Reordering un glisser-déposer la liste

Question

J'ai suivi le tutoriel sur au http://www.sencha.com/learn/Tutorial:Custom_Drag_and_Drop_Part_1

Il est grand, mais je maintenant besoin de conseils sur la façon d'ajouter fonctionnellement d'être de pouvoir modifier l'ordre d'une liste unique. Au moment où je dépose un objet sur la liste, il est ajouté à la fin. Cependant, je souhaite être en mesure de faire glisser un objet entre deux autres ou à l'avant puis déposez-le là.

Tout conseil apprécié, merci.

Answer 1

J'ai trouvé Ext.GridPanel trier des lignes par glisser-déposer exemple de travail dans le blog http://hamisageek.blogspot.com/2009/02/extjs-tip-sortable-grid-rows-via-drag.html Cela a fonctionné très bien pour moi. Voici mon code js:

app.grid = new Ext.grid.GridPanel({ 
    store: app.store, 
    sm: new Ext.grid.RowSelectionModel({singleSelect:false}), 
    cm: new Ext.grid.ColumnModel({ 
     columns: app.colmodel 
    }), 
    ddGroup: 'dd', 
    enableDragDrop: true, 
    listeners: { 
     "render": { 
      scope: this, 
      fn: function(grid) { 
      // Enable sorting Rows via Drag & Drop 
      // this drop target listens for a row drop 
      // and handles rearranging the rows 

        var ddrow = new Ext.dd.DropTarget(grid.container, { 
         ddGroup : 'dd', 
         copy:false, 
         notifyDrop : function(dd, e, data){ 

          var ds = grid.store; 

          // NOTE: 
          // you may need to make an ajax call 
          // here 
          // to send the new order 
          // and then reload the store 


          // alternatively, you can handle the 
          // changes 
          // in the order of the row as 
          // demonstrated below 

          // *************************************** 

          var sm = grid.getSelectionModel(); 
          var rows = sm.getSelections(); 
          if(dd.getDragData(e)) { 
           var cindex=dd.getDragData(e).rowIndex; 
           if(typeof(cindex) != "undefined") { 
            for(i = 0; i < rows.length; i++) { 
            ds.remove(ds.getById(rows[i].id)); 
            } 
            ds.insert(cindex,data.selections); 
            sm.clearSelections(); 
           } 
          } 

          // ************************************ 
          } 
         }) 

         // load the grid store 
         // after the grid has been rendered 
        this.store.load(); 
        } 
       } 
    } 
}); 

Answer 2

Si vous aviez mise en page hbox avec 3 côté grille côte à côte

new Ext.Panel(
{ 
    layout: "hbox", 
    anchor: '100% 100%', 
    layoutConfig: 
    { 
     align: 'stretch', 
     pack: 'start' 
    }, 
    items: [GridPanel1, GridPanel2, GridPanel3 
}) 

alors vous devez juse réseau El à la place du conteneur

var ddrow = new Ext.dd.DropTarget(grid.getEl(), { ....