Show and Hide a panel on button click

Question

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.

Zac Zac · Accepted Answer · 2012-04-26T03:36:11

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.

Show and Hide a panel on button click

2 Answers