'ExtJs : Container must not receive child item's click events and Process only events on container

I want to process mouse up/down events in the empty area(marked in color) which belongs to container. As shown in the picture, container has menu bar to the left and window standard buttons to the right. Expected behavior is : click on menu items/buttons must trigger their event handlers and click on empty area(marked in color) must be processed by container to support window drag.

I tried this in container:

listeners: {
    mousedown: {
        fn: function() {
            _mousepressed = true;
        },
        element: 'el'
    },
    mouseup: {
        fn: function() {
            _mousepressed = false;
        },
        element: 'el'
    },

When clicked on menu item button, the event is first coming to container's mouseup handler and then button handler is called. Instead , I expect not to receive event in container when child items are clicked. I need clicks on empty areas in container.

Is there any extjs way to identify events on parent container and not on its chid items?

enter image description here



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source