Question

我有一个选项卡面板，我添加了一个网格面板。现在，当我重新调整我的浏览器窗口大小时（如使它变小），我希望缩小网格列和所有其他组件并调整大小，以便在任何窗口大小中显示视图。我怎样才能做到这一点？

我正在使用sencha-architect2

Ext.define('App.view.ExView', {
    extend: 'Ext.tab.Panel',

    autoRender: true,
    autoShow: true,
    frame: true,
    height: 600,
    id: 'mainpanel',
    width: 1360,
    maintainFlex: false,
    suspendLayout: false,
    hideCollapseTool: false,
    title: 'Example Project',
    titleCollapse: false,
    activeTab: 0,
    plain: true,
    fullscreen: 'true',

GRID

items: [
                        {
                            xtype: 'gridpanel',
                            autoShow: true,
                            height: 100,
                            minHeight: 40,
                            minWidth: 50,
                            autoScroll: true,
                            title: 'Grid',
                            store: 'storegrid',
                            layout: {
                                type: 'fit'
                            },
                            viewConfig: {

                            },
                            columns: [
                                {
                                    xtype: 'gridcolumn',
                                    maintainFlex: false,
                                    dataIndex: 'name',
                                    flex: 1,
                                    text: 'name'
                                },
                                {
                                    xtype: 'gridcolumn',
                                    maintainFlex: false,
                                    dataIndex: 'age',
                                    flex: 1,
                                    text: 'age'
                                }
                            ]
                        }
                    ]
                }
            ]
        });

Answer 1

将锚布局用于容器

这是一种布局，可以相对于容器的尺寸锚定包含的元素。如果调整容器大小，则会根据锚定规则自动重新呈现所有锚定项目。

http://docs.sencha.com/ext-js/4-1/#!/api/Ext.layout.container.Anchor

如何缩小表单组件以适应浏览器窗口

1 个答案: