problem with Row Grid Editing

Hi team,

I am having problems with Grid Row editing.

I want to create a simple application that provides CRUD operations.

I created my application based on the example provided on sencha website.

This is how my code looks.

Grid:

Code:

Ext.define('Report.view.comment.CommentGrid', {
    extend: 'Ext.grid.Panel',
    requires: 'Report.store.Comments',
    itemId: 'commentGrid',
    alias: 'widget.commenteditorgrid',
    plugins: [rowEditing],
    bodyStyle: 'border:0',
    store: 'Comments',
    initComponent: function () {
        this.columns = [         
             {
               xtype: 'gridcolumn',
               dataIndex: 'id',
               hidden: true,                                  
               width: 1
            },
            {
                xtype: 'gridcolumn',
                dataIndex: 'account',                
                header: 'Account',    
                field: {
                    xtype: 'textfield'
           },
.....     dockedItems: [{        xtype: 'toolbar',
        items: [{
            text: 'Add New Accounts',
            iconCls: 'icon-add',
            handler: function(){
                // empty record
                var grid = Ext.ComponentQuery.query('#commentGrid')[0];
                var comment = new Comment();
                comment.phantom = true;
                grid.getStore().insert(0, comment);
                rowEditing.startEdit(0, 0);
            }

store:

Code:

 model: 'Report.model.Comment',
      autoLoad: true,
      autoSync: true,
      proxy: {
          type:'rest',
          api: {  
                read:'../rest/comment/readComments',
                create: '../rest/comment/addComment',
                update: '../rest/comment/updateComment',
                destroy: '../rest/comment/deleteComment'
          }, 
          headers: { 'Content-Type': 'application/json'},
          actionMethods: {
              create : 'POST',
              read   : 'GET',
              update : 'PUT',
              destroy: 'DELETE'
          },

I am able to display the items through read api. But when I click on add new record, it fires the create event.

Ideally, I want to fire the create event only when I hit the 'update' button (This button come provided with extjs4).

How would I keep it from getting called and call only when I hit the update button after entering data on the screen.

Your help will be highly appreciated.

Thanks,

Rajesh