1. #1
    Sencha User
    Join Date
    May 2010
    Location
    Belgium
    Posts
    204
    Answers
    3
    Vote Rating
    1
    marxan is on a distinguished road

      0  

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

    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
    Touch Premium Member suzuki1100nz's Avatar
    Join Date
    Apr 2011
    Location
    New Zealand
    Posts
    446
    Answers
    21
    Vote Rating
    62
    suzuki1100nz is a jewel in the rough suzuki1100nz is a jewel in the rough suzuki1100nz is a jewel in the rough suzuki1100nz is a jewel in the rough

      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
    204
    Answers
    3
    Vote Rating
    1
    marxan is on a distinguished road

      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 - Support Team slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    4,889
    Answers
    366
    Vote Rating
    175
    slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold

      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
    204
    Answers
    3
    Vote Rating
    1
    marxan is on a distinguished road

      0  

    Default


    Thanks for your help!

Thread Participants: 2