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

Question

我有表单面板作为菜单项。问题是它经常失去焦点，并且像选项卡这样的标准导航控件不起作用。有没有某种配置来使这项工作？请注意，我扩展了 Ext.panel.Panel 而不是 Ext.form.Panel。当我使用第二个时，我得到origin.on is not a function.这是代码：

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

Answer 1

我已经完成了类似的功能，但方式不同。我所做的只是让按钮生成一个没有标题和有限边框的Ext.Window，并将其放置在打开的按钮下方。然后，您可以使用MouseOut事件关闭窗口，它将像菜单一样运行，或者您可以将标题放在底部并放置一个关闭工具并让窗口"固定"。

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

这是我最终得到的。似乎这与我使用菜单但使用 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();
        }
    }
}];

编辑：经过一些测试，我最终得到的解决方案不是一个好的解决方案。我的面板中有组合框，它们由边界列表定义为另一个 dom，因此当我从 cbox 中选取项目时！o.within（me.getEl（）） 计算结果为 true 并隐藏我的面板。当用户单击窗口隐藏的其他地方时，我真的需要该功能。