CODEWITHSUNDEEP
javascriptextjs
Roli Agrawal
Roli Agrawal

Reputation: 2466

Ext.Viewport.add is not a function In Ext js

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 .

Upvotes: 1

Views: 3402

Answers (1)

Alexander
Alexander

Reputation: 20224

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

Upvotes: 4

Related Questions