Extjs 4 - FormPanel inside menu - focus issue - extjs

Question

I have form panel as a menu item. The problem is that it constantly looses focus and standard navigation controls like tab are not working. Is there some kind of config to make this work? Notice i extend Ext.panel.Panel instead of Ext.form.Panel. When i use the second one i get origin.on is not a function. Here is code:
this.tbar = [{
xtype: 'tbfill'
}, {
xtype: 'tbseparator'
}, {
xtype: 'button',
text: 'Wyszukiwanie',
iconCls: 'icon-magnifier',
menu: {
focusOnToFront: true,
items: [{
xtype: 'decision_quicksearch',
title: 'Panel wyszukiwania',
iconCls: 'icon-magnifier',
}]
},
listeners: {
afterrender: function () {
//register this btn to quicksearch panel so we can hide menu when search button is clicked
Ext.apply(this.menu.items.items[0], {
parentComponent: this
});
}
}
}];
And the form:
Ext.define('GSIP.view.decisions.DecisionQuickSearchPanel' ,{
extend: 'Ext.form.Panel',
alias : 'widget.decision_quicksearch',
layout:'anchor',
title:'Wyszukiwanie decyzji',
frame:true,
width:300,
defaults: {
anchor: '100%'
},
style: {
marginLeft: 'auto',
marginRight: 'auto'
},
bodyPadding:20,
initComponent: function() {
this.addEvents('quicksearch');
this.items = this.createForm();
this.buttons = [{
text:'Szukaj',
iconCls:'icon-magnifier',
scope:this,
handler:this.processForm
}],
this.callParent(arguments);
},
createForm:function() {
var items = [{
xtype:'textfield',
fieldLabel:'Znak',
labelWidth:40,
name:'sign'
},{
xtype:'textfield',
fieldLabel:'Numer',
labelWidth:40,
name:'number'
},{
xtype:'textfield',
fieldLabel:'Rok',
labelWidth:40,
name:'suffix',
}];
return items;
},
processForm:function() {
var result = this.buildFilter();
this.fireEvent('quicksearch', result);
this.parentComponent.hideMenu();
},
buildFilter:function() {
var sign = this.down('textfield[name=sign]').getValue();
var number = this.down('textfield[name=number]').getValue();
var suffix = this.down('textfield[name=suffix]').getValue();
var result = new Array();
var res = {
name:'documents.sign',
valuesType:'string',
filterType:'like',
values:[{id:1, value:sign}]
};
result.push(res);
var res = {
name:'documents.number',
valuesType:'string',
filterType:'like',
values:[{id:1, value:number}]
};
result.push(res);
var res = {
name:'documents.suffix',
valuesType:'string',
filterType:'like',
values:[{id:1, value:suffix}]
};
result.push(res);
return result;
}
});

Answer 1

I have accomplished a similar functionality but in a different way.
What I did is simply made the button generate an Ext.Window with no header and limited border and positioned it under the button on open. You can then use MouseOut events to close the window and it will operate just like a menu or you could put the header on the bottom and place a close tool and have the window "pin".
buttonClick: function (btn, e, opts) {
var popUpWindow = Ext.create('Ext.window.Window', {
width: 450,
maxHeight: 400,
resizable: false,
closable: false,
title: 'Report Filters',
headerPosition: 'bottom',
border: false,
draggable: false,
bodyStyle: 'background:white;padding:5px;',
items: [
//...your form
]
});
popUpWindow.showAt(btn.getBox(false).x - 3, btn.getBox(false).y - 7);
}

Answer 2

Here is what i ended up with. It seems that this is exactly as if i was using menu but using method provided by ViaoV
var me = this;
this.popUpWindow = Ext.create('Ext.window.Window', {
resizable: false,
closable: false,
constrainHeader: true,
title: 'Panel wyszukiwania',
iconCls: 'icon-magnifier',
border: false,
draggable: false,
items: [{
xtype: 'decision_quicksearch',
listeners: {
afterrender:function(me) {
Ext.getDoc().on('mousedown', function(o) {
console.log('mousedown');
if (!o.within(me.getEl())) {
me.parentComponent.toggle(false);
}
})
// me.getEl().on('blur', function() {
// console.log('blur');
// me.parentComponent.toggle(false);
// });
}
},
}]
});
this.tbar = [{
xtype:'tbfill'
}, {
xtype:'tbseparator'
}, {
xtype:'button',
text:'Wyszukiwanie',
iconCls:'icon-magnifier',
enableToggle:true,
menu: { },
listeners:{
afterrender:function() {
//register this btn to quicksearch panel so we can hide menu when search button is clicked
Ext.apply(me.popUpWindow, {
parentComponent:this
});
},
toggle: function(btn, pressed) {
if (pressed) me.popUpWindow.showAt(btn.getBox(false).x - 3, btn.getBox(false).y + btn.getBox(false).height);
else me.popUpWindow.hide();
}
}
}];
EDIT: After some testing the solution i ended up with is not a good one. I have comboboxes in my panel which are defined by boundlist as another dom, so when i pick item from cbox !o.within(me.getEl()) evaluates to true and hides my panel. I really need the functionality when the user clicks elsewhere the window hides.