1. #1
    Sencha User
    Join Date
    Sep 2012
    Posts
    5
    Answers
    1
    Vote Rating
    0
    codeMagic is on a distinguished road

      0  

    Default Unanswered: How to pass view with close button

    Unanswered: How to pass view with close button


    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:
    Code:
    Ext.Viewport.remove(curView, true);
    Here is what I believe to be the pertinent code
    Controller:
    Code:
    closeView: function(btn, e,opts){
                   
                    var curView = btn.getParent().getParent();
                   console.log('From btn: ' + curView + ',' + opts);
                   
                   Ext.Viewport.remove(curView, true);
    }
    View:


    Code:
    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
    Code:
    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.

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,327
    Answers
    3540
    Vote Rating
    850
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Code:
    Ext.Viewport.getActiveItem
    Is going to return a function. You need to execute that function:

    Code:
    Ext.Viewport.getActiveItem()
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha User
    Join Date
    Sep 2012
    Posts
    5
    Answers
    1
    Vote Rating
    0
    codeMagic is on a distinguished road

      0  

    Default


    Thanks for your response. That makes sense and I have changed that code. However, when I try to close my detailed view, it closes the main view I have instead of the detailed view. When I tap on a list item to open the detailed view I get the following error
    Uncaught Error: [ERROR][Ext.Container#setActiveItem] Setting activeItem to be a non-inner item

    I've looked up this error and none of the fixes seem to work for me. I apologize for the dumb questions. I think I just need to understand the logic of how it all plays together. I have read all of the docs but I think I'm just missing something.
    Also, I still don't understand how to pass things with the button instance such as the view that the close button is attached to when it is clicked so I can pass additional parameters with it such as fields. I've tried things like
    Code:
    btn.getParent()
    which works on some views but not others. I think I should be able to use a parameter in the view to pass these things with the button but I'm not understanding how.
    Thanks in advance for the help.
    Last edited by codeMagic; 14 Oct 2012 at 11:19 AM. Reason: I am creating an instance like I'm suppose to instead of calling class definition

  4. #4
    Sencha User
    Join Date
    Sep 2012
    Posts
    5
    Answers
    1
    Vote Rating
    0
    codeMagic is on a distinguished road

      0  

    Default Partially fixed

    Partially fixed


    I am able to get the correct views to close now using
    Code:
    Ext.Viewport.remove(Ext.Viewport.getActiveItem(), true);
    in my controller and I don't get the error about setting active item to be a non-inner item anymore after changing the config in my view
    added
    Code:
    xtype: 'tabpanel', fullscreen: true
    and removing
    Code:
    centered: true
    I still get the origina error of
    Uncaught TypeError: Cannot read property 'dom' of null
    when I close my detailed view and when I try clicking on a list item on the main view. Any help would be greatly appreciated.

Thread Participants: 1