`
atian25
  • 浏览: 468780 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

ExtJS Menu嵌套combo等控件时,自动隐藏/遮盖等bug的解决方案

阅读更多

2010-07-08补充:

DateField隐藏的解决方案,详见本文底部.

 

2010-07-04补充:

ExtJS3.2的combo文档中更新的一种新的解决方案,详见本文底部.

 

 

续前文: http://atian25.iteye.com/blog/431545

 

上篇只解决了combo下拉框被遮盖的问题,但是如果选择como的某项,或者点击下拉菜单就会自动隐藏menu,如下图.

 

 

初步猜测是该item的点击被判断不属于menu的范围,所以隐藏掉了.

翻了半天的源码,终于找到此句:

   // Ext.menu.MenuMgr
   function onMouseDown(e){
       if(lastShow.getElapsed() > 50 && active.length > 0 && !e.getTarget(".x-menu")){
           hideAll();
       }
   }

 

觉得应该是这个class的问题,于是给combo加个样式就搞定了,如下源码:

var combo = new Ext.form.ComboBox({
    fieldLabel: '修复后的Combo',
    store: data,
    mode: 'local',
    triggerAction:'all',
    /*
     * 关键点
     * 1. x-menu使combo在选择的时候不会隐藏掉menu,看Ext.menu.MenuMgr.onMouseDown源码即知
     * 2. x-menu里面的"z-index: 15000;",因为menu里面的layer的z-index是15000,则这里大于15000即可.. 
     * 3.因为这个cls已经有个z-index,所以前文中我们自定义的那个class可以去掉了
     */
    listClass:' x-menu '
  });
 

 

完整的测试代码和截图如下:


Ext.onReady(function(){
  Ext.BLANK_IMAGE_URL = '/images/s.gif';
  Ext.QuickTips.init();
  fixMenuBug()
});

function fixMenuBug(){
  //Defined combo
  var data = [];
  for(var i=0;i<20;i++){
    data.push('option'+i);
  }
  var combo = new Ext.form.ComboBox({
    fieldLabel: '修复后的Combo',
    store: data,
    mode: 'local',
    triggerAction:'all',
    /*
     * 关键点
     * 1. x-menu使combo在选择的时候不会隐藏掉menu,看Ext.menu.MenuMgr.onMouseDown源码即知
     * 2. x-menu里面的"z-index: 15000;",因为menu里面的layer的z-index是15000,则这里大于15000即可.. 
     */
    listClass:' x-menu '
  });
  var bugcombo = new Ext.form.ComboBox({
    fieldLabel: '菜单被遮盖住的Combo',
    store: data,
    mode: 'local',
    triggerAction:'all',
    listClass:''
  });
  var bugcombo2 = new Ext.form.ComboBox({
    fieldLabel: '点击下拉滚动条/选择子项会隐藏的Combo',
    store: data,
    mode: 'local',
    triggerAction:'all',
    listClass:' comboInMenu '
  });
  var combo2 = new Ext.form.ComboBox({
    fieldLabel: 'fixedCombo2',
    store: ['选我,不隐藏'].concat(data),
    value:'选我,不隐藏',
    mode: 'local',
    triggerAction:'all',
    listClass:' x-menu '
  });
  var noHideText=new Ext.form.TextField({
    value: '点我,不会被隐藏',
    //关键点:让组件被选中的时候不隐藏掉menu
    hideOnClick:false
  });
  var hideText=new Ext.form.TextField({
    value: '点我,隐藏'
  });
  var form = new Ext.FormPanel({
    labelWidth: 250,
    frame:true,
    width: 550,
    height:150,
    items: [
      {xtype:'textfield',fieldLabel:'输入框'},
      bugcombo,
      bugcombo2,
      combo
    ],
    buttons: [{text: 'Save'},{text: 'Cancel'}]
  });
  
  var btn = new Ext.SplitButton({
    renderTo: document.body,
    text: 'Options',
    menu: new Ext.menu.Menu({
      items: [
        form,combo2,noHideText,hideText,
        /* 2.2版本中需要对Adapter的第二个参数中加入hideOnClick:false
        new Ext.menu.Adapter(form,{hideOnClick:false}),
        new Ext.menu.Adapter(combo2,{hideOnClick:false}),
        new Ext.menu.Adapter(noHideText),
        new Ext.menu.Adapter(hideText),
        */
        {text:'点击我,不隐藏',hideOnClick:false},
        {text:'点击我,2.0隐藏,3.0不隐藏'}
      ]
    })
  });
}
 

 

2010-07-08 更新:

 

DateField隐藏的解决方法:

因为DF里面还有个datemenu,所以需要设置该属性allowOtherMenus: true

 

var dateField = new Ext.form.DateField({
    fieldLabel:'日期1',
    menu: new Ext.menu.DateMenu({
      hideOnClick: false,
      allowOtherMenus: true
    })
  })
 

2010-07-04 更新:

ExtJS 3.2.0 文档中提到的一种解决方法:

 

getListParent() : void    ComboBox
Returns the element used to house this ComboBox's pop-up list. Defaults to the document body. A custom implementation...

Returns the element used to house this ComboBox's pop-up list. Defaults to the document body.
A custom implementation may be provided as a configuration option if the floating list needs to be rendered to a different Element. An example might be rendering the list inside a Menu so that clicking the list does not hide the Menu:

var store = new Ext.data.ArrayStore({
    autoDestroy: true,
    fields: ['initials', 'fullname'],
    data : [
        ['FF', 'Fred Flintstone'],
        ['BR', 'Barney Rubble']
    ]
});

var combo = new Ext.form.ComboBox({
    store: store,
    displayField: 'fullname',
    emptyText: 'Select a name...',
    forceSelection: true,
    getListParent: function() {
        return this.el.up('.x-menu');
    },
    iconCls: 'no-icon', //use iconCls if placing within menu to shift to right side of menu
    mode: 'local',
    selectOnFocus: true,
    triggerAction: 'all',
    typeAhead: true,
    width: 135
});

var menu = new Ext.menu.Menu({
    id: 'mainMenu',
    items: [
        combo // A Field in a Menu
    ]
});
  • 大小: 32.1 KB
  • 大小: 49.8 KB
分享到:
评论
4 楼 kingdy13 2010-02-17  
问题解决了,饮水思源,特地完成测试后来这回复,感谢高手的分享。
3 楼 yy67906927 2010-01-15  
晕了,3.1中下拉还是会被挡住.
2 楼 atian25 2010-01-14  
菜鸟的弟弟 写道
太感谢啦~~~
最近我也出现这个问题,正愁找不到方法呢。

另:请问如何看Ext.menu.MenuMgr中的代码啊,我怎么在3.0的api中找不到。。。
    本人还在学习中,请见谅。


ext-3.0.0\src\widgets\menu\MenuMgr.js
1 楼 菜鸟的弟弟 2010-01-13  
太感谢啦~~~
最近我也出现这个问题,正愁找不到方法呢。

另:请问如何看Ext.menu.MenuMgr中的代码啊,我怎么在3.0的api中找不到。。。
    本人还在学习中,请见谅。

相关推荐

    EXTJS 自定义combo控件

    xtype : 'jxcombo' //配置项 jxValueField:要获取值得字段名称,默认null //公共方法 getJXValue():返回自定义字段的值,如果没有自定义字段,则等价Ext.form.Combo类的getValue()方法

    extjs3.2、3.3 时间控件 日期控件扩展

    总之,“extjs3.2、3.3 时间控件 日期控件扩展”是关于如何在ExtJS 3.x版本中使用和自定义日期及时间选择器的知识点,涵盖了基本使用、扩展开发、实际应用等多个方面。通过深入理解这些概念,开发者可以创建出更加...

    extjs5.1多文件上传控件

    在版本5.1中,这个库提供了一个完善的文件上传解决方案,尤其适用于需要大量交互和复杂UI设计的应用。 描述中提到的“NULL”意味着没有具体的描述,但我们可以通过标题和标签来推测这个控件的特性。博客链接指向了...

    ExtJs:收集基于ExtJs扩展的一些控件

    这些控件的引入有助于开发者更好地应对不同业务场景,提供更专业化的解决方案。 再来看“ExtJs:收集基于ExtJs扩展的一些控件3”。这个文件可能包含了一些最新的或者实验性的控件,可能涉及到前沿的技术,如响应式...

    Extjs 5 日期时间控件

    在ExtJS 5中,日期时间控件是开发用户界面时经常会用到的组件,它允许用户选择和输入日期及时间值。本篇文章将深入探讨ExtJS 5的日期时间控件及其特点。 首先,ExtJS 5 的日期时间控件(DateTimeField)结合了日期...

    extjs日期+时间控件

    在ExtJS中,日期和时间控件是非常常用的功能,尤其在处理数据输入和展示时。本文将深入探讨基于ExtJS 4.1版本的日期时间控件及其相关知识点。 1. **ExtJS 4.1**:这是ExtJS的一个主要版本,发布于2012年,提供了...

    extjs时间控件精确秒

    在EXTJS这个强大的JavaScript框架中,时间控件是开发者经常使用的组件之一,尤其在构建复杂的Web应用程序时。EXTJS的时间控件允许用户选择或输入时间,通常以小时、分钟和秒为单位,提供了用户友好的界面和丰富的...

    EXTJS时间控件年月日时分秒

    在EXTJS中,时间控件是常见的交互元素,允许用户选择特定的时间,包括年、月、日、时、分和秒。这篇文档将深入探讨EXTJS中的时间控件及其使用方法。 首先,EXTJS时间控件的设计理念是为了提供用户友好的时间选择...

    Extjs6 日期时间控件

    EXTJS6的日期控件具有多种配置选项,例如`format`用于定义日期的显示格式,`minValue`和`maxValue`用于限制可选的日期范围,以及`disabledDates`和`disabledDays`来禁用特定日期等。 时间控件(TimeField)则是在...

    extjs 年份控件和年月控件(使用看软件说明)

    因为extjs的bug(3月30如果选择2月将自动变成3月)。所以需要修改monthField中safeParse方法: else if ("Y-m"==format) { // set time to 12 noon, then clear the time var parsedDate = Date.parseDate(value + ...

    extjs3.0 日期时间控件

    在标签中提到的"扩展日期控件"可能指的是DateTimeField组件在ExtJS中的扩展功能,比如自定义格式化、验证规则、事件监听等。这些扩展功能增强了标准日期时间选择器的灵活性和可定制性,以满足不同项目的需求。 在...

    ExtJs日期时间选择控件

    日期时间选择控件可以轻松地与ExtJs的其他组件(如表格、表单等)集成,提供完整的数据输入解决方案。例如,可以将控件作为表单字段的渲染器,或者直接在表格单元格中使用。 10. **性能优化** 考虑到大型应用的...

    extjs 微调控件,时间微调控件,微调,javascript 微调

    4. **联动功能**:可以将微调控件与其他组件联动,例如与时间字段配合,当微调数值变化时自动更新时间显示。 5. **扩展功能**:如果你需要更复杂的行为,可以创建一个新的类,继承自Spinner,并覆盖或添加必要的...

    extjs网页控件开发

    2. **数据绑定**:通过ExtJS的双向数据绑定机制,使得视图(控件)与模型之间的数据自动同步。 3. **事件处理**:利用ExtJS的事件系统,如change事件,来监听用户的选择并触发相应的行为。 4. **Store配置**:配置...

    extjs扩展年度控件,EXTJS里的时间控件的年度重写

    然而,有时开发人员可能需要对这些控件进行自定义,以满足特定业务需求,比如在本例中,我们需要扩展EXTJS的时间控件以实现“年度”选择的功能。 EXTJS的Date Picker默认提供了日、月、年的选择,但可能并不完全...

    ExtJs6.2中包含文本及时间选择框的自定义查询控件的解决方案

    ### ExtJs 6.2 中包含文本及时间选择框的自定义查询控件解决方案 在ExtJs 6.2框架中实现一个具有文本输入与时间选择功能的自定义查询控件是一个常见但实用的需求。本篇文章将详细介绍如何设计并实现这样一个控件,...

    extjs6 datetimefield 扩展时间控件 分时秒控件

    在给定的场景下,"extjs6 datetimefield 扩展时间控件 分时秒控件"描述了一个针对EXTJS6的`datetimefield`组件的增强,目的是增加对小时、分钟和秒钟的单独选择功能。 EXTJS6是Sencha公司推出的一个强大的...

    extjs 时间控件

    ExtJS 的时间控件也支持响应式布局,可以根据屏幕大小自动调整其显示方式,确保在各种设备上都有良好的用户体验。 9. **与服务器端的交互** 选定的时间可以通过AJAX请求发送到服务器,进行验证或存储。在提交表单...

    extjs6 日期时间控件

    extjs 6 的日期时间控件,不能用我铲脸

    extjs 4.0 日期时间控件

    在标题中提到的"extjs 4.0 日期时间控件",是指ExtJS 4.0框架中的DateTime组件,这是一个用于在Web应用中输入和显示日期与时间的控件。 描述中提到了这个控件是经过修改的中文版本。原版可能是英文,但通过定制,...

Global site tag (gtag.js) - Google Analytics