На 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'
            }

        })
        }



});

Когда я пытаюсь нажать на кнопку, я сталкиваюсь со следующим: «Нет метода»nameOfHandler "назван на Ext.Button.Так что я думаю, что обработчик из Main view не работает ...

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'
}]
})