Problem with ExtJs editor grid panel

I've an extjs editor grid panel(3.3.1) that is binded to a store. New records are added to the grid by an empty row at the top. On the load of the store I'm adding an empty row at the top of the grids. When the user adds a new value and the focus loses out I'm adding another empty row.

AV.ClassifiedCategories = Ext.extend(Ext.grid.EditorGridP开发者_运维问答anel, {
   ....

initComponent: function(){  

    this.store = this.initialConfig.store;

            //add an empty row at top
    this.store.on('load', this.addCategory, this);

            Ext.apply(this, 
    {
        clicksToEdit: 1,            
        listeners:
        {
        afteredit : function(e){
                 this.addCategory();                        
        },
        scope: this
        }
    });
    },

    //adds an empty row and insert a record to store
    addCategory: function(){
    var Category = this.getStore().recordType;
    var cat = new Category({ cat_id: null, cat_name: "" });     

    this.stopEditing();     
    this.store.insert(0, cat);  
    this.startEditing(0, 0);

    return cat;
},

    ...
});

The problem is facing here is once the afteredit event is fired and an empty row is added the focus is not moving to the first row i.e. the second row is still in edit mode. How I can solve that?

I've taken your code and have created this demo. As you can see everything works as expected. Are you sure you have provided us with non-working code?