Ext.Viewport.add不是Ext js中的函數

Question

我是Ext js的新手。 我正在嘗試在應用程序中實現Grid，因為一旦用戶單擊數據，新的msg窗口將打開並顯示當前數據，用戶可以對其進行編輯並將其保存在模型中。 我正在使用經典工具包

我這樣嘗試過：

Ext.define('MyApp.view.main.MainController', {
    extend: 'Ext.app.ViewController',

    alias: 'controller.main',
    require:['Ext.plugin.Viewport'],

    itemtap: function (view,index,item,record) {
       Ext.Viewport.add({
       xtype:'formpanel',
       title:'update',
       width:300,
       centered: true,
       modal: true,
       viewModel : {
                        data: {
                            employee: record
                        }
                    },
       items: [{

                        xtype: 'textfield',
                        name: 'firstname',
                        label: 'First Name',
                        bind: '{employee.name}'

                    }, {
                        xtype: 'toolbar',
                        docked: 'bottom',
                        items: ['->', {
                            xtype: 'button',
                            text: 'Submit',
                            iconCls: 'x-fa fa-check',
                            handler: function() {
                                this.up('formpanel').destroy();
                            }
                        }, {
                            xtype: 'button',
                            text: 'Cancel', 
                            iconCls: 'x-fa fa-close',
                            handler: function() {
                                this.up('formpanel').destroy();
                            }
                }]
           }]
     })

在我的另一個文件中，我像這樣調用此函數

listeners: {
        select: 'itemtap'
    }

但是我遇到像Ext.Viewport.add這樣的錯誤，不是一個函數

請建議我如何使之成為可能。

任何建議都歡迎。

Answer 1

在經典工具包中，您沒有每次只能顯示一個項目的視口。 您想要在運行時向其添加組件的視口的整個概念是現代工具箱的概念。

相反，您可以將表單放在Window中：

var window = Ext.create('Ext.window.Window',{
   title:'update',
   width:300,
   centered: true,
   modal: true,
   items: [{
       xtype:'formpanel'
       viewModel : {
                    data: {
                        employee: record
                    }
                },
   ...

})
window.show();

並且您的處理程序應該關閉/銷毀窗口，而不僅僅是銷毀表單面板：

this.up('window').close();
this.up('window').destroy();