Question

我添加了Panel（我称之为My Panel 1），以及此panel中的另一个panel（我称之为My Panel 2），然后在第二个面板中添加了一个网格（到My Panel 2）。当我单击浏览器的Restore Down或re-sizing按钮时，它不会缩小组件以适合屏幕大小。我该如何解决这个问题？

Ext.define('MyApp.view.MyPanel', {
    extend: 'Ext.panel.Panel',

    height: 469,
    width: 729,
    title: 'My Panel 1',

    initComponent: function () {
        var me = this;

        Ext.applyIf(me, {
            items: [{
                xtype: 'panel',
                height: 238,
                title: 'My Panel 2',
                items: [{
                    xtype: 'gridpanel',
                    height: 179,
                    title: 'My Grid Panel 1',
                    columns: [{
                        xtype: 'gridcolumn',
                        dataIndex: 'string',
                        text: 'String'
                    }, {
                        xtype: 'numbercolumn',
                        dataIndex: 'number',
                        text: 'Number'
                    }, {
                        xtype: 'datecolumn',
                        dataIndex: 'date',
                        text: 'Date'
                    }, {
                        xtype: 'booleancolumn',
                        dataIndex: 'bool',
                        text: 'Boolean'
                    }],
                    viewConfig: {

                    }
                }]
            }]
        });

        me.callParent(arguments);
    }

});

Answer 1

我建议使用视口 - 它会自动调整到浏览器的“视口”:) 如果您希望自动管理它们，也不要设置固定的宽度和高度。以下是一个示例：http://jsfiddle.net/dbrin/gWaCv/embedded/result/

重新调整面板组件的大小以适应屏幕尺寸

1 个答案: