EditorGridPanel on Mac scrolls to top after edit

[Cry_Sisco]

Hello.

We're using an EditorGridPanel to edit dubbing scripts (for cartoons), and have a problem on Mac (only) where it scrolls to top after committing a change to a cell. After a lot of testing I've been able to narrow it down to the TextArea object. For some columns in the script we only use a simple TextField, and when we perform updates there the grid does not scroll to the top. It's only when editing with a TextArea that it happens.

The exact events are these: When closing the TextArea editor we send the updated data to our database (via the store update event). The grid scrolls up to the top, but the focus remains on the edited cell. After updating the database, we update the store with the data returned from the db (it performs some text cleaning), which causes the grid to scroll down again to the cell. (Interestingly, this scrolling down doesn't happen in ExtJS 3.0, only in 2.2.)

I've tried adding an override to the ScrollToTop function as suggested elsewhere on the forum, but this does not help with this particular problem. I've also tried disabling all properties of the grid, the TextArea and the store, as well as disabling the store entirely. I've tried updating to ExtJs 3.0 (we're running 2.2) but that only made it worse (see above).

The Mac(Book) on which we've tested this is running OS X 10.3.5 and Firefox 3.5.3. I'm not getting any errors from Firebug.

I've tried searching quite a bit for this, both on the forums and on Google, but haven't found anything, so I hope I'm not repeating something.

Please ask questions if there's something I've left out. Thank you.

[Cry_Sisco]

To confirm that the TextArea is to blame, I changed a simpler grid to use it instead of the TextField we normally use. I used it plain, with no properties, and still got the scrolling error.

Here's the code for the simple(r) grid:

function execCharacterDialog() {
  if (!characterwin) {
    var characterrec = Ext.data.Record.create([
      { name: 'character_id'},
      { name: 'original_name'},
      { name: 'translated_name'},
      { name: 'language'}
    ]);
  
    var characterreader = new Ext.data.JsonReader({
      id: "character_id"
    }, characterrec);

     characterstore = new Ext.data.Store({
      nocache : true,
      reader : characterreader,
      autoLoad : true,
      remoteSort: true,
      proxy : new Ext.data.HttpProxy({
        url : './getcharacters.php',
        method : 'GET'
      })
    });
    characterstore.on({
      update: function(store, record, operation) {
        if (operation == Ext.data.Record.COMMIT) {      
          var taskobj = {
            task: "update"
          };
          var newobj = Ext.apply(taskobj, record.data, {});
          Ext.Ajax.request({
            waitMsg: 'Saving changes...',
            url: 'updatecharacter.php',    
            params: newobj,
            failure: function(response,options) {
              Ext.MessageBox.alert('Warning','Oooops');
            }
          });
        } else {
          this.commitChanges();
        }
        return true; 
      }
    });
    
    var cm = new Ext.grid.ColumnModel([
      {
        header: "Original",
        dataIndex: 'original_name',
        width: 230,
        resizable: false
      },
      {
        header: "Translated",
        dataIndex: 'translated_name',
        width: 230,
        resizable: false,
        editor: new Ext.form.TextArea({})
      }
    ]);
  
    var char_grid = new Ext.grid.EditorGridPanel({
      id: 'charactergrid',
      store: characterstore,
      cm: cm,
      stripeRows: true,
      enableHdMenu: false
    });  
  
    characterwin = new Ext.Window({
      applyTo: 'characterwindow',
      layout: 'fit',
      width: 500,
      height: 300,
      closeAction: 'hide',
      plain: true,
      buttons: [{
        text     : 'Close',
        handler  : function(){
          characterwin.hide();
        }
      }],
      items: [char_grid]  
    });
  }
  characterwin.show(this);
  characterstore.reload();
};