Question

我似乎无法从我的视图中获取控制器内的功能。似乎我错过了什么，但我不知道是什么。我可以使用非sencha方式达到它，但这将使我在将来不会使用一致的代码。有人可以发现错误并解释为什么会出错。

感谢您查看我的代码。

Ext.define('imp.view.Test', {
    extend: 'Ext.form.Panel',
    alias: "widget.test",
    xtype: 'test',
    controllers: 'imp.controller.Test',
    requires: [ 'imp.util.Utility'
             , 'imp.controller.Test'],

    config: {
        title:'Test',
        scrollable: null,
        items: [

            {
                xtype: 'button',
                itemId: 'postButton',
                ui: 'action',
                padding: '10px',
                text: 'Post'
            }]


    }



});

控制器：

Ext.define('imp.controller.Test', {
    extend: 'Ext.app.Controller',
    config: {
        refs: {
            testView: 'test'
        },
        control: {
            'test #postButton': {
                tap: 'onPostCommand'
            }
        }
    },

        onPostCommand: function (){
            console.log('klik');


        }

    }
);

Answer 1

我认为有多种方法可以做到这一点。我总是写这样的控制器：

Ext.define('imp.controller.Login', {
  extend: 'Ext.app.Controller',
  init: function(){
    this.control({
      'button[action=test_command]' :   {click:this.test_cmd},
    });
  },
  test_cmd: function(){
    console.log("test command pressed!");
  }
});

使用此策略，您的按钮需要配置

action: "test_command"

你可以删除你拥有的按钮和监听器声明的id。我不太确定视图文件底部的onTestButtonTap函数应该做什么。你的意思是有两个独立的功能吗？

Answer 2

查看：

Ext.define('imp.view.Login', {
extend: 'Ext.form.Panel',
alias: "widget.login",
xtype: 'login',
requires: ['Ext.form.FieldSet',
    'Ext.form.Password',
    'Ext.Label',
    'Ext.Img',
    'Ext.util.DelayedTask',
    'imp.controller.Login'],

config: {

    title: 'Login',

    items: [


        {
            xtype: 'button',
            itemId: 'testButton',
            ui: 'action',
            padding: '10px',
            text: 'Test',
            handler: function(btn) {
              var view= btn.up('login');
              view.fireEvent('testCommand', view);
            }
        }
    ]

}
});

控制器：

Ext.define('imp.controller.Login', {
extend: 'Ext.app.Controller',
config: {
    refs: {
        loginView: 'loginview',
        mainMenuView: 'mainmenuview'
    }
},

init: function () {
    this.control({
        'login': {
            testCommand: this.onTestCommand,
         }
    })
},

onTestCommand: function (){
    console.log('onTestCommand');

}});

Answer 3

这是标准方式： UI中没有逻辑，我删除了所有与事件相关的代码

Ext.define('imp.view.Login', {
    extend: 'Ext.form.Panel',
    alias: "widget.login",
    xtype: 'login',
    requires: ['Ext.form.FieldSet',
        'Ext.form.Password',
        'Ext.Label',
        'Ext.Img',
        'Ext.util.DelayedTask',
        'imp.controller.Login'],

    config: {
        title: 'Login',
        items: [
            {
                xtype: 'button',
                itemId: 'testButton',
                ui: 'action',
                padding: '10px',
                text: 'Test'
            },
            {
                xtype: 'textfield',
                itemid: 'editBox'

            }
        ]

    }
});

此处如何在控制器中处理Tap：

Ext.define('imp.controller.Login', {
    extend: 'Ext.app.Controller',
    config: {
        refs: {
            loginView: 'loginview',
            mainMenuView: 'mainmenuview'
        },
        control: {
            'loginview #testButton': {
                tap: 'onTestCommand'
            }
        }
    },

    onTestCommand: function (button, e, eOpts){
        console.log('onTestCommand');
        /*a sefe way to get editbox value*/
        var Form = button.up('formpanel');
        var editbox = Form.down('#editBox');
        var value = editbox.getValue();

    }});

Answer 4

您捕获控制器中的事件，视图应仅包含UI标记。

根据我的经验，控制器应如下所示：

Ext.define('imp.controller.Login', {
    extend: 'Ext.app.Controller',
    //....
    views: ['imp.view.Login'],
    init: function(){
        this.control({
           'button': {
               click: this.handleButtonClick
           }
    },
    handleButtonClick: function (button) {
        switch (button.itemId) {
            case 'testButton':
                this.testButtonClick();
                break;
        }
    },
    testButtonClick: function () {
        console.log('Clicked');
    }
});

从视图中无法到达控制器内部的功能

4 个答案: