ExtJS MVC 表单引用

ExtJS MVC form references

本文关键字：引用 表单 MVC ExtJS      更新时间：2023-09-26

我是Sencha ExtJS的新手。我刚刚开始创建一个 MVC 应用程序。目前，我正在尝试为该应用程序创建登录屏幕，但我无法从登录控制器获取对我的登录表单的引用。这是我的代码：

应用.js

Ext.application({
    name: 'Fleximanager',
    requires: [
    ],
    controllers: [
        'Login'
    ],
    autoCreateViewport: true,
    init: function() {
    }
});

视口.js

Ext.define('Fleximanager.view.Viewport', {
    extend: 'Ext.container.Viewport',
    requires:[
        'Fleximanager.view.login.Flexilogin'
    ],
    layout: 'fit',
    items: [{
        xtype:'flexilogin'
    }]
});

灵活登录.js

Ext.define('Fleximanager.view.login.Flexilogin', {
    extend: 'Ext.panel.Panel',
    xtype: 'flexilogin',
    layout: {
        type: 'vbox',
        align: 'center',
        pack: 'center'
    },
    id: 'flexilogin',
    style: {background: '#8fc33a'},
    items: [{
        xtype:'panel',
        title: 'Login',
        frame: true,
        width: 350,
        height: 200,
        layout: 'fit',
        items: {
            layout: 'anchor',
            id: 'flexiloginform',
            bodyPadding: 15,
            defaultType: 'textfield',
            items: [{
                fieldLabel: 'Username',
                name: 'username',
                allowBlank: false
            },{
                fieldLabel: 'Password',
                name: 'password',
                inputType: 'password',
                allowBlank: false
            }],
            buttons: [{
                text: 'Register',
                id: 'registerbtn',
                action: 'register'
            },{
                text: 'Login',
                id: 'loginbtn',
                formBind: true,
            }]
        }
    }]
});

以及控制器的登录名.js

Ext.define('Fleximanager.controller.Login', {
    extend: 'Ext.app.Controller',
    requires: [
        'Fleximanager.view.login.Flexilogin',
    ],
    refs:[{
        ref: 'loginbtn',
        selector: '#loginbtn'
    }],
    init: function(){
        this.control({
            'loginbtn': {
                'click': function(){
                    console.log('click');
                }
            }
        })
    }
});

该代码应该在您单击登录按钮后将"单击"记录到控制台，但它什么也不做。谁能帮我？

感谢您的任何回答。

问题在于您如何引用按钮。

refs:[{
    ref: 'loginbtn',
    selector: '#loginbtn'
}],

是否this.getLoginbtn创建要在控制器中使用的引用 getter 方法，但不能在this.control中使用

this.control 中的字符串键是类似于 Ext.ComponentQuery.query 中定义的标识符。它搜索 xtype/alias 和 itemId。

this.control({
    'flexilogin #loginbtn': {
     ^ xtype     ^ itemId

请注意，您应该使用 itemId 而不是 id id因为它在任何时候都必须在页面上是唯一的，itemId在组件中应该是唯一的;更改如下：

{
      text: 'Login',
      itemId: 'loginbtn',
      ^ replace id by itemId
      formBind: true,
      name: 'login'
}

只需像这样为您的按钮命名，

{
      text: 'Login',
      id: 'loginbtn',
      formBind: true,
      name: 'login'
}

现在在控制器中，输入以下代码：

this.control({
            'button[name="login"]': {
                click: function(){
                    console.log('click');
                }
            }
        })

这将满足您的目的。

相关文章：