如何在控制器中创建一个打开窗体的按钮(ext js)

Question

我有一个视图(Main.js)，表单(RenterData.js)，我想编写控制器，这将打开从视图主按钮RenterData表单。

现在我的控制器看起来像这样：

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的初学者，我不知道我必须使用哪种方法来逐个调用form。请注意，按钮进入了一个转盘，该转盘进入了视图上的菜单。我使用Ext JS 6.2.0

谢谢！

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

应用程序/视图/MyForm

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

Answer 2

在按钮的函数处理函数内，创建与其相关的类的对象，并调用show方法添加它的viewport。

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