使用SenchaTouch的简单登录表单 [英] Simple login form with SenchaTouch

问题描述

刚刚潜入SenchaTouch这似乎很有希望的.

Just diving into SenchaTouch which seems very promising.

我建立我的第一个应用程序，一个简单的登录表单检查源 http://pastebin.com/8Zddr9cj

I'm building my first application, a simple login form check source http://pastebin.com/8Zddr9cj

我正在寻找一个方式做以下的事情:

I'm looking for a way to do the following things :

• 当登录/密码是

  显示好"的错误信息是错误的.可以在红色更换请输入您的凭证);我不知道如何访问这个属性.

• Display 'nice' error message when the login/password is wrong. Can be in red to replace the 'Please enter your credentials); i don't know how to access this property.

如果登录成功，请关闭表单并加载应用程序(可能是另一个js文件).

If login success, close the form and load the application (probably another js file).

相当简单，但我新手到这一点，

Quite simple, but i'm a newbie to this,

推荐答案

1)字段集有一个称为方法其中可以调用来更新所述指令.所以，你可以指定一个配置在你的领域集，然后使用后，当您要更新的说明上.

1) Fieldset has a method called setInstructions which you can call to update the instructions. So, you could specify an id configuration in your field set, then use that later on when you want to update the instructions.

...
items: [
    {
        xtype: 'fieldset',
        id: 'fieldset',
        title: 'Login',
        instructions: 'Please enter your credentials',
        defaults: {
            required: true,
            labelAlign: 'left',
            labelWidth: '40%'
        },
        items: [
        {
            xtype: 'emailfield',
            name : 'email',
            label: 'Email',
            placeHolder: '[e-mail]',
            useClearIcon: true
        }, {
            xtype: 'passwordfield',
            name : 'password',
            label: 'Password',
            useClearIcon: false
        }]
    }
],
...

//wherever you want to update the instructions
var fieldset = Ext.getCmp('fieldset');
fieldset.setInstructions('My new instructions!');

2)下面是本的一个简单的演示:

2) Here is a simple demo of this:

//create a panel, which is full screen, and will contain your form, and another item
//which you want to show at some point
var wrapper = new Ext.Panel({
    fullscreen: true,
    layout: 'card',

    //my two items
    items: [
        form,
        {
            xtype: 'panel',
            html: 'my second panel, which is not visible on render.'
        }
    ]
});

//change the active card/item, when you need to
wrapper.setActiveItem(1); //starts at 0

请确保从表单中删除全屏，因为它不再是全屏(此包装面板是).

Make sure you remove fullscreen from your form, as it is no longer fullscreen (this wrapper panel is).

这篇关于使用SenchaTouch的简单登录表单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！