Ext.Viewport.addはExt js内の関数ではありません

Question

私はExt jsの新機能です。私はアプリケーションでグリッドを実装しようとしています。ユーザーがデータをクリックすると、新しいメッセージウィンドウが現行のデータで開き、ユーザーがそれを編集でき、これがモデルに保存されます。

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

従来のツールキットでは、毎回1つのアイテムしか表示しないビューポートはありません。実行時にコンポーネントを追加するビューポートの概念全体は、最新のツールキットの概念です。

代わりに、あなたはウィンドウ内のフォームを置くことができます。

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

}) 
window.show(); 

そして、あなたのハンドラウィンドウを破棄/閉じる必要があり、ちょうどformpanelを破壊しない：

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