Панель сетки ExtJs 4.2 неправильно отображает столбцы заголовков

Я новичок в ExtJs и обнаружил, что не могу использовать сетку:

Поскольку заголовок отображается неправильно, я не могу сортировать, изменять размер или даже замечать, когда я нажимаю на элемент сетки.

Код сетки такой:

Ext.define('Simviab.view.empresa.SociosGrid', {
extend: 'Ext.grid.Panel',
alias: 'widget.sociosgrid',


store:  'sociosempresa',            
width: 400,
height: 200,
columns: [
    {text: 'Nome do Socio', dataIndex: 'TE_RAZAO', flex:1},
    {text: 'Cargo/Função', dataIndex: 'TS_CARGO', width: 100},
    {text: '%', dataIndex: 'TS_PERCENTUAL', width: 100},
    {text: 'Participação no Capital Social', dataIndex: 'TS_PARTICIPACAO', width: 150}
]


});

Я визуализирую его в окне, например так:

Ext.define('Simviab.view.empresa.SociosWindow', {
extend: 'Ext.window.Window',

alias: 'widget.socioswindow',

title: 'Adicionar sócios',
modal: true, 
autoShow: true,

iconCls: 'icon-form',

width: 400,
height: 400,    

items:[
    {
        xtype:'label',
        text: 'Adicionar sócios a Empresa: ',
        itemId: 'empresaNome',
    },{
        xtype: 'fieldset',
        title: 'Capital Social',
        items: [
            {
                xtype: 'textfield',
                fieldLabel: 'Nome do Sócio',
                maxLength: 50,
                allowBlank: false
            },
            {
                xtype: 'textfield',
                fieldLabel: 'Cargo/Função',
                maxLength: 50,
                allowBlank: false
            },
            {
                xtype: 'numberfield',
                fieldLabel: 'Percentual de participação',
                maxValue: 100,
                minValue: 1,
                allowBlank: false,
                step: 0.5
            }
        ]

    },{
        xtype: 'sociosgrid'
    }
]

});

Где я ошибаюсь?