Facing an issue in hiding the overlay in sencha touch2.0

Question

I need to show an overlay on button click.To achieve this i have written the following code:-

 var miscButton = {
                xtype: 'button',
                iconCls: 'star',
                iconMask: true,
                width: 60,
                margin: '0 0 0 15',
                handler: function(){

                  fPanel.showBy(this);
                }
        };



       var fPanel = Ext.create('Ext.Panel',{
                    layout: 'vbox',
                    width: 150,
                    height: 300,
                    style: 'background-color: #5E99CC;',
                    items: [
                            {
                               xtype: 'list',
                               flex: 1,
                               itemTpl: '{item}',
                               data: [
                                          {item: 'item1'},
                                          {item: 'item2'},
                                          {item: 'item3'},
                                          {item: 'item4'},
                                          {item: 'item5'},
                                          {item: 'item6'},
                                          {item: 'item7'},
                                          {item: 'item8'},
                                          {item: 'item9'},
                                          {item: 'item10'},
                                          {item: 'item11'},
                                          {item: 'item12'},
                               ]                    
                            }
                    ]

        });

When i click on button it is showing the overlay perfectly but after another click it is not able to hide the overlay,like given in the link http://docs.sencha.com/touch/2-0/#!/example/overlays.

I dont understand what is the problem with showBy(). Please help me to solve this problem.

Thanx in advance.

Please update your reference link from Sencha docs, it seems mistyped. And btw, what do you mean by "after another click"? please be more specific — Thiem Nguyen, May 15 '12 at 11:27
another click means second click.At first click button is showing overlay perfectly but when i again click the button overlay is not hiding. — himanshu, May 15 '12 at 11:31
have you tried adding this config: `modal: true` to your fPanel? — Thiem Nguyen, May 15 '12 at 11:33

Saurabh Gokhale · Accepted Answer · 2012-05-15T11:38:27.560

1

To hide an overlay panel, simply make a call

fPanel.hide();

FYI, if you want to be able to hide the panel on mask tap, use this property of panel,

modal: true,
hideOnMaskTap: true

edited May 15 '12 at 11:38

answered May 15 '12 at 11:30

Saurabh Gokhale

53,625
36
139
164

i know abt this method but dont want to use it becoz if i use it overlay will not hide when i click to other buttons. – himanshu May 15 '12 at 11:33
Check the edited answer. May be, you were looking for `hideOnMaskTap` – Saurabh Gokhale May 15 '12 at 11:34
`hideOnMaskTap` only works when `modal` config is set to true – Thiem Nguyen May 15 '12 at 11:36
^ Yes, I know, he may set `modal:true` as well. He wants to hide the overlay on any click, I guess from his question and comment. – Saurabh Gokhale May 15 '12 at 11:38
Re-post your latest code. I want to know what have you written – Saurabh Gokhale May 15 '12 at 11:45
I knew right from the start, this solution of both setting to true **will** work – Saurabh Gokhale May 15 '12 at 11:52
hey roadRunner plz go through the link http://www.sencha.com/forum/showthread.php?205352-How-to-pass-data-among-the-screens-in-sencha-touch2.0 and suggest me something to solve it. – himanshu May 15 '12 at 11:56
@ Thiem Nguyen : What happened? – Saurabh Gokhale May 15 '12 at 12:01
http://stackoverflow.com/questions/10580984/how-to-pass-data-among-the-screens-in-sencha-touch2-0 – himanshu May 15 '12 at 12:13

score 0 · Answer 2 · answered May 15 '12 at 11:48

0

This seems to be a quite "ugly" work-around but it does work:

handler: function(){
  fPanel.setHidden(!fPanel.getHidden());
}

There might be some typing mistakes in that snippet but my idea is to toggle your panel's hidden property

answered May 15 '12 at 11:48

Thiem Nguyen

6,345
7
30
50

modal: true, hideOnMaskTap: true this solution worked buddy thanx. – himanshu May 15 '12 at 11:49
http://stackoverflow.com/questions/10580984/how-to-pass-data-among-the-screens-in-sencha-touch2-0 – himanshu May 15 '12 at 12:14

Facing an issue in hiding the overlay in sencha touch2.0

2 Answers2