Как создать кнопку в контроллере, которая открывает форму (ext js)

Question

У меня есть представление (Main.js), форма (RenterData.js), и я хочу кодировать контроллер, который будет открывать форму RenterData кнопкой из представления Main.

Теперь мой контроллер выглядит так:

Ext.define('MyApp.controller.ButtonController', {

extend: 'Ext.app.ViewController',



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

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

init: function(application) {

    this.control({
        "RenterId": function () {
             click: this.onButtonClickRenterId  
        }
    })
},

onButtonClickRenterId: function() {
    /* place for form calling by button function */
}

});

Я новичок в sencha ext js, и я не понимаю, какой метод мне нужно использовать для вызова формы кнопкой.Обратите внимание, что кнопка находится в карусели, которая находится в меню на виде.Я использую Ext JS 6.2.0

Grazie!

Answer 1

Внутри функции-обработчика функции кнопки создайте объект связанного с ним класса и вызовите метод "show", чтобы добавить его в окно просмотра.

onButtonClickRenterId: function() {
    /* place for form calling by button function */
   var form = Ext.create('<class name defined in RenterData.js>');
   form.show();
}

Answer 2

Вы можете сделать это, показав содержимое формы в окне, или вы можете отобразить его на панели региона в вашем порту просмотра. Вот пример 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',
// renderTo:Ext.getBody(),
width: 600,
height: 400,
layout: 'border',
items: [{
    region: 'north',
    height: 100,
    items: [{
        xtype: 'button',
        text: 'Open Form in pop up window',
        handler: function () {
            Ext.create('Ext.window.Window', {
                title: 'Popup',
                width: 400,
                height: 100,
                autoShow: true,
                items: {
                    xtype: 'myForm'
                }
            })
        }
    }, {}, {
        xtype: 'button',
        text: 'Open Form View Port Center Region',
        handler: function () {
            let myForm = Ext.create('Test.view.MyForm')
            this.up('viewport').items.getAt(1).add(myForm);
        }
    }]

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

app / view / MyForm

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