Question

我有一个视图（Main.js），表单（RenterData.js），并且我想对控制器进行编码，该控制器将通过视图Main中的按钮打开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的初学者，而且我不明白我必须使用哪种方法来通过按钮调用表单。请注意，该按钮位于转盘中，该转盘也位于视图的菜单中。我使用Ext JS 6.2.0

Grazie！

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

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

Answer 2

在按钮的函数处理函数中，创建与该按钮相关的类的对象，然后调用“ show”方法以将其添加为视口。

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

如何在控制器中创建一个按钮以打开表单（ext js）

2 个答案: