1. #1
    Sencha User
    Join Date
    Jan 2012
    Posts
    6
    Vote Rating
    1
    maxi_king_333 is on a distinguished road

      1  

    Default Missing Example: Login Form

    Missing Example: Login Form


    Hello,

    browsing the ExtJS 4 examples, I could not find any example that shows how to implement a login form. I really like the example applications but nearly every application would need some sort of login. So how could I create a nice looking Ajax based login form that fits to the rest of my application? And how is the best way to do so?

    I think there should be an example for that...

    Maybe there is one but not in the official examples?

    /* Edit:
    I mean something like the login form of Tine 20: https://demo.tine20.org/
    */

    Greetings
    Maxi

  2. #2
    Sencha Premium Member Zdeno's Avatar
    Join Date
    Nov 2009
    Location
    Prague
    Posts
    358
    Vote Rating
    15
    Zdeno will become famous soon enough

      0  

    Default


    Ehm for what do you need example? Everything is up to your implementation. You can create window with form inside which is rendered in center of the page, you can render rich form in page or so. Check docs for form.Panel

    http://docs.sencha.com/ext-js/4-1/#!/api/Ext.form.Panel

  3. #3
    Sencha User
    Join Date
    Jan 2012
    Posts
    6
    Vote Rating
    1
    maxi_king_333 is on a distinguished road

      0  

    Default


    Yeah, I know...
    But then how to load my application?

    I know how to design the form, but how to do the rest? Should I use a card layout, login form on one card, application on the other? Or should I just open a window and fade that out after successful login? What would be best practice?

    I mean not only an example for the form, that would be useless, I mean a login form + some type of handling on the server + load the application after successful login...

    Greetings

  4. #4
    Sencha Premium Member Zdeno's Avatar
    Join Date
    Nov 2009
    Location
    Prague
    Posts
    358
    Vote Rating
    15
    Zdeno will become famous soon enough

      0  

    Default


    E.g. it depend on server side implementation. You can have two url like / and /login. Index.php script will check if user is logged in (cookie, session or so), if not redirect you to /login where you show viewport with login dialog. When user will be successfully logged in, you can redirect him back to / in success function of Ext.Ajax or so. It could be single page two with if condition inside. So 1 "page" for login and 2nd for your app. This is very simple example.

  5. #5
    Sencha User
    Join Date
    Jan 2012
    Posts
    6
    Vote Rating
    1
    maxi_king_333 is on a distinguished road

      0  

    Default


    OK, that way would be simple, but what is without redirection. But if no one except me would like such an example, then, never mind .

  6. #6
    Sencha Premium Member Zdeno's Avatar
    Join Date
    Nov 2009
    Location
    Prague
    Posts
    358
    Vote Rating
    15
    Zdeno will become famous soon enough

      0  

    Default


    It occurs to me...you can do it without redirection (from / to /) but experienced user can show your application (if it is hidden when login dialog is displayed) with firebug. Of course you can create your app ondemand but.. everybody will see all javascripts. When you separate it, unauthorized user will see source code for login dialog only.

  7. #7
    Sencha Premium Member Zdeno's Avatar
    Join Date
    Nov 2009
    Location
    Prague
    Posts
    358
    Vote Rating
    15
    Zdeno will become famous soon enough

      0  

    Default


    Well.. there isnt example for Ext 4 but with little experience you can rewrite basic login tutorial from following URL:

    http://www.sencha.com/learn/a-basic-login/

  8. #8
    Sencha User
    Join Date
    Jan 2012
    Posts
    6
    Vote Rating
    1
    maxi_king_333 is on a distinguished road

      0  

    Default


    Quote Originally Posted by Zdeno View Post
    When you separate it, unauthorized user will see source code for login dialog only.
    That's a point, but I think I would not care about someone seeing the javascript, just some useless plain widgets without any data.

    Quote Originally Posted by Zdeno View Post
    Well.. there isnt example for Ext 4 but with little experience you can rewrite basic login tutorial from following URL
    Thank you for this tutorial, I will read it - but why there is nothing similar for ExtJS 4, with MVC Pattern?

    Greetings
    Maxi

  9. #9
    Sencha Premium Member
    Join Date
    Nov 2011
    Location
    Brisbane, Australia
    Posts
    6
    Vote Rating
    3
    wozsoft is on a distinguished road

      0  

    Default Here is a generic login script for ExtJS4

    Here is a generic login script for ExtJS4


    I use something like this in my applications.

    It includes validation on both the client side and the server side.

    on your login.html page include a <div> named 'login'

    You need a login.html and a login.php at the front and the back to make it work.

    Code:
    Ext.require([
        'Ext.form.Panel',
        'Ext.layout.container.Anchor'
        ]);
    
    
    Ext.onReady(function() {
        Ext.create('Ext.form.Panel', {
            renderTo: 'login',
            standardSubmit: false, //  <<<< IMPORTANT if set to true you get the page (eg. PHP) you send to <<<< good idea for testing
            title: 'Please enter your credentials',
            bodyStyle: 'padding:5px 5px 0',
            width: 300,
            margin: '10 0 0 100',
            fieldDefaults: {
                labelAlign: 'left',
                msgTarget: 'side'
            },
            defaults: {
                border: false,
                xtype: 'panel',
                flex: 1,
                layout: 'anchor'
            },
            tools: [
            {
                xtype: 'tool',
                type: 'help'
            }
            ],
            layout: 'anchor',
            items: [{
                xtype:'textfield',
                name: 'UID',
                id: 'UID',
                fieldLabel: 'User Name',
                anchor: '100%'
            }, {
                xtype:'textfield',
                name: 'PWD',
                id: 'PWD',
                fieldLabel: 'Password',
                inputType: 'password',
                anchor: '100%'
            }],
            buttons: ['->', {
                text: 'Login',
                handler: function() {
                    var frmLogin = this.up('form').getForm();
                    if (frmLogin.isValid()) {
                        frmLogin.submit({
                            url: 'login.php', // <<<<<< let me know if you need help with the server side of the login function
                            waitMsg: 'Submitting your credentials',
                            success: function(form, action) { // <<<<<<<< you need to handle success and failure on the server side
                                // opens the menu page returned by the server, php validation of security sets menu for the user
                                oCurrentUser = {name: action.result.username, email: action.result.usermail, sms: action.result.usersms};
                                alert('Is this you ?\n\n'+oCurrentUser.name+'\n'+oCurrentUser.email+'\n'+oCurrentUser.sms);
                                location.href = action.result.redirect;
                            },
                            failure: function(form, action) {
                                Ext.Msg.alert('Failure', action.result.errormsg);
                                if (action.failureType === Ext.form.action.Action.CONNECT_FAILURE) {
                                    Ext.Msg.alert('Error',
                                        'Status:'+action.response.status+': '+
                                        action.response.statusText);
                                }
                                if (action.failureType === Ext.form.action.Action.SERVER_INVALID){
                                    // server responded with success = false
                                    Ext.Msg.alert('Invalid', action.result.errormsg);
                                }
                            }
                        })
                    }
                }
            }, {
                text: 'Close',
                handler: function() {
                    close();
                }
            }]
        });
    });

  10. #10
    Sencha User
    Join Date
    Jan 2012
    Posts
    6
    Vote Rating
    1
    maxi_king_333 is on a distinguished road

      0  

    Default


    Thank you, for this example.
    But it's also using a redirection...

    I think I would try to implement something without redirection onto of it.

Thread Participants: 3

Tags for this Thread

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar