Криво создаётся grid

Ext.define('Locality.grid', {
    extend: 'Ext.grid.Panel',
 
    
    requires: [
        'Ext.selection.CellModel',
        'Ext.grid.*',
        'Ext.data.*',
        'Ext.util.*',
        'Ext.form.*'
    ],
    xtype: 'cell-editing',
    
    
    title: 'Местоположения',
    frame: true,
    cityId: '',
    isExist: '',
    
    initComponent: function() {
        this.cellEditing = new Ext.grid.plugin.CellEditing({
            clicksToEdit: 1
        });
 
        Ext.define('localityModel', {
            //  idProperty: 'id',
                extend : 'Ext.data.Model',
                id : 'locality_model_id',
                fields : [ {
                    name : 'localityName',
                    type : 'string',
                  //  id: 'id'
                },     
                ],
            });
           
        Ext.apply(this, {
            width: 400,
            height: 200,
            viewConfig: {
                forcefit: true
           },
            plugins: [this.cellEditing],
 
          //  store: localityStore,
            store: new Ext.data.Store({
                // destroy the store if the grid is destroyed
             //   autoDestroy: true,
                model: localityModel,
                //autoSync: true,
                proxy: {
                    type: 'ajax',
                    // load remote data using HTTP
                    url: 'loadAllLocalities',
 
                    reader: {
                        type: 'json',
                        encode : true,
                    },
                    writer: {
                        type: 'json',
                        writeAllFields : true
                    }
                },
                sorters: [{
                    property: 'localityName',
                    direction:'ASC'
                }]
            }),
            columns: [{
                header: 'Имя',
                dataIndex: 'localityName',
                width: 270,
//                flex: 1,
                editor: {
                    allowBlank: false
                }
            }, {
                xtype: 'actioncolumn',
                width: 50,
                sortable: false,
                menuDisabled: true,
                items: [{
                    icon: 'rc/images/delete.png',
                    tooltip: 'Удалить местоположение',
                    scope: this,
                    handler: this.onRemoveClick
                }]
            }],
            selModel: {
                selType: 'cellmodel'
            },
            bbar: [{
                text: 'Добавить местоположение',
                scope: this,
                handler: this.onAddClick
            }]
        });
        
        this.callParent();
        
        this.on('afterlayout', this.loadStore, this, {
            delay: 1,
            single: true
        })
    },
    
    loadStore: function() {
        this.getStore().load({params:{isExist : this.isExist, cityId : this.cityId}});
    },
    
    onAddClick: function(){
        // Create a model instance
        var rec = new localityModel({
           localityName:''
        });
        
        this.getStore().insert(0, rec);
        this.cellEditing.startEditByPosition({
            row: 0, 
            column: 0
        });
    },
    
    onRemoveClick: function(grid, rowIndex){
        this.getStore().removeAt(rowIndex);
    }
})

var localityGrid = new Locality.grid({isExist : true, cityId : cityId});