Rownumberer is growinp up together with columns

Question

I'm developing a application using Ext Js and I have a problem, in one of my views the user is able to add new columns dinamically, and in grid the first Ext component is a rownumberer, which enumerate my rows as the user are added it. However as the rows are being added, the fisrt column which is 'rownumberer' is growing up together, as shown below. Can anyone provide me a insight? Thanks!

The code:

var store = Ext.getStore('store');
var rowEditing = Ext.create('Ext.grid.plugin.RowEditing');
var contador = 0;
Ext.define('Grid', {
extend : 'Ext.grid.Panel',
title: 'Grid',
store: 'StoreTemp',
columns: [ 
    {
     xtype: 'rownumberer'
 },{    
     header : "Data Type",
     dataIndex : 'nome',
     flex : 0.8,
     editor:'textfield'
 }],            
dockedItems : [ {
xtype : 'toolbar',
items : [ {
    xtype: 'button',
    tooltip: 'Click here to set data type on axis Y',
    id : 'buttonTipoDado',
    icon : Webapp.icon('edit.png'),
    iconAlign : 'top',
    handler : function() {
        var gridView = Ext.ComponentQuery.query('gridpanel')[1];
        Ext.Msg.prompt('Alert', 'Insert data type: ', function(
                btn, text) {
            if (btn == 'ok') {
                gridView.getView().getHeaderAtIndex(1).setText(text);
                var botao = Ext.getCmp('buttonTipoDado');
                botao.setDisabled(true);
            } else {
                Ext.Msg.alert('Alert', 'Insert type!');
            }
            gridView.getView().refresh();
        });
    }
}, {
    xtype: 'button'
    icon : Webapp.icon('add1.png'),
    iconAlign : 'top',
    handler : function() {
        var gridView = Ext.ComponentQuery.query('gridpanel')[1];
        grid = gridView.headerCt;
        if(grid.getGridColumns().length >= 1){
            var column = Ext.create('Ext.grid.column.Column', {text : contador, editor: {xtype: 'textfield', flex: 0.5}});
            gridView.headerCt.insert(gridView.columns.length, column);
            var botao = Ext.getCmp('buttonRemoverColuna');
            botao.setDisabled(false);
        }
        contador++;
    }
}, {
    xtype: 'button',
    icon : Webapp.icon('cancel.png'),
    iconAlign : 'top',
    id : 'buttonRemoverColuna',
    handler : function() {
        var gridView = Ext.ComponentQuery.query('gridpanel')[1];
        gridView = gridView.headerCt;
        var botao = Ext.getCmp('buttonRemoverColuna');
        if(gridView.getGridColumns().length == 2){
            botao.setDisabled(true);    
            contador = 0;
        }
        else{
            gridView = gridView.remove(gridView.getGridColumns().length - 1);               
        }
    }
}, {
    xtype: 'button',
    icon : Webapp.icon('add1.png'),
    iconAlign : 'top',
    handler: function(){
        var gridView = Ext.ComponentQuery.query('gridpanel')[1];
        grid = gridView.getView();
        grid.insert(0, new Ext.create('Model'));
        rowEditing.startEdit(0, 0); 
        gridView.getView().refresh();
    }   
}, {
    xtype: 'button'
    icon : Webapp.icon('cancel.png'),
    iconAlign : 'top',
    handler: function(){
        store.removeAt(0);
    }   
}]
} ],
plugins : [ rowEditing ]

});

Answer 1

The problem is with your Data Type column flex config. You should change that to flex: 1 instead.

The rownumberer column has a default width: 23 config so you do not need to specify an exact width on that.