没有在 Ext.Button 上命名的方法

Question

我尝试使用控制器从主视图中通过按钮调用表单。所以我使用主视图js，表单js和控制器js：

Ext.define('App.view.main.Main', {
    extend: 'Ext.form.Panel',
    id:'control-panel',
. . .
items: [{
                    xtype:'button',
                    ui: 'action',                   
                    text: 'Renter',
                    id: 'RenterId',
                    handler:'adClick'
. . .

和控制器js：

Ext.define('App.view.main.ButtonController', {

    extend: 'Ext.app.ViewController',

    alias: 'controller.button',

    requires: ['App.view.forms.RenterData',
               ],


    views: ['App.view.main.Main'],

    refs: [{
        ref: 'control-panel',
        selector: 'control-panel'
    }],

    adClick: function() {
          Ext.create('Ext.panel.Panel', {
             title:'Test',
             layout: 'fit',

             autoshow: true,
             items: {
                 xtype:'panelxtype'
            }

        })
        }



});

当我尝试单击我的按钮时，我面临下一个：Ext.Button 上没有命名方法“nameOfHandler”。所以我认为主视图中的处理程序不起作用......

Answer 1

这是一个你想要的控制器Fiddle的工作示例

app.js

Ext.application({
 name: 'Test',
 requires: ['Test.view.Main', 'Test.view.MyForm'],
 mainView: 'Test.view.Main',
 launch: function () {}
});

app/view/Main.js

Ext.define('Test.view.Main', {
extend: 'Ext.container.Viewport',
title: 'main',
xtype: 'main',
requires:['Test.view.MainController'],
controller:'mainController',
width: 600,
height: 400,
layout: 'border',
items: [{
    region: 'north',
    height: 100,
    items: [{
        xtype: 'button',
        text: 'Open Form in pop up window',
        handler: 'onOpenForm'
    }, {}, {
        xtype: 'button',
        text: 'Open Form View Port Center Region',
        handler: 'onOpenFormInPanel'
    }]

}, {
    region: 'center',
    id: 'mycenter',
    title: 'Center Region',
    items: [{
        html: ''
    }]
}]
})

app/view/MainController.js

Ext.define('Test.view.MainController', {
extend: 'Ext.app.ViewController',
alias: 'controller.mainController',
onOpenFormInPanel: function () {
    let myForm = Ext.create('Test.view.MyForm')
    this.getView().items.getAt(1).add(myForm);
},
onOpenForm: function () {
    Ext.create('Ext.window.Window', {
        title: 'Popup',
        width: 400,
        height: 100,
        autoShow: true,
        items: {
            xtype: 'myForm'
        }
    })
}
});

app/view/MyForm.js

Ext.define('Test.view.MyForm', {
extend: 'Ext.form.Panel',
xtype: 'myForm',
width: 400,
height: 200,
items: [{
    xtype: 'textfield',
    name: 'mtfield',
    fieldLabel: 'TextField'
}]
})