Question

I want the close button to be reusable so I created its own class so I can attach it to the views that need it. I want to just be able to pass the view that is attached to the view to the controller to close that view. It should be fairly simple and I would suspect that this is how many do it but I can’t get it to work correctly. I get it to close the view but get the error
Uncaught TypeError: Cannot read property ‘dom’ of null
I understand this to generally mean that the view isn’t being destroyed but I thought this told it to destroy the view:

Ext.Viewport.remove(curView, true);

Here is what I believe to be the pertinent code
Controller:

closeView: function(btn, e,opts){             
            var curView = btn.getParent().getParent();
           console.log('From btn: ' + curView + ',' + opts);             
           Ext.Viewport.remove(curView, true);}

View:

Ext.define('SenchaFirstApp.view.DetailView',{
      extend: 'Ext.tab.Panel',
      requires: ['Ext.Toolbar', 'Ext.tab.Panel', 'Ext.form.FieldSet', 'Ext.field.Select'],
      model: ['SenchaFirstApp.model.Details', 'SenchaFirstApp.model.SiteInfo'],
      alias: 'widget.detailview',
//      xtype: 'tabpanel',


    config:
    {
          scrollable: true,
          width: 1500,
          height: 800,
    //      fullscreen: true,
          layout: {type: 'card', animation:{type: 'flip'}},
          centered: true,
          border: 10,
          tabBar: {
              docked: 'top',
          }, 
          formParams: {
        },
      items: 
      [
       {
         //Tab bar 
         xtype:  'tbar',
         title: 'Details View',
             items: [
            {
              xtype: 'closebtn',
              id: 'detailsBtn',
              sourceForm: this
            }]
        },
        {
            title: 'Equipment Monitor',        //first tab
            xtype: 'monitor',
        },                        
        {
            title: 'Site Information',            //second tab
            xtype: 'siteinfo',
        }
    ]                    
} //End Config

I tried to use

Ext.Viewport.remove(Ext.Viewport.getActiveItem, true)

but that also didn’t work. I suspect that has to do with how I created that view maybe. I’m new to Sencha so there could be many things I’m doing wrong so I appreciate the help.

I forgot to mention that, after closing the tab panel, I can’t open it again without refreshing which again I’m sure is due to the view not being destroyed

Answer 1

It appears that the problem was using id’s. I thought that I took them out but I guess not. I took the id’s out and used alias’s and got it working. I’m still not figuring out how to pass the view attached to the button but now

Ext.Viewport.remove(Ext.Viewport.getActiveItem, true)

is working. The true property tells it to destroy the view after removing it.