0

メニュー項目としてフォームパネルがあります。問題は、常にフォーカスが失われ、タブなどの標準的なナビゲーション コントロールが機能しないことです。これを機能させるための何らかの構成はありますか？Ext.form.Panel の代わりに Ext.panel.Panel を拡張していることに注意してください。2番目のものを使用すると、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;
    }
});
4

2 に答える 2

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);
}
于 2012-10-01T18:54:40.640 に答える