如何將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