Preventing to create an empty row in grid when clicked outside of a grid row extjs

Question

I am not much experienced in Extjs. I have a grid. It has one column [IP Address]. There are two tabbed buttons provided 'Add' and 'Remove'. On click of 'Add', adds an IP to grid and 'remove' removes the ip from grid.

I have provided IP address validation to it.

• When I enter an invalid/duplicate IP Address and click outside the grid row.. I get an empty row created.

Actually I am using 'CellEditing' plugin.

Can anyone please suggest me how to get rid of that empty row getting created !!! and is there any way after entering invalid input, if we click outside grid also then the cursor should still be in editor mode on that same row and don't create the empty row.

var grid_example = Ext.create('Ext.grid.Panel', {
        selType: 'rowmodel',
        gridType: 'propsGrid',
        stateful: true,
        frame: cfg.frame,
        stateEvents: [ 'columnschanged' ],
        stateId: 'propgridis',
        dockedItems: [
            {
                xtype: 'toolbar',
                dock: 'top',
                items: buttons
            }
        ],
        store: properties_store_example,
        columns: [
            {
                stateId: 'propgridname',
                text: 'IP',
                width: 200,
                dataIndex: 'name',
                editor: {
                    xtype: 'textfield',
                    allowBlank: false,
                    validator: function(value) {
                         var ipVal = Ext.create("Ext.data.validator.IPAddress");
                         var isFound = properties_store_example.findRecord('name',value);
                         if (ipVal.validate(value) === true) {
                               if (isFound){
                                 me.saveButton.setDisabled(true);
                                 return 'IP already exists';
                               }
                               me.saveButton.setDisabled(false);
                               return true;
                          } else {
                               me.saveButton.setDisabled(true);
                               return 'Invalid IP';
                          }
                }
              },
                renderTo: Ext.getBody()
            }
        ],
        plugins: [
            Ext.create('Ext.grid.plugin.CellEditing', {
                clicksToEdit: 2
            })
        ]
    });

Below is my 'cancelEdit' action.

grid_example.on('canceledit', function(editor, value, startValue, opts){
        if(value.record.phantom || !value.record.isValid())
            value.record.destroy();

        if((value.field === 'name') && (value.value === ''))
            myStore.remove(value.record);
    });