GridPanelとPanelを同じレベルに配置する方法は？

Question

パネルとグリッドパネルを同じレベルに配置したいと思います。

.------------------------------------------------. 
:     Ext.Panel     : 
: .--------------------. .--------------------. : 
: :     : :     : : 
: :  Ext.Panel  : : Ext.grid.GridPanel : : 
: :     : :     : : 
: .--------------------. .--------------------. : 
.------------------------------------------------. 

layout: 'border'を使用するとグリッドパネルが折りたたまれます。 layout: 'auto'パネルを使用したとき、パネルは異なるレベルに配置されました。

var filter_panel = new Ext.Panel({ 
    id: 'filter_panel', 
    title: 'Filter', 
    region: 'west' 
}); 

var result_panel = new Ext.grid.GridPanel({ 
    id: 'result_panel', 
    title: 'Result', 
    region: 'center', 
    colModel: columns 
}); 

var main_panel = new Ext.Panel({ 
    id: 'main_panel', 
    layout: 'border', 
    items : [filter_panel, result_panel], 
    renderTo: render_extjs 
}); 

=======のUPD =======

これだけが解決される問題:(ここで

#main_panel .x-box-inner { 
    display: flex; 
} 

#result_panel { 
    flex: 1; 
    position: static; 
    margin: 5px; 
} 

#result_panel .x-panel-header-text:after { 
    content: "Result"; 
} 

#filter_panel { 
    flex: 1; 
    position: static; 
    margin: 5px; 
} 

Answer 1

var filter_panel = new Ext.Panel({ 
     title: 'Filter', 
       flex:1 
    }); 

    var result_panel = new Ext.grid.GridPanel({ 
     title: 'Result', 
     colModel: columns, 
       flex:1 
    }); 

    var main_panel = new Ext.Panel({ 
     layout: { 
      type:'hbox' 
     }, 
     items : [filter_panel, result_panel] 
    }) 

はフィドルにありますあなたはそれがどのように動作するかを示しますhttps://fiddle.sencha.com/#fiddle/1jbl