`
anson_xu
  • 浏览: 511938 次
  • 性别: Icon_minigender_1
  • 来自: 惠州
社区版块
存档分类

firebug调试Ext登录框

    博客分类:
  • Ext
阅读更多
今天照着例子用firebug调试了一个ext的登录(firebug调试需Ext包的支持)
1.js
Ext.onReady(function(){
    Ext.QuickTips.init();

// Create a variable to hold our EXT Form Panel.
// Assign various config options as seen.
    var login = new Ext.FormPanel({
        labelWidth:80,
        url:'login.asp',
        frame:true,
        title:'Please Login',
        defaultType:'textfield',
monitorValid:true,
// Specific attributes for the text fields for username / password.
// The "name" attribute defines the name of variables sent to the server.
        items:[{
                fieldLabel:'Username',
                name:'loginUsername',
                allowBlank:false
            },{
                fieldLabel:'Password',
                name:'loginPassword',
                inputType:'password',
                allowBlank:false
            }],

// All the magic happens after the user clicks the button    
        buttons:[{
                text:'Login',
                formBind: true,
                // Function that fires when user clicks the button
                handler:function(){
                    login.getForm().submit({
                        method:'POST',
                        waitTitle:'Connecting',
                        waitMsg:'Sending data...',

// Functions that fire (success or failure) when the server responds.
// The one that executes is determined by the
// response that comes from login.asp as seen below. The server would
// actually respond with valid JSON,
// something like: response.write "{ success: true}" or
// response.write "{ success: false, errors: { reason: 'Login failed. Try again.' }}"
// depending on the logic contained within your server script.
// If a success occurs, the user is notified with an alert messagebox,
// and when they click "OK", they are redirected to whatever page
// you define as redirect.

                        success:function(){
                        Ext.Msg.alert('Status', 'Login Successful!', function(btn, text){
   if (btn == 'ok'){
                        var redirect = 'test.asp';
                        window.location = redirect;
                                   }
        });
                        },

// Failure function, see comment above re: success and failure.
// You can see here, if login fails, it throws a messagebox
// at the user telling him / her as much. 

                        failure:function(form, action){
                            if(action.failureType == 'server'){
                                obj = Ext.util.JSON.decode(action.response.responseText);
                                Ext.Msg.alert('Login Failed!', obj.errors.reason);
                            }else{
                                Ext.Msg.alert('Warning!', 'Authentication server is unreachable : ' + action.response.responseText);
                            }
                            login.getForm().reset();
                        }
                    });
                }
            }]
    });


// This just creates a window to wrap the login form.
// The login object is passed to the items collection.      
    var win = new Ext.Window({
        layout:'fit',
        width:300,
        height:150,
        closable: false,
        resizable: false,
        plain: true,
        border: false,
        items: [login]
});
win.show();
});

2.处理页面testlogin.php(当然可以是action,servlet,jsp页面)
<?php
$loginUsername = isset($_POST["loginUsername"]) ? $_POST["loginUsername"] : "";

if($loginUsername == "f"){
    echo "{success: true}";
} else {
    echo "{success: false, errors: { reason: 'Login failed. Try again.' }}";
}
?>

3.效果如图
  • 大小: 130.6 KB
分享到:
评论

相关推荐

    ext3.0+Spket自动提示

    6. **调试工具**:虽然Spket本身不包含JavaScript调试器,但它可以与Eclipse的其他JavaScript调试器集成,如Google Chrome的Debugger或Firebug。 下载EXT3.0和Spket后,将Spket插件导入Eclipse,然后可以设置EXT3.0...

    精通JS脚本之ExtJS框架.part1.rar

    3.3.1 调试工具Firebug 3.3.2 开发利器Spket 第4章 ExtJS事件机制 4.1 设计模式——观察者模式 4.2 自定义事件 4.3 浏览器事件 4.4 ExtJS中的事件 4.4.1 Function.call()/apply()方法 4.4.2 函数的作用域 ...

    Ext JS 4.0编码规范

    - **Mozilla Firefox** 4+ 版本,并建议安装 Firebug 插件以便于调试。 ##### 2. 服务器 Web Servers 对于服务器的选择,只要能够提供基本的 HTTP 服务即可。常见的服务器软件包括 Apache、Nginx 或 IIS 等。 ####...

    精通JS脚本之ExtJS框架.part2.rar

    3.3.1 调试工具Firebug 3.3.2 开发利器Spket 第4章 ExtJS事件机制 4.1 设计模式——观察者模式 4.2 自定义事件 4.3 浏览器事件 4.4 ExtJS中的事件 4.4.1 Function.call()/apply()方法 4.4.2 函数的作用域 ...

    EXT组件的7WX扩展类

    8. **调试与优化**:了解7WX扩展类的工作原理对于调试和优化EXT应用至关重要。开发者需要掌握如何利用EXT提供的工具,如Firebug或其他浏览器开发者工具,来检测和解决与7WX数据加载和解析相关的性能问题。 综上所述...

    Ext文件上传、下载

    开发过程中可能使用的工具包括`Ext Designer`(设计界面)、`Sencha CMD`(构建和打包工具),以及像`Firebug`或`Chrome DevTools`这样的浏览器调试工具,帮助开发者调试和优化文件上传和下载的流程。 在实际应用...

    Ext Js权威指南(.zip.001

    3.1 使用firebug进行调试 / 62 3.2 在ie中调试 / 76 3.2.1 使用debugbar和companion.js调试 / 76 3.2.2 使用ietester测试 / 80 3.2.3 在ie 8或ie 9中调试 / 83 3.3 在chrome中调试 / 84 3.4 调试工具的总结 /...

    ext_pluginext_plugin

    这两个工具在开发过程中都具有很高的实用价值,Spket帮助提高后端代码的编写效率,而Firebug则让前端调试变得更为直观和便捷。 在实际应用中,开发者可能需要将Spket集成到他们的IDE中,利用其提供的特性如自动完成...

    Ext培训教程(公司内部培训资料)

    2. **调试工具**:推荐使用Firefox,并安装fireBug插件,它能帮助开发者调试JavaScript代码,查看AJAX通信,设置断点并观察变量变化。 3. **开发环境**:将EXT的开发包复制到Web工程目录下,以便在项目中直接引用。 ...

    Ext+JS深入浅出

    - **调试工具**:推荐使用 **Firebug** 作为调试工具。Firebug 是一款非常强大的浏览器插件,可以帮助开发者进行页面元素的检查、脚本调试等工作。 - **开发利器 Spket**:Spket 是另一款值得推荐的工具,它提供了一...

    Ext企业开发典雅蓝色开发界面

    - 使用Chrome DevTools或Firebug等浏览器内置的调试工具,可以便捷地定位和修复前端代码问题。 总的来说,"Ext企业开发典雅蓝色开发界面"是基于Ext JS框架,融合了典雅的蓝色设计和企业级功能,适用于ASP.NET环境...

    Ext Core手册word版

    使用Firebug等开发者工具,可以查看`Ext.Element`实例上的方法,以便更好地理解和利用这些功能。 总的来说,《Ext Core手册》是学习和使用Ext Core库的重要资源,它详细阐述了如何利用该库进行高效且兼容的前端开发...

    web开发工具

    例如,Firebug用于实时调试JavaScript,EXT4.0则用于构建动态交互的前端界面,IE8则是测试兼容性的重要平台,而EditPlus则作为编写和管理代码的得力助手。了解并熟练掌握这些工具,对于提升Web开发技能和效率具有...

Global site tag (gtag.js) - Google Analytics