Show and Hide a panel on button click

Tag: panel , show-hide , sencha-touch-2 Author: ss111111000 Date: 2012-04-09

enter image description here

As visible in the image, i have a "Hide" button. On click of the Hide button i want the left panel to be hidden and the right panel to cover 100% of the screen. On doing so, the "hide" button will change to show where the panel comes back to its original position.

For doing the same

xtype:'toolbar',
            docked:'top',
            items:[
                {
                    cls:'hide',
                    xtype:'button',
                    text:"Hide",
                    iconMask:true,
                    ui:'back',
                    id:'hide',
                    handler:function () {

                        var viewWidth = Ext.Viewport.getWindowWidth();
                        alert(viewWidth);
                        desiredWidth = Math.min(viewWidth, 400) - 10;
                        Ext.fly('protocol').setStyle('width', desiredWidth); ;

                    }
                },

I tried the above code to change the width of the panel dynamically but Ext.fly doesn seem to work. What could be the solution to this?

Any help is appreciated.

Other Answer1

A highlight of the left panel will be appreciated.

However, just looking at your image and I am making an assumption here. If all you want to hide is the left panel containing the following

My Assumption of what the left panel is

Then perhaps, what you can do is to do a jQuery toggle after declaring the LEFT and RIGHT panels within a "DIV" html tag for example. See link below.

jQuery API for toggle

Also, if you're using a Javascript library or tool to build this, then you might want to get the source of the Javascript and dive into that.

From my experience, it is a lot easier to write a Javascript function on your own rather than to use something ready built.

comments:

STarting with, yes u are right. Thats the panel i want to hide. I am using Sencha touch 2 to build this and the javascript used in sencha is different than the rest. I am not sure how i could merge the jquery code in the Sencha javascript to hide the panel.

Other Answer2

Ext.getCmp('workItemPanel').hide();

worked well for me.