ExtJs布局：无法显示Ext.form.Panel

Question

您好我试图显示我的过滤器面板，但它确实工作任何人的想法为什么？我试图将我的window.js设置为布局：＆＃39; border＆＃39;但没有成功，我发现了一些@ sencha的例子，但我失败了sencha layouts

我的window.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;
}

我的filter.js

C

Answer 1

使用Border布局的任何Container必须具有带区域的子项：'center'。中心区域中的子项目将始终调整大小以填充布局中其他区域未使用的剩余空间。

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

Answer 2

我无法让Panel显示现有的单页应用程序。我发现使用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();