Как разместить 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