extjs 在登录时显示确认表单

Posted 2023-02-26

【中文标题】extjs 在登录时显示确认表单

【英文标题】：extjs display confirmation form upon login

【发布时间】：2012-07-17 15:51:26

【问题描述】：

我正在尝试修改别人的 extjs 代码，我真的需要一些帮助。

基本上，当验证用户名/密码时，会调用包含在 index.php 中的dashboard.js。 现在我需要做的是在验证用户名/密码后，我需要另一个表单来弹出询问确认号码。 这不需要验证（只需检查空字符串），只需在表单中输入，我需要将其保存在会话中。

 //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() 
        ........
        
    
();

这是我在 onsubmit 函数中调用的成功函数：

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 );

,

【参考方案1】：

好的，使用包含另一个表单的简单 ActionSheet 进行编辑，这将是一个带有单个输入字段的单独表单 - 更改 textfield.name 和 formpanel.url 使其与您的服务器端匹配。

登录成功后，创建工作表（或另一个模式面板弹出窗口）。渲染并显示，然后使用formpanel.getForm().submit() 向服务器发送另一个请求，您应该一切顺利。

这个具有按钮处理程序的示例 ActionSheet，根据您的需要调整该功能（成功后重定向等）

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);


 

...

【讨论】：

感谢 mschr，我不知道如何将它包含在我的成功函数中。看我的编辑..