I am new to ExtJs and I found myself unable to use a grid:

As the header doesn't render correctly I am unable do sort, resize or even notice when I click on a grid item.
The grid code is this:
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}
]
});
I am rendering it onto a window, like this:
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'
}
]
});
Where I am going wrong?