Question

只是想知道，在最小化或最大化浏览器时是否可以集中表单面板。

因此，在加载时以及在浏览器的任何最小化或最大化或重新调整大小期间，表单面板是否可以居中（即表单面板将始终保持居中）？

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

    });
});

Answer 1

ExtJS提供了ux.center布局，用于集中容器中的内容。

您可以找到有关此Here的文档，此处为Example

另外，这里是similar discussion

最小化和最大化浏览器时集中的EXTJS表单面板？

1 个答案: