Question

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

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

我们尝试通过向字段赋予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>

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

Answer 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();
});

在窗口内发出流体形式的问题

1 个答案: