Make Ext js menu stay open

Question

I'm showing an ext js menu from a button, the default behaviour is that the menu is hidden when you click outside of it. How can I make it fixed until I click the button again?

xtype: 'button',
    text: 'MyButton',
    menu: {
        xtype: 'menu',
        showSeparator: false,
        items: [
            {
                xtype: 'colorPickerWidget',
                listeners: {
                    colorchange: {
                        fn: me.onColorPickerWidgetColorChange,
                        scope: me
                    }
                }
            }
        ]
    }
}

check your pasted code. There is `me` property or object in your code. Show where it was declared — RomanPerekhrest, Feb 23 '16 at 09:36
There is no code... the colorpickerWidget is simply a widget that is included inside. It could be anything even a simple panel or container. — Jacob, Feb 23 '16 at 09:38
really? So why it throws an error `Uncaught ReferenceError: me is not defined` ?! Show more code to make it clear — RomanPerekhrest, Feb 23 '16 at 09:42

score 0 · Answer 1 · edited May 23 '17 at 11:45

You could use a different approach:

In the onClick event handler of your button create a new window (Ext.Window) that includes your colorPickerWidget. Also check if your window already exists. In this case, hide it.

Upon creating the window make sure that property modal: false (the default value) and set the position of the window (x & y properties). You can get the 2 values from your button (Check this)

Make Ext js menu stay open

1 Answers1