1. #1
    Sencha User
    Join Date
    May 2010
    Location
    Belgium
    Posts
    214
    Vote Rating
    1
    Answers
    4
    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
    465
    Vote Rating
    69
    Answers
    21
    suzuki1100nz is just really nice suzuki1100nz is just really nice suzuki1100nz is just really nice suzuki1100nz is just really nice

      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
    214
    Vote Rating
    1
    Answers
    4
    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
    6,062
    Vote Rating
    215
    Answers
    486
    slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of

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

      0  

    Default


    Thanks for your help!

Thread Participants: 2