1. #1
    Sencha User
    Join Date
    Jan 2013
    Posts
    3
    Vote Rating
    0
    ngjiajun is on a distinguished road

      0  

    Default Answered: centralized EXTJS form panel when minimize and maximize browser?

    Answered: centralized EXTJS form panel when minimize and maximize browser?


    Just wonder issit possible to centralized form panel when minimize and maximize browser.


    therefore, i wonder could the form panel be center when load and during any minimize or maximize or re-sizing of the browser, the form panel will still be center alway.


    my html code are as follow

    HTML Code:
    <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>
    my java scripts are as follow

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

  2. Since you aren't taking advantage of an Ext.container.Viewport and ExtJs's native layout management, it would probably be simplest to add your login form to an Ext.window.Window and enable auto-centering:

    Remove this from your FormPanel config:

    Code:
    renderTo: Ext.getBody()
    Then do this:

    Code:
        Ext.create('Ext.window.Window', {
            bodyPadding: 5,
            closable: false,
            resizable: false,
            title: 'Login',
            width: 325,
            listeners: {
              afterrender: function(component, eOpts) {
                Ext.EventManager.onWindowResize(component.center, component) 
              },
              beforeclose: function(component, eOpts) { 
                Ext.EventManager.removeResizeListener(component.center, component); 
              }
            },
            items: [addUserForm]
          }).show();

  3. #2
    Sencha - Community Support Team friend's Avatar
    Join Date
    Apr 2011
    Posts
    895
    Answers
    106
    Vote Rating
    27
    friend has a spectacular aura about friend has a spectacular aura about

      0  

    Default


    Since you aren't taking advantage of an Ext.container.Viewport and ExtJs's native layout management, it would probably be simplest to add your login form to an Ext.window.Window and enable auto-centering:

    Remove this from your FormPanel config:

    Code:
    renderTo: Ext.getBody()
    Then do this:

    Code:
        Ext.create('Ext.window.Window', {
            bodyPadding: 5,
            closable: false,
            resizable: false,
            title: 'Login',
            width: 325,
            listeners: {
              afterrender: function(component, eOpts) {
                Ext.EventManager.onWindowResize(component.center, component) 
              },
              beforeclose: function(component, eOpts) { 
                Ext.EventManager.removeResizeListener(component.center, component); 
              }
            },
            items: [addUserForm]
          }).show();

  4. #3
    Sencha User
    Join Date
    Jan 2013
    Posts
    3
    Vote Rating
    0
    ngjiajun is on a distinguished road

      0  

    Default


    thanks alot, it finally work

Thread Participants: 1

Tags for this Thread

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi