Макет ExtJs: невозможно отобразить Ext.form.Panel

Question

Здравствуйте, я пытаюсь отобразить панель фильтров, но она не работает, кто-нибудь, почему? я пытался установить мой window.js в макет: 'border', но безуспешно я нашел несколько примеров @ 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];
},

Мой фильтр.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

У меня были проблемы с отображением 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();

Answer 2

Любой Контейнер, использующий макет Границы, должен иметь дочерний элемент с регионом: "центр". Размер дочернего элемента в центральной области всегда будет изменен, чтобы заполнить оставшееся пространство, не используемое другими областями в макете.

http://docs.sencha.com/extjs/4.1.1/