Troubles with colums layout in gridpanel

[eliotik]

Hello, i have simple grid panel with store and columns

Ext.define('App.client.GridPanel', {
    extend: 'Ext.grid.Panel',
    alias: 'widget.filegrid',
    id:'file-grid',
    region: 'center',
    stateful: false,
    border: true,
    enableColumnMove: false,
    enableColumnResize: false,
    viewConfig: { loadMask: false},
    selType: 'rowmodel',
    minHeight: 350,
    minWidth: 250,

    initComponent: function() {    

      this.store = Ext.create('Ext.data.Store', {
        id:'revs-store',
        autoLoad: false,
        fields:[
          {name: 'Id', mapping: 'id', type: 'int'},
          {name: 'Num', mapping: 'n', type: 'int'},
          {name: 'DateTime', mapping: 'dt', type: 'string'},
          {name: 'User', mapping: 'u', type: 'string'},
          {name: 'Current', mapping: 'ct', type: 'string'},
          {name: 'Size', mapping: 's', type: 'string'}],
        proxy: {
          type: 'ajax',
          url: 'revs.php'          
        }
      });

      this.columns = {
        items: [
        {
          header: 'RevNum',
          dataIndex: 'Num',
          align: 'left',
          width: 150
        },
        {
          header: 'Date',
          dataIndex: 'DateTime',
          align: 'center',
          width: 120
        },
        {
          header: 'User',
          dataIndex: 'User',
          align: 'center',
          width: 100
        },{
          header: 'Size',
          dataIndex: 'Size',
          align: 'left',
          width: 100
        }],
        defaults:
        {
          sortable: false,
          menuDisabled: true,
          readOnly: true,
          editable: false
        }
      }

      this.callParent(arguments);
    }    
});

i create this grid in panel with border layout

Ext.define('App.client.Panel', {
    extend: 'Ext.panel.Panel',
    border:false,
    id:'main-panel',
    margins:'0 5 5 0',
    border: false,
    layout: 'border',

    initComponent:function() {
      this.fileGrid = Ext.create('App.client.GridPanel');
      
      this.items = [this.fileGrid];

      this.callParent(arguments);
    }
});

and as a result i get wrong columns headers layout
wrong column width, and when you click on left border of column header you will see next:
col_bug_1.jpg

and when you click on right border of column you will get next result:
col_bug_2.jpg

what am i do wrong?

Thank you.

[eliotik]

my grid created in hidden panel, and after some actions i show this panel with grid. how to doLayout of grid columns headers? Because i have found that this problem exists if only grid was created in hidden panel.