0

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

  1. Window中有一个Form。

  2. 如果窗口宽度增加，那么表单宽度及其字段宽度也应该增加。

  3. 如果窗口宽度减小，则表单宽度及其字段宽度应该减小，但只能达到一个限制。

  4. 如果窗口宽度减小到超出限制，那么窗体上应该会出现一个滚动条。

我们尝试通过将 flex 赋予字段并将 minWidth 赋予窗体，假设 flex 将负责宽度的增加，并且如果窗口宽度进一步减小，窗体的 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>

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

4

1 回答 1

0

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

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

在这里看到它：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();
});​
于 2012-07-13T20:35:53.177 回答