extjs display confirmation form upon login

Question

I am trying to modify someone else's extjs code and I really need some help.

Basically when a username/password is validated the dashboard.js is called which is included in index.php. Now what I need to do is after the username/password is validated I need another form to popup asking for confirmation number. This does not need to be validated(just check for empty string), just entered in the form and I need to save it in a session.

 //index.php
    <script>
            Ext.onReady( function() {

                Web.ip = '<?php print $_SERVER["REMOTE_ADDR"]; ?>';

                var sessionInfo = Web.getCookieInfo();
                if( sessionInfo ) {
                    Web.Dashboard.init();
                    Web.user = sessionInfo;

                    Web.Dashboard.loadDefault();
                } else {
                    Web.Login.init();
                    Web.Dashboard.init();
                }
            });
        </script>

//dashboard.js
Web.Dashboard = function() {

    var contentPanel = new Ext.Panel({
        region: 'center',
        layout: 'fit',
        margins: '0 5 5 0',
        border: true,
        html: ''
    });

    return {

        init: function() {
        ........
        }
    }
}();

Here is my success function called inside onsubmit function:

success: function( result, request ) {

    try {
        var obj = Ext.decode( result.responseText );
        if( obj.success ) {
            var permissions = obj.USER[0].VALUES;
            var p = {};
            for( var i=0 ; i<permissions.length ; i++ ) {
                p[permissions[i].PERMISSION] = true;
            }


            Web.Dashboard.loadDefault();
        } else {
        //alert ('got here');
            if (obj.ErrorCode == 20410 ) {
                th.changePasswordWindow.show();
                return;
            }
            th.loginPanel.form.reset();
            th.loginWindow.displayInfo( 'Invalid username/password' );
        }
    } catch( ex ) {
        th.loginWindow.el.unmask();
        th.loginPanel.focusUsername();
        th.loginPanel.form.reset();
        th.loginWindow.displayInfo( 'Error: ' + ex );

}

},

Answer 1

Ok, edit with a simple ActionSheet, containing another form, it will be a separate form with a single input field - change textfield.name and formpanel.url so that it matches your serverside.

Once you in your success after a login, create the sheet (or another modal panel popup). Render and show, then send another request to server with formpanel.getForm().submit() and you should be good to go.

This sample ActionSheet which has a button handler, adapt that function to your needs (redirecting after success etc)

function loginDone() {
...
 if(success) {
 var pincodeSheet = Ext.create("Ext.ActionSheet", {
    items: [{
        xtype: 'toolbar',
        cls: 'actionSheetToolbar',
        itemId: 'id_title',
        docked: 'top',
        title: ''
    }, {
        xtype: 'spacer',
        height: 10
    }, {
        xtype: 'formpanel',
        padding: 10,
        url: 'set_session_variable_serverside.asp', // adapt this
        items: [{
            title: 'Please enter PIN',
            cls: 'loginTbarTop',
            xtype: 'toolbar',
            docked: 'top'
        }, {
            xtype: 'toolbar',
            docked: 'bottom',
            cls: 'loginTbarBottom',
            items: [{
                xtype: 'spacer'
            }, {
                xtype: 'button',
                text: 'OK',
                ui: 'action',
                handler: function(btn,evt) {
                    // perform any validation here
                    pincodeSheet.down('formpanel').getForm().submit();
                }
            }]
        }, {   /* end docked */
            cls: 'loginFormFieldset',
            xtype: 'fieldset',
            defaults: {
                labelAlign: 'left',
                labelWidth: '35%',
                clearIcon: false
            },
            /* form field declarations */
            items: [{
                tabIndex: 1,
                xtype: 'textfield',
                name: 'session_variable', /// name of input field
                label: 'PIN CODE'
            }] /* end form fields */
        }] /* end form panel items */
    }] /* end sheet items */
 });
 pincodeSheet.render(document.body);


 }

...
}