Extjs - 如何在控制器中引用 json 数据？答案

【问题标题】：Extjs - How to refer the json datas in a controller?Extjs - 如何在控制器中引用 json 数据？
【发布时间】：2013-02-26 05:53:26
【问题描述】：

我正在开发一个简单的登录页面，我需要将任何用户在用户名字段中输入的值与单击“登录按钮”时的 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']
});

Users.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()
});

users.json:

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

【问题讨论】：

你的逻辑肯定是倒退的。您想将用户名/密码发送到服务器并让它检查值。你不~不~想将所有用户名和密码发送给客户端，然后进行比较。
@Evan，不，我们没有在任何服务器上工作。我们只需要在客户端进行比较。有可能吗？
你可以很容易地做到这一点......但这真的很愚蠢......因为它完全没有意义，因为您的用户群中的任何人都可以打开 javascript 开发人员工具并查看密码。
@Reimius 是的。但我正在对此进行 POC ......如果有人能告诉我如何检索 json 数据，那将非常有帮助。我只需要一个关于如何检索它的代码示例...
有什么解决办法吗？我仍然在挣扎，无法从我的控制器中引用 json 数据:(

标签： json extjs extjs4 store

【解决方案1】：

在 this.control 上方的 init 函数中尝试使用这个..

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;
        }
    });

【讨论】：

【解决方案2】：

正如其他用户所指出的，在应用程序的客户端执行授权是微不足道的。但是您已经表示这不是问题，因此我将回答您的问题，但不会解决这种方法明显的安全缺陷。

我看到你正在使用Ext.getCmp()，因此你的组件被分配了一个id。这通常被认为是不好的做法，因为id 属性是全局的，因此如果有两个组件使用相同的id 实例化，应用程序将崩溃。您可能会发现将组件分配给 itemId 并创建引用以在 Controller 的 refs[] 定义中轻松检索组件很有用。

例如：

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
}

【讨论】：