Question

我将表单面板作为菜单项。问题是它不断失去焦点，像tab这样的标准导航控件不起作用。是否有某种配置使这项工作？请注意，我扩展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事件关闭窗口，它将像菜单一样运行，或者您可以将标题放在底部并放置一个关闭工具并使窗口“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

这是我最终的结果。看起来这就像我使用菜单但使用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.within（me.getEl（））计算结果为true并隐藏我的面板。当用户点击窗口隐藏的其他地方时，我真的需要这个功能。

Extjs 4 - FormPanel里面的菜单 - 焦点问题

2 个答案: