Question

file custom.js

Ext.define('BookApp.view.Customs', {
    extend: 'Ext.container.Container',
requires:['BookApp.controller.MainController'],
    xtype: 'customs',

    controller: 'main',
    viewModel: {
        type: 'main'
    },

    layout: {
        type: 'border'
    },

    items: [{
        xtype: 'panel',
        bind: {
            title: '{name}'
        },
        region: 'west',
        html: '<ul>...</ul>',
        width: 250,
        split: true,
        tbar: [{
            text: 'Button',
            handler: 'onClickButton'
        }]
    },{
        region: 'center',
        xtype: 'tabpanel',
        items:[{
            title: 'Tab 1',
            html: '<h2>Content ...</h2>'
        }]
    }]
});

我有控制器MainController

Ext.define('BookApp.controller.MainController', {
 extend: 'Ext.app.Controller',

    requires: [
        'Ext.MessageBox'
    ],
 //alias!!!!
    alias: 'controller.main',

    onClickButton: function () {
        Ext.Msg.confirm('Confirm', 'Are you sure?', 'onConfirm', this);
    },

    onConfirm: function (choice) {
        if (choice === 'yes') {
           console.log('ALALA')
        }
    }
});

但是当我点击带有属性的按钮时：

tbar: [{
                text: 'Button',
                handler: 'onClickButton'
            }]

错误： 未捕获的TypeError：undefined不是函数

Answer 1

查看http://docs.sencha.com/extjs/5.0/application_architecture/view_controllers.html

所有错误的是您正在扩展Ext.app.Controller而不是Ext.app.ViewController

这是一个略微简化的版本，不包括viewModel绑定

//app.js
Ext.application({
    name: 'BookApp',
    launch: function() {
        Ext.create('BookApp.view.Customs', {
            fullscreen: true
        });
    }
});

....
controller/MainController.js
Ext.define('BookApp.controller.MainController', {
    extend: 'Ext.app.ViewController',
    alias: 'controller.main',

    onClickButton: function() {
        Ext.Msg.confirm('Confirm', 'Are you sure?', 'onConfirm', this);
    },

    onConfirm: function(choice) {
        if (choice === 'yes') {
            console.log('ALALA');
        }
    }
});

.....
view/view.Customs.js
Ext.define('BookApp.view.Customs', {
    extend: 'Ext.container.Container',
    xtype: 'customs',
    controller: 'main',
    renderTo: Ext.getBody(),

    items: [{
        xtype: 'panel',
        title: 'testPanel',
        region: 'west',
        html: '<ul>...</ul>',
        width: 250,
        split: true,
        tbar: [{
            text: 'Button',
            handler: 'onClickButton'
        }]
    }, {
        region: 'center',
        xtype: 'tabpanel',
        items: [{
            title: 'Tab 1',
            html: '<h2>Content ...</h2>'
        }]
    }]
});

演示：https://fiddle.sencha.com/#fiddle/gdu

视图中的事件侦听器出错。

1 个答案: