Extjs 4-表单面板内部菜单-焦点问题

我将窗体面板作为菜单项。问题是，它不断地失去焦点，像tab这样的标准导航控件不起作用。是否有某种配置使其工作？请注意，我扩展了Ext.panel.panel而不是Ext.form.panel。当我使用第二个时，我得到的

origin.on不是一个函数

。以下是代码：

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
            });
        }
    }
}];

及表格:

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;
    }
});

---

我已经完成了类似的功能，但方式不同。 我所做的只是让按钮生成一个

Ext.Window

，没有标题和有限的边框，并将其放置在打开按钮下。然后，您可以使用

MouseOut

事件关闭窗口，它将像菜单一样运行，或者您可以将标题放在底部，放置一个关闭工具，让窗口“锁定”

---

这就是我的结局。看起来，这就像我使用的是菜单，但使用的是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();
        }
    }
}];

---

编辑：经过一些测试，我最终得到的解决方案不是一个好的解决方案。我的面板中有组合框，它们由boundlist定义为另一个dom，所以当我从cbox中选择项时！o、 在（me.getEl（））中，计算结果为true并隐藏我的面板。当用户单击窗口隐藏的其他位置时，我确实需要该功能。

这可能是个好主意！你能提供你用来在按钮下面放置新窗口的css吗？啊，你是这样做的。聪明！我还添加了constraintheader:true以防止窗口出现在屏幕外（因为我在tbfill之后有我的按钮）。非常感谢你的回答。

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();
        }
    }
}];