ExtJs Layout: Не удается отобразить Ext.form.Panel

Question

Привет, я пытаюсь отобразить панель фильтров, но это никому не нужно, почему? им судимых установить мой window.js в макет: «граница», но без успеха я нашел некоторые примеры @ сенч, но им не удалось sencha layouts

Моего 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

Я возникли проблемы при получении панели, чтобы показать над моей существующей одной странице приложения. Я обнаружил, что использование 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

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

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