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

【问题标题】：ExtJs Layout: Can't display Ext.form.PanelExtJs 布局：无法显示 Ext.form.Panel
【发布时间】：2015-12-18 03:31:14
【问题描述】：

您好，我正在尝试显示我的过滤器面板，但它对任何人都不起作用，为什么？我试图将我的 window.js 设置为 layout: 'border' 但没有成功我找到了一些示例@sencha 但我失败了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];
},

我的过滤器.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;
}

【问题讨论】：

你能发送一个虚拟的预期结果截图（通过绘画）到这里。并发布完整的代码。我可以帮你。

标签： javascript extjs layout extjs4 formpanel

【解决方案1】：

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

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

【讨论】：

【解决方案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();

【讨论】：