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

Question

I am very new to Ext js . I am trying to implement Grid in application in that once user will click on data new msg window will open with current data and user can edit that and this will saved in model. I am using Classic toolkit

I tried like this:

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();
                            }
                }]
           }]
     })

and In my other file i am calling this function like

listeners: {
        select: 'itemtap'
    }

But i am getting error like Ext.Viewport.add is not a function

Kindly suggest me how can i make it possible .

Any suggestions are welcome .

Answer 1

In classic toolkit, you don't have a viewport that shows only a single item every time. The whole concept of a viewport that you want to add components to at runtime is a concept of the modern toolkit.

Instead, you can put your form inside a 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();

And your handlers should close/destroy the window, not just destroy the formpanel:

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