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

如何将GridPanel和Panel放在同一级别？

1 个答案: