ExtJs布局：無法顯示Ext.form.Panel

Question

您好，我試圖顯示我的“篩選器面板”，但是有人知道為什么它起作用了嗎？ 即時通訊試圖將我的window.js設置為布局：“邊框”，但未成功，我發現了一些示例@ sencha，但即時通訊sencha布局失敗

我的window.js

Ext.define('Shopware.apps.UnSqlReader.view.window.Window', {
extend: 'Enlight.app.Window',
alias: 'widget.main-window-view',
height: '90%',
width: '90%',
layout: 'fit',
title: '{s name=window_title}SQL Reader{/s}',
minimizable: true,
maximizable: true,
menuDisabled: true,
enableCtxMenu: false,
initComponent: function() {
    var me = this;
    me.items = me.getItems();
    me.callParent(arguments);
},
getItems: function() {
    var me = this;
    me.filterGrid = Ext.create('Ext.grid.Panel', {
        height: '90%',
        width: '90%',
        autoScroll: true,
        hidden: true,
        cls: 'enable-scroll-bar',
        layout: 'border',
        split: true,
        overflowX: 'scroll',
        overflowY: 'scroll',
        items: [
        Ext.create('Shopware.apps.UnSqlReader.view.filter.Filter', {
            region: 'west'
        })],
        columns: [],
    });
    return [me.filterGrid, me.grid];
},

我的filter.js

Ext.define('Shopware.apps.UnSqlReader.view.filter.Filter', {
extend: 'Ext.form.Panel',
title: 'Filter',
collapsible: true,
width: 300,
layout: 'anchor',
region: 'west',
initComponent: function() {
    var me = this;
    console.log('Filter Loaded');
    me.items = [
    me.createFilterButton(),
    me.createResetButton()],
    me.callParent();
},
createFilterButton: function() {
    var me = this;
    me.filterButton = Ext.create('Ext.button.Button', {
        cls: 'secondary small',
        width: 130,
        iconCls: 'sprite-funnel',
        text: 'Set Filter',
        handler: function() {

        }
    });
    return me.filterButton;
},
createResetButton: function() {
    var me = this;
    me.resetButton = Ext.create('Ext.button.Button', {
        cls: 'secondary small',
        width: 130,
        iconCls: 'sprite-funnel--minus',
        text: 'Reset Filter',
        handler: function() {}
    });
    return me.resetButton;
}

Answer 1

任何使用“邊框”布局的“容器”都必須有一個子項，其區域為“ center”。 中心區域中的子項將始終調整大小以填充布局中其他區域未使用的剩余空間。

http://docs.sencha.com/extjs/4.1.1/#!/api/Ext.layout.container.Border

Answer 2

我無法讓面板顯示在我現有的單頁應用程序上。 我發現使用Ext.window.Window作為彈出對話框的容器確實是我想要的。 它顯示得很好：

Ext.create('Ext.window.Window', {
    title: 'Hello',
    height: 200,
    width: 400,
    layout: 'fit',
    items: {  // Let's put an empty grid in just to illustrate fit layout
        xtype: 'grid',
        border: false,
        columns: [{header: 'World'}],                 // One header just for show. There's no data,
        store: Ext.create('Ext.data.ArrayStore', {}) // A dummy empty data store
    }
}).show();