2

ブラウザーを最小化または最大化するときに、フォーム パネルを集中化することは可能ですか。

したがって、フォーム パネルは、ロード時、およびブラウザの最小化、最大化、またはサイズ変更中に中央に配置できますか (つまり、フォーム パネルは常に中央に配置されます)。

HTML

<html>
<head>
    <title>Test</title>
    <link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css" />

<script type="text/javascript" src="extjs/ext-all.js"></script>
<script type="text/javascript" src="index2.js"></script>

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

Javascript

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

Ext.onReady(function() {    
    // Helpers

    // Very basic bassword validation. 
    // Note that length validation is managed by ExtJs itself --
    // scroll down to see how in the field properties
    Ext.apply(Ext.form.field.VTypes, {
        password: function(val, field) {
            if (/^[a-z0-9]+$/i.test(val)) {
                return true;
            }
        },
        passwordText: 'Password may only contain letters and numbers.'
    });

    Ext.QuickTips.init();

    function submitOnEnter(field, event) {
        if (event.getKey() == event.ENTER) {
            var form = field.up('form').getForm();
            form.submit();
        }
    }

    // From http://bit.ly/Bvvv8
    function password(length, special) {
        var iteration = 0;
        var password = '';
        var randomNumber;

        if (special == undefined) {
            var special = false;
        }

        while (iteration < length) {
            randomNumber = (Math.floor((Math.random() * 100)) % 94) + 33;
            if (!special) {
                if ((randomNumber >=33) && (randomNumber <=47)) { continue; }
                if ((randomNumber >=58) && (randomNumber <=64)) { continue; }
                if ((randomNumber >=91) && (randomNumber <=96)) { continue; }
                if ((randomNumber >=123) && (randomNumber <=126)) { continue; }
            }
            iteration++;
            password += String.fromCharCode(randomNumber);
        }
        return password;
    }

    // Form
    // -----------------------------------------------------------------------
    var addUserForm = Ext.create('Ext.form.Panel', {
        renderTo: Ext.getBody(),
        bodyStyle: 'margin: 0px auto 0px auto;',
        defaults: {
            xtype: 'textfield',
            anchor: '100%',
         },
        items: [{
            fieldLabel: 'Email',
            name: 'email',
            vtype: 'email',
            maxLength: 64,            
            allowBlank: false,
            listeners: {
                specialkey: submitOnEnter
            }
        },{
            xtype: 'fieldcontainer',
            fieldLabel: 'Password',
            layout: 'hbox',
            items: [{
                xtype: 'textfield',
                name: 'password',
                flex: 1,
                vtype: 'password',
                minLength: 4,
                maxLength: 32,
                allowBlank: false,
                listeners: {
                    specialkey: submitOnEnter
                }
            }, {
                xtype: 'button',
                text: 'Random',
                tooltip: 'Generate a random password',
                style: 'margin-left: 4px;',
                flex: 0,
                handler: function() {
                    this.prev().setValue(password(8, false));
                    this.prev().focus()
                }
            }]
        }],
        buttons: [{
            id: 'saveBtn',
            itemId: 'saveBtn',
            text: 'Submit',
            handler: function() {
                this.up('form').getForm().submit();
            }
        },{
            text: 'Cancel',
            handler: function() {
                this.up('form').getForm().reset();
            }
        }],
        submit: function() {
            var currentForm = this.owner.form;

            if (currentForm.isValid()) {
                // var newSomething = Ext.create('Something', currentForm.getFieldValues());
            }
        },

    });
});
4

1 に答える 1

0

ExtJS はux.center、コンテナー内のコンテンツを中央に配置するためのレイアウトを提供しています。

これに関するドキュメントを見つけることができますこことここに例があります

また、ここに同様の議論があります

于 2013-01-08T09:02:17.043 に答える