窗口内的流体形式问题答案

【问题标题】：Issue with a fluid form inside a window窗口内的流体形式问题
【发布时间】：2012-08-06 05:31:34
【问题描述】：

我们必须创建满足以下条件的流畅布局：

Window 中有一个 Form。
如果增加窗口宽度，那么表单宽度及其字段宽度也应该增加。
如果窗口宽度减小，则表单宽度及其字段宽度应该减小，但只能达到一个限制。
如果窗口宽度减小到超出限制，那么窗体上应该会出现一个滚动条。

我们尝试通过将 flex 分配给字段并将 minWidth 分配给 Form，假设 flex 会处理宽度的增加，并且如果窗口宽度进一步减小，则对 form 的 minWidth 会导致滚动。

但不幸的是，这在以下测试用例中不起作用：

<html>
    <head>
        <title>TEST</title>
        <link rel='stylesheet' href='resources/extjs/resources/css/ext-all.css' />
        <script type='text/javascript' src='resources/extjs/ext-all-dev.js'></script>
        <script type='text/javascript'>
            function getForm(){
                var form    =   {
                    xtype:'form',
                    region:'north',
                    height:100,
                    autoScroll:true,
                    minWidth:300,
                    title: 'Simple Form',
                    items: [
                    {
                        xtype:'container',
                        layout:'hbox',
                        items:[
                            {
                                xtype:'textfield',
                                fieldLabel: 'First',
                                name: 'first',
                                allowBlank: false,
                                width:100,
                                labelWidth:50,
                                flex:1
                            },{
                                xtype:'textfield',
                                fieldLabel: 'Last',
                                name: 'last',
                                allowBlank: false,
                                width:100,
                                labelWidth:50,
                                flex:1
                            }
                        ]
                    }]
                };
                return form;
            }
            function getWin(){
                var win =   Ext.create('Ext.window.Window',{
                    title:'Test Window',
                    height:400,
                    width:600,
                    layout:'border',
                    items:[
                        getForm(),
                        {
                            region:'center',
                            title:'Center Region',
                            html:'Center Region Content'
                        }
                    ]
                });
                return win;
            }
            Ext.onReady(function(){
                var win =   getWin();
                win.show();
            });

        </script>
    </head>
    <body>
    </body>
</html>

关于如何实现这一目标的任何建议？或者这里做错了什么？

【问题讨论】：

标签： forms layout extjs extjs4.1 fluid

【解决方案1】：

有一个类似这样的好例子： http://docs.sencha.com/ext-js/4-1/#!/example/form/anchoring.html

这是与您的代码的混合。最小值和最大值在窗口容器中设置。表单上有一个 autoScroll 和 autoWidth 配置，如果窗口小于该部分所需的宽度，则使用 minWidth 进行滚动。

在这里查看： http://jsfiddle.net/Du9Nb/

Ext.require([
    'Ext.form.*',
    'Ext.window.Window'
]);

Ext.onReady(function() {
    var form = Ext.create('Ext.form.Panel', {
        border: false,
        fieldDefaults: {
            labelWidth: 50
        },
        url: 'save-form.php',
                autoScroll: true,
        autoHeight: true,
        bodyPadding: 5,

        items: [
            {xtype:'panel', 
             title:'Simple Form',
             minWidth: 400,
             layout: 'hbox',
             defaultType: 'textfield',
             items:[
            {
              fieldLabel: 'First',
                name: 'first',
                allowBlank: false,
                flex: 1,
                anchor:'100%'  // anchor width by percentage
            },{
                fieldLabel: 'Last',
                name: 'last',
                allowBlank: false,
                flex: 1,
                anchor: '100%'  // anchor width by percentage
            }
          ]
            }, {
                xtype: 'panel',
                title: 'Center Region',
                html: 'Center Region Content'

            }]
    });

    var win = Ext.create('Ext.window.Window', {
        title: 'Test Window - Resize Me',
        width: 600,
        height:400,
        minWidth: 300,
        minHeight: 200,
        layout: 'fit',
        plain: true,
        items: form,

        buttons: [{
            text: 'Send'
        },{
            text: 'Cancel'
        }]
    });

    win.show();
});

【讨论】：

感谢 John 的帖子和示例代码的分享。在您的代码中，我发现您已将面板添加到表单中。并且它的这个面板的 minWidth 起到了作用。现在，一个表单也已经是一个面板，因此，添加这个面板很遗憾引入了一个额外的分支。我曾尝试将 minWidth 添加到我在代码中用来代替面板的容器中，但它没有任何效果。看起来，容器不能像面板那样保持宽度的限制，但它带来了额外分支的价格。有没有其他解决方法？
容器也可以在面板位置工作。您还可以将 minWidth 放在您拥有的包含示例中的两个表单元素的容器上。这是您的 minWidth 移动的 sn-p jsfiddle.net/9bQp7 这会将滚动条仅放在表单部分，而不是包装所有窗口内容。