Results 1 to 5 of 5

Thread: How to detect event hide when panel is defined in viewport

  1. #1
    Sencha User
    Join Date
    May 2010
    Location
    Belgium
    Posts
    216
    Answers
    4
    Vote Rating
    1
      0  

    Default Answered: How to detect event hide when panel is defined in viewport

    Hello,

    I have defined a panel in my viewPort (see below) I'd like to detect this event in my controller but I don't know how to do it?
    Anyone could help me?

    Thanks in advance.

    Code:
    //VIEWPORT
    {               xtype: 'panel',
                   title: 'Trap composition',
    	       hidden: true,
    	       closable: true,
    	       closeAction: 'hide',
    	       id: 'trapsDetailsContainerId',
                    layout: {
    			type: 'hbox',
    			align: 'stretch'
    		},
    		 items: [{
    			xtype: 'metrseriesdetails',
    			id: 'detailsId',
    			flex: 0.38
    			}
               }
    Code:
     
    //MY CONTROLLER
    init: function () {
            var me = this;
            
            this.control({
          		'trapsdetailcontainer': {
          			hide: function(component, eOpts) {
          				//Ext.getCmp('metrSeriesGridId').setHeight(800);
            			alert(Ext.getCmp('trapsDetailsContainerId').hidden);
            			if (Ext.getCmp('trapsDetailsContainerId').hidden == true)
            				Ext.getCmp('metrSeriesGridId').setHeight(800);
            			else if (Ext.getCmp('trapsDetailsContainerId').hidden == false)
            				Ext.getCmp('metrSeriesGridId').setHeight(290);
          		}}

  2. In your controller it looks like you're trying to listen to the hide event of a component with an xtype/alias of "trapsdetailcontainer". But, your panel there is not an extension of your own making with an alias of "trapsdetailcontainer".

    Given the code for your panel you might try using the ID of the panel like:
    '#trapsDetailsContainerId': { hide: function () {...} }

    As an aside, it's advisable to use itemId instead of ID in your components. If you do end up using itemId instead of id the syntax in your control() config will be the same as if you had used id so no change there.

  3. #2
    Sencha Premium User suzuki1100nz's Avatar
    Join Date
    Apr 2011
    Location
    New Zealand
    Posts
    715
    Answers
    45
    Vote Rating
    236
      0  

    Default

    Hi,

    Any reason why your not using the refs config for controllers to find components instead of Ext.getCmp(..)?

    Use the refs config to get the panel and arm a hide listener.

    Code:
    panel.mon( panel, 'hide', this.panelHidden, this);
    define a panelHidden function in the controller.

  4. #3
    Sencha User
    Join Date
    May 2010
    Location
    Belgium
    Posts
    216
    Answers
    4
    Vote Rating
    1
      0  

    Default

    Thansk for your answer.

    I'm not sure to understand your explanation. Ok for function to define in the controller.

    But where do I have to put the piece of code, you've sent me?

  5. #4
    Sencha - Documentation Team slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    6,162
    Answers
    501
    Vote Rating
    257
      1  

    Default

    In your controller it looks like you're trying to listen to the hide event of a component with an xtype/alias of "trapsdetailcontainer". But, your panel there is not an extension of your own making with an alias of "trapsdetailcontainer".

    Given the code for your panel you might try using the ID of the panel like:
    '#trapsDetailsContainerId': { hide: function () {...} }

    As an aside, it's advisable to use itemId instead of ID in your components. If you do end up using itemId instead of id the syntax in your control() config will be the same as if you had used id so no change there.

  6. #5
    Sencha User
    Join Date
    May 2010
    Location
    Belgium
    Posts
    216
    Answers
    4
    Vote Rating
    1
      0  

    Default

    Thanks for your help!

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •