0

我正在用 extjs 做项目。我正在设计带有验证码检查的注册表单。我没有发现任何可以直接在 extjs 中进行验证的东西。所以我正在尝试使用 javascript 创建验证码，并希望将此 javascript 验证码集成到 extjs 中。我有javascript验证码作为-

     <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"                   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     <html xmlns="http://www.w3.org/1999/xhtml" >
     <head>
     <title>BotBoot</title>

     <script type="text/javascript">
      var a = Math.ceil(Math.random() * 10);
      var b = Math.ceil(Math.random() * 10);       
      var c = a + b
      function DrawBotBoot()
     {
        document.write("What is "+ a + " + " + b +"? ");
        document.write("<input id='BotBootInput' type='text' maxlength='2'   size='2'/>");
     }    
     function ValidBotBoot(){
     var d = document.getElementById('BotBootInput').value;
     if (d == c) return true;        
     return false;
     }
     </script>


    </head>
    <body>

    Are you human?<br />

    <script type="text/javascript">DrawBotBoot()</script>
    <input id="Button1" type="button" value="Check" onclick="alert(ValidBotBoot());"/>
    </body>
    </html>

为了将此 javascript 集成到 extjs 中，我创建了单独的 Captcha.js 文件为=

Ext.define('Balaee.view.sn.user.Captcha',   {
extend: 'Ext.container.Container',
alias: 'widget.captcha',
initComponent: function(config){
    this.a = Math.ceil(Math.random() * 10);
    this.b = Math.ceil(Math.random() * 10);       
    this.c = this.a + this.b;
},

DrawBotBoot: function(){

},

ValidBotBoot: function(){

}
});

并将其包含在我的注册表单中，我正在使用 - items:[ { xtype:'captcha',
}]

但我没有得到任何输出。那么如何将javascript函数DrawBotBoot和ValidBotBoot改成extjs呢？我还需要做哪些更改才能在我的注册表单中获取此验证码？我对 extjs 很陌生。有人可以帮助我吗？

4

1 回答 1

2

好的，我为你制作了代码。没有测试它，但它应该可以工作:)

Ext.define('Balaee.view.sn.user.Captcha',   {
    extend: 'Ext.container.Container',
    alias: 'widget.captcha',

    renderTo: Ext.getBody(),

    initComponent: function(config){
        var me = this;
        me.inputField = Ext.create('Ext.form.field.Text',{
            name: 'BotBootInput',
            fieldLabel: 'BotBootInput'
        });

        me.checkButton = Ext.create('Ext.Button', {
            text: 'Check',
            handler: function(btn){
                alert(me.ValidBotBoot());
            }
        });

        me.DrawBotBoot();

        Ext.apply(me, {
            items: [me.inputField, me.checkButton]
        });
        me.callParent(arguments);
    },

    DrawBotBoot: function(){
        this.a = Math.ceil(Math.random() * 10);
        this.b = Math.ceil(Math.random() * 10);       
        this.c = this.a + this.b;
        this.inputField.fieldLabel = "What is "+ this.a + " + " + this.b +"?");
    },

    ValidBotBoot: function(){
        var d = this.inputField.getValue();
        if (d === this.c){ 
            return true; 
        } else {
            return false;
        }
    }
});

//instantiate
var captcha = Ext.widget('captcha');
//to renew the captcha use captcha.DrawBotBoot
于 2013-01-10T13:08:25.243 回答