title: ExtJS : move a record in a grid
body: <p>I have a simple grid on ExtJS and would like the user to be able to move the record from its original position.
  When the user double clicks on a record, a small window containing a combobox appears, he can choose a value on the combobox and then click the save button to apply the change.
  However, it doesn't work, I've searched many solutions for this on different forums and none seems to work. Either nothing happens, or an undefined row is added at the end of the grid. Here is the base code I use  : </p>
  
  <pre><code>onEditRank: function(view, cell, cellIndex, record, row, rowIndex, e)
          {
              var reditor = Ext.create('CMS.view.Views.RankEditor', {id: 'reditorView'});
              var form = reditor.down('form');
              var oldPos = this.getFlatrq().getView().indexOf(record);
              var grStore = this.getGridRnkStoreStore();
  
              var i;
              var data = [];
              for(i = 1; i &lt;= CMS.global.Variables.limit + 1; i++)
              {
                  data.push(i);
              }
  
              var combo = Ext.create
              (
                  'Ext.form.field.ComboBox',
                  {
                      fieldLabel: 'Rank',
                      itemId: 'cmbRank',
                      store: data
                  }
              );
              var saveRnk = Ext.create
              (
                  'Ext.button.Button',
                  {
                      text: 'Save',
                      handler: function()
                      {
                      }
                  }
              );
              form.add(combo);
              form.add(saveRnk);
  
              reditor.show();
          }
  </code></pre>
  
  <p>Now here are the different handlers I have tried for my save button : </p>
  
  <pre><code>handler: function()
  {
     grStore.remove(record);
     grStore.insert(record, combo.getValue() - 1);
  
  
     this.up('form').up('window').close();
  }
  
  handler: function()
  {
     grStore.removeAt(oldPos);
     grStore.insert(record, combo.getValue() - 1);
     this.up('form').up('window').close();
  }
  
  handler: function()
  {
     var rec = grStore.getAt(oldPos).copy();
     grStore.removeAt(oldPos);
     grStore.insert(rec, combo.getValue() - 1);
     this.up('form').up('window').close();
  }
  </code></pre>
  
  <p>Those 3 handlers inserted undefined rows at the end of my grid. I displayed the values of oldPos and combo.getValue() and they are correct, I also displayed the record variable before and after the remove because I thought it might be destroyed but it wasn't. I have also tried to add a move function to store and call it :</p>
  
  <pre><code>'CMS.store.GridRnkStore', 
      {
          extend: 'Ext.data.Store',
          model: 'CMS.model.GridRnkModel',
          autoLoad: false,
          filterOnLoad: true,
          autoSync: true,
          move: function(from, to)
          {
              console.log(from + " " + to);
              var r = this.getAt(from);
              this.data.removeAt(from);
              this.data.insert(to, r);
              this.fireEvent("move", this, from, to);
          },
  
      }
  );
  </code></pre>
  
  <p>But it didn't work either, it did nothing actually (I put some console.log in the move function to see if it was called and it was, with the right parameters). I'm running out of ideas, any help would be appreciated.
  Thank you.</p>