0

次の条件を満たす流動的なレイアウトを作成する必要があります。

  1. ウィンドウ内にフォームがあります。

  2. ウィンドウ幅を大きくすると、フォーム幅とそのフィールド幅も大きくなります。

  3. ウィンドウ幅を小さくすると、フォーム幅とそのフィールド幅を小さくする必要がありますが、制限までしかありません。

  4. ウィンドウ幅が制限を超えて縮小された場合、フォームにスクロールバーが表示されます。

これを試すには、フィールドにフレックスを、フォームにminWidthを指定します。これは、フレックスが幅の増加を処理し、ウィンドウ幅がさらに縮小されると、フォームの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 に答える