0

「LoginButton」をクリックすると、ユーザーがユーザー名フィールドに入力した値をjsonデータストアと比較する必要がある単純なログインページを開発しています。私の質問は、配列内の json ストアからユーザー名のリストを取得し、テキスト フィールドの値と比較することはできますか? もしそうなら、どのように？

私の nSpaceIndex.html

<html>
    <head>
        <title>nSpace | Expense / Project Solutions</title>
        <link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css">
        <script type="text/javascript" src="extjs/ext-debug.js"></script>
        <script type="text/javascript" src="app.js"></script>
    </head>

    <body>
    </body>
</html>

app.js:

Ext.application({
    requires: ['Ext.container.Viewport'],
    name: 'nSpace',
    controllers: [
        'nSpaceController'
    ],
    appFolder: 'app',

    launch: function() {
        Ext.create('Ext.container.Viewport', {
            layout: 'fit',
            items: {
                xtype: 'loginView'
            }
        });
    }
});

私のnSpaceController.js:

Ext.define('nSpace.controller.nSpaceController', {
    extend: 'Ext.app.Controller',
    stores: [
        'Users'
    ],
    views: [
        'login.loginView'
    ],
    model: 'loginModel',
    init: function() {
        this.control({
            "#loginButton": {
                click: this.onLoginButtonClick
            }
        });
    },
    onLoginButtonClick: function(){
                //var jsonArray = store.Users.data.items
                //console.log(jsonArray);
                            // I NEED TO GET THE REFERENCE OF MY STORE: USERS TO COMPARE
                            var logUserName = Ext.getCmp('getUserName').getValue();
                var logPassword = Ext.getCmp('getPassword').getValue();             
                if(logUserName == 'user01' && logPassword == 'password01'){
                    Ext.MessageBox.show({title: 'Success', msg: 'You will be redirected to the home page in few moments...', icon:Ext.MessageBox.INFO});
                }
                else if(logUserName == 'user02' && logPassword == 'password02'){
                    Ext.MessageBox.show({title: 'Success', msg: 'You will be redirected to the home page in few moments...', icon:Ext.MessageBox.INFO});
                }
                else{
                    Ext.MessageBox.show({title: 'OOPS!!!', msg: 'Please Enter Valid Details', icon:Ext.MessageBox.WARNING});
                }
    },

});

私の loginModel.js:

Ext.define('nSpace.model.loginModel', {
    extend: 'Ext.data.Model',
    fields: ['loginusername', 'password']
});

ユーザー.js:

Ext.define('nSpace.store.Users', {
    extend: 'Ext.data.Store',
    model: 'nSpace.model.loginModel',

    autoLoad : true,
    proxy: {
        type: 'ajax',
        url: 'data/users.json',
        reader: {
            type: 'json',
            root: 'users',
            successProperty: 'success'
        }
    }
});

loginView.js:

Ext.define('nSpace.view.login.loginView' ,{
    extend: 'Ext.form.Panel',
    alias: 'widget.loginView',
    store: 'Users',
    title: 'nSpace | Login',
    frame:true,
    bodyPadding: 5,
    width: 350,
    layout: 'anchor',
    defaults: {
        anchor: '100%'
    },
    defaultType: 'textfield',
    items: [{
        fieldLabel: 'User Name',
        name: 'loginusername',
        id: 'getUserName',
        allowBlank: false
    },{
        fieldLabel: 'Password',
        inputType: 'password',
        id: 'getPassword',
        name: 'password',
        allowBlank: false
    }],

    // Reset and Submit buttons
    buttons: [{
        text: 'Sign Up',
        handler: function() {
           // location.href = 'signUp.html';
        }
    },{
        text: 'Reset',
        handler: function() {
            this.up('form').getForm().reset();
        }
    }, {
        text: 'Login',
        id:'loginButton',
        formBind: true, //only enabled once the form is valid
        disabled: true,
    }],
    renderTo: Ext.getBody()
});

ユーザー.json:

{
    "success": true,
    "users": [
        {"loginusername": 'user01', "password": 'password01'},
        {"loginusername": 'user02', "password": 'password02'}
    ]
}
4

2 に答える 2

0

this.control の上の init 関数内で this..

var store = this.getUsersStore();
        store.load({
            callback:function(){
                  var l =  store.first();
                  console.log(l.get("password"));
          }
        });

これはあなたが確認できる方法です

store.each(function(rec){
        if (rec.get('password') === value) {
            display = rec.get('username');
            return false;
        }
    });
于 2013-03-21T08:46:22.567 に答える
0

他のユーザーが指摘しているように、アプリケーションのクライアント側で承認を実行するのは簡単です。ただし、これは問題ではないと述べているため、このアプローチの明らかなセキュリティ上の欠陥に対処することなく、質問に答えます。

を使用しているようです。Ext.getCmp()そのため、コンポーネントには が割り当てられていますid。プロパティはグローバルであるため、これは一般に悪い習慣と見なされますid。したがって、同じidでインスタンス化された 2 つのコンポーネントがある場合、アプリケーションはクラッシュします。代わりに、コンポーネントを に割り当て、の定義itemIdでコンポーネントを簡単に取得するための参照を作成すると便利な場合があります。Controllerrefs[]

例えば：

Ext.define('nSpace.controller.nSpaceController', {

... other store/model/view here ...

refs: [{
    name: 'userNameField', // makes magic method 'getUserNameField()'
    selector: 'textfield[name=loginusername]',
    xtype: 'textfield'
},{
    name: 'passwordField', // makes magic method 'getPasswordField()'
    selector: 'textfield[name=password]',
    xtype: 'textfield'
}],

this.control({ .. observe events here .. });
});

ストアへの参照を取得し、提供されたユーザーを検索します...

var me = this, // controller
    store = Ext.getStore('Users'),
    user  = me.getUserNameField.getValue(),
    pass  = me.getPasswordField().getValue(),
    success;

// Attempt to find a record matching the provided user/pass
success = store.findBy(function(rec){
    return (rec.get('loginusername') === user && rec.get('password') === pass);
});

// Store findBy returns the index, or -1 if no matching record is found
if(success >= 0){
   // user/password matched
}else{
   // no user/password match found
}
于 2013-07-24T13:13:02.153 に答える