How to create ExtJS5 draggable window?

Question

I need to create a window that will be always visible unless it is made hidden by clicking on an icon. Clicking on that icon a second time will make the window re-appear. The icon needs to be stuck at the top left corner of the window and outside of the window. I am planning to create a window without title and with two items 1: Button to hide/show and 2: the actual panel. The fiddle can be found at: https://fiddle.sencha.com/#fiddle/bi7 I need to make the portion behind the button transparent. Is there a way to do that?

I think you have to work with css.. when you click show change the css to make panel visible inorder to make it show...similarly change css to hide .. when doing these dont do any changes for button — Surya Prakash Tumma

Lesley.Oakey Lesley.Oakey · Accepted Answer · 2014-10-23T13:09:46

You would do this manually, ideally with CSS classes. The following is crude, using inline styling, but works. Add the following listeners attribute to your button

{
    xtype: 'button',
    ...
    listeners: {
        click: function(){
            var panel = Ext.getCmp("togglePanel");
            if (panel.el.dom.style.display == "none") {
                 panel.el.dom.style.display = "block";
            } else {
                 panel.el.dom.style.display = "none";
            }
        }
     }
 }

and include the id 'togglePanel to your green panel containing the slider

id: "togglePanel",

Clicking the button will show/hide your panel

How to create ExtJS5 draggable window?

1 Answers