Extjs 4 - FormPanel裏面的菜單 - 焦點問題

我有表單面板作爲菜單項。問題在於它經常失去焦點，標籤等標準導航控件無法正常工作。是否有某種配置來完成這項工作？注意我擴展Ext.panel.Panel而不是Ext.form.Panel。當我使用第二個我得到origin.on is not a function。這裏是代碼：Extjs 4 - FormPanel裏面的菜單 - 焦點問題

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

來源

2012-10-01 patryks

我已經完成了類似的功能，但以不同的方式。我所做的只是使按鈕生成一個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); 
}

來源

2012-10-01 18:54:40 ViaoV

這可能是一個好主意！你能否提供css你曾經在按鈕下面放置新窗口？ – patryks

啊，你這樣做了。聰明！我還添加了constrainHeader：true以防止窗口出現在屏幕外（因爲我在tbfill之後有我的按鈕）。非常感謝您的回答。 – patryks

這是我結束了。看來，這是完全一樣的，如果我使用的菜單，但使用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並隱藏我的面板。當用戶在窗口隱藏的其他地方點擊時，我真的需要這些功能。

來源

2012-10-02 08:01:16 patryks

Extjs 4 - FormPanel裏面的菜單 - 焦點問題

回答

相關問題