check the json data for comparing in extjs

Question

I created a simple login page using extjs MVC to understand MVC architecture of extjs. As you can see below, I am trying to get the json data into the store and then I will check each username and password in that data with the entered login credentials. The thing in which I am confused right now is that, how to check the username and password from the retrieved json data present in store folder into the view folder? (Below code is only the related code with the problem)

I aware that this could invoke security threats, as I am checking on client side.

'view' folder --> Code.js

function checkJson(username, password){
    //if matched, return true.
    //else, return false.
}

'model' folder --> Code.js

Ext.define('AM.model.User', {
   extend: 'Ext.data.Model',
   fields: ['name', 'email']
});

'store' folder --> Code.js

Ext.define('LoginPage.store.Code', {
   extend: 'Ext.data.Store',
   model: 'LoginPage.model.Code',
   autoLoad: true,


   proxy: {
        type: 'ajax',
        api: {
            read: 'data/loginResponse.json',
            update: 'data/checkCredentials.json'  //Contains:  {"success": true}
        },
        reader: {
            type: 'json',
            root: 'loginResponse',
            successProperty: 'success'
        }
   }
});

loginResponse.json

{
"form": {
   "login": [
     {
       "username": "venkat",
       "password": "123"
     },
     {
       "username": "admin",
       "password": "345"
     }
   ]
}

Answer 1

You should put your checking part of the code to the Controller (views are for presentation). In view define some form with login and password fields. In Controller catch click event on form OK (Login) button, get form values (login + password), then use Ext.data.Store.query() method to find wether credentials fits or not like:

Look here for examples how to use controllers in MVC to catch events;

In your Controller put:

init: function() {
    this.control({
        '#form_ok_button': { // this is the `id` property of your form's Login button
            click: function(button) {
                 var fValues = button.up('form').getValues(); // Assume your button is bound to the form
                 // Or you can use `Controller.refs` property (http://docs.sencha.com/ext-js/4-1/#!/api/Ext.app.Controller-cfg-refs) to get form
                 var matched = store.query('username', fValues.username);
                 if(matched.length && matched[0].get('password') === fValues.password) {
                     // login OK!
                 }
            }
        }
    });
},

How to use refs (in Controller):

refs: [
   { ref: 'usernameField', selector: '#username_field' }, // username field id is "username_field"
   { ref: 'passwordField', selector: '#password_field' }, // password field id is "password_field"
],

init: function() {  
   this.control({
       '#form_ok_button': {
            click: function() {
                // with `refs` autogetters are created for every `ref`:
                var username_field = this.getUsernameField();
                var password_field = this.getPasswordField();
            }
        }
   })
}

You can read about referencing here.

For every Store in Ext.app.Controller.stores array autogetters are created too (in your case for Code store use this.getCodeStore() inside controller).

Here is the flow:

1. You get username and password field values with this.getUsernameField() and this.getPasswordField();
2. You query() store for username
3. If username exist in store, you check if password fits.