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



只是想知道,当最小化或最大化浏览器时,是否可以集中窗体面板。

因此,表单面板可以在加载时居中,在任何最小化或最大化或重新调整浏览器大小(即表单面板将始终保持居中)?

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

ExtJS提供了ux.center布局,用于在容器内居中。

你可以在这里找到关于这个的文档,这里是Example

同样,这里也有类似的讨论

相关内容

  • 没有找到相关文章

最新更新