`
珞珈的木野狐
  • 浏览: 9073 次
  • 性别: Icon_minigender_1
  • 来自: 武汉
文章分类
社区版块
存档分类
最新评论

Extjs Combo控件 下拉不能显示全部候选项的解决方法

阅读更多
例子: 在ViewPort.ui.js中有一个combo 控件初始化时,只能显示当前选中项,不能显示全部候选项。
    1、按照网上google到的资料中显示,需要将triggerAction属性设置为"all",设置为"query",或者不设置都不能正常显示全部候选项。刚开始由于是静态绑定数据。设置triggerAction后该问题得到解决。如下:
    item:[
        {
            xtype: 'combo',
            id: "cbdomain",
            x: 60,                                        
            y: 10, 
            width: 120,
            editable: false,
            store:[["telecom","telecom"],["animal","animal"]],
            value:'telecom',
            allowBlank: false,
            enabled:false,
            triggerAction: "all"    
        },{....}
    ]

   2、后由于需求发生改变,需要从后台取数据,动态生成combo 的下拉选项。将store指给一个异步数据操作:getAllDomainstore。发现上述问题重新出现。又只能显示当前选中项了。 在网上反复查找没有找到相应解决方案。后自己实验发现,可通过设置displayField属性,使得该问题得到圆满解决。如下:
    item:[
        {
            xtype: 'combo',
            id: "cbdomain",
            x: 60,                                        
            y: 10, 
            width: 120,
            editable: false,
            store:getAllDomainstore,
            mode: 'remote',
            valueFiled: 'domdesc',
            displayField:'domdesc',
            allowBlank: false,
            enabled:false,
            triggerAction: "all",
            selectOnFocus : true,
            forceSelection : true
        },{.....}
    ]

    可能由于Extjs 中的Combo 采用动态获取数据时,显示字段和值字段并不能事先确定下来。所以动态获取数据的combo必须严格设置displayFiled和valueField属性,否则会影响数据展示结果。

附:
   一、数据操作 store 的定义。
   文件:MainStore.js
   如下:
   var getAllDomainstore = new Ext.data.Store({    
        proxy: new Ext.data.HttpProxy({
            url:'RetrieveData',    
            method:'POST'
        }), 
   
        reader: new Ext.data.XmlReader
        (
            { 
                totalProperty: "pagecount", 
                record: 'domain'                
            },
            [
                {name:"id",type:'int'},
                {name:"domdesc"}
            ]
        )
    }); 

    getAllDomainstore.on('beforeload',function(){  
        Ext.apply(  
        this.baseParams,  
        {  
            webAction:'getAllDomains',
            username:Ext.ComponentMgr.get('cusername').getValue(),
            domain: 'telecom'        
        });  
    }); 

    getAllDomainstore.on('load',onstoreStoreLoad, getAllDomainstore, true);

    function onstoreStoreLoad()
    {   
        if (getAllDomainstore.getCount() > 0)
        {
            // 一点小插曲:动态获取的数据中总会有一个空白记录,有时候空白记录并不是必要的,但是我没有找到清除空白记录的设置,还好无论查询情况如何,这条空白记录总是第一条记录(index = 0)
            // 于是我在每次load的时候,将这条记录强行删除了,如下:
            getAllDomainstore.remove(getAllDomainstore.getAt(0));   
        
            Ext.ComponentMgr.get("cbdomain").setValue('telecom');        
            Ext.ComponentMgr.get("cbdomian_deploy").setValue('telecom');
            Ext.ComponentMgr.get("cbdomain3").setValue('telecom');
            Ext.ComponentMgr.get("cbdomain5").setValue('telecom');
            Ext.ComponentMgr.get("cbdomain6").setValue('telecom');
            Ext.ComponentMgr.get("cbdomain_MF_TraingCase").setValue('telecom');        
        }
    }

    二、载入的时机:
    载入数据:登录成功后。
    文件: ModalForm.js
    如下:
    Ext.Ajax.request({ 
        url   : 'Login', 
        method: 'POST', 
        params:{
            webAction:'login',
            username: curusername, //Ext.ComponentMgr.get('username').getValue(),
            password: ''            
        },                                                
        success: function(response) {
            getAllDomainstore.load({
                params:{
                    webAction:'getAllDomains',            
                    username:Ext.ComponentMgr.get('cusername').getValue(),
                    domain:"telecom"
                }
           });    
    });
分享到:
评论

相关推荐

    Extjs4下拉菜单ComboBox中用Grid显示通用控件

    在EXTJS4中,`ComboBox` 是一个非常常用的组件,它提供了一个下拉选择框的功能。在某些场景下,我们可能需要在下拉菜单中展示更丰富的信息,比如表格数据,这时...在EXTJS4中,这个控件是实现复杂下拉选择功能的利器。

    Extjs6 下拉列表

    这个框架提供了丰富的功能和定制性,使得下拉列表不仅能够简单地显示一组静态选项,还能与数据源进行联动,展示动态加载的数据。 1. **ExtJS6中的ComboBox** - ComboBox是ExtJS中的一个基础组件,它结合了文本...

    Extjs6中Combobox实现下拉多选

    该资源主要展示了在Extjs6中Combobox控件实现下拉选择多个数据的功能

    extjs2.0 下拉列

    在本例中,我们将重点讨论如何在 ExtJS 2.0 中实现下拉列表功能。 下拉列表在 Web 应用程序中非常常见,通常用于提供可选的选项供用户选择。在 ExtJS 中,下拉列表可以通过创建 `Ext.form.ComboBox` 实现。这个组件...

    Extjs之--带分页的lovcombo控件

    在IT行业中,ExtJS是一个广泛使用的JavaScript库,用于构建富客户端Web应用程序。...通过熟练掌握这些知识点,你可以创建出高效且用户体验良好的带分页LOV Combo控件,提升你的ExtJS应用的交互性和实用性。

    Ext combobox 下拉多选框带搜索功能

    在给定的标题“Ext ComboBox 下拉多选框带搜索功能”中,我们关注的是一个特别的ComboBox实现,它不仅允许用户从下拉列表中选择多个选项,还具备搜索功能,使得用户可以更高效地找到他们想要的选择项。 ComboBox在...

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

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

    extJs 文本框后面加上说明文字+下拉列表选中值后触发事件

    通过`valueField`和`displayField`分别指定值字段和显示字段,确保数据能正确绑定到下拉列表的选项上。 此外,下拉列表还绑定了一个`change`事件监听器,当用户选择一个新的值时,会触发`changeValue()`函数。这个...

    Extjs4 combogrid扩展

    描述中提到的“对combo进行扩展,支持grid显示”,意味着我们将在 Combo 的下拉部分嵌入一个 Grid,这样用户在选择时就能看到多个属性的详细信息,而不仅仅是单一的文本标签。这通常涉及到自定义渲染和监听事件,...

    #ComboBox自动补全小技巧(模糊查找)

    在.NET框架下,ComboBox控件是Windows Forms应用程序中常见的组件,用于展示下拉列表供用户选择。本教程将深入探讨如何在C#环境下,利用VS2005为ComboBox添加自动补全或模糊查找功能,这在实际开发中非常实用,能够...

    很不错的ExtJs PPT

    EXTJS中的组件多样,例如下拉列表有两种形式:Select和Combo。Select仅提供预设选项,而Combo则更强大,可以动态加载数据,甚至支持远程获取数据,并且无需刷新页面即可填充内容。EXTJS还提供了一款灵活的时间控件,...

    组合框combo里面change和click的区别

    在VB(Visual Basic)编程中,组合框(ComboBox)是一种常用的控件,它允许用户从一组预定义的选项中进行选择。在处理用户交互时,我们可能会遇到两种常见的事件:`Change` 和 `Click`。了解它们之间的区别是编写...

    Extjs之旅-combox之远程加载数据

    Combox在ExtJS中是一个非常灵活的控件,它可以看作是下拉列表和文本输入框的结合体,用户可以输入文本搜索,也可以从预定义的选项中选择。在大型应用中,数据量可能会非常庞大,直接加载所有数据到客户端并不实际。...

    Ext 将grid渲染到combox

    ### Ext JS 中将 Grid 渲染到 ComboBox 的方法 在 Ext JS 框架中,有时需要将 Grid 控件的数据渲染到 ComboBox 中,这在实际应用中是非常实用且灵活的功能。下面将详细介绍如何利用 Ext JS 的 XTemplate 特性来实现...

    ExtJs xtype一览

    - **`combo` (Ext.form.ComboBox)**: 下拉框组件,提供了一个下拉列表供用户选择。 - **`datefield` (Ext.form.DateField)**: 日期选择项组件,用于输入日期值。 - **`timefield` (Ext.form.TimeField)**: 时间录入...

    extcombox搜索功能

    在ExtJS的ComboBox中,搜索功能是其核心特性之一,允许用户通过输入关键字来过滤下拉列表中的选项,以实现快速定位。这种功能通常称为模糊查询,因为用户可以输入部分关键字,系统会自动匹配并显示与之相关的所有项...

    ExtJS Combobox二级联动列子

    ExtJS的Combobox组件是一种常见的数据输入控件,它提供了下拉列表的功能,用户可以选择列表中的一个选项或者在输入框中自由输入。在实际应用中,我们常常会遇到需要实现二级甚至多级联动的场景,这通常是由于数据的...

    Extjs中常用表单介绍与应用

    本文将详细介绍ExtJS中常用表单组件的创建、应用以及验证和数据绑定等方面的知识,旨在帮助读者深入理解和掌握ExtJS表单的使用方法。 ### 表单面板(FormPanel)的创建 在ExtJS中,表单面板(FormPanel)是创建...

    Extjs xtype集合

    ### Extjs xtype集合详解 #### 一、基本概念与背景 在Extjs开发过程中,`xtype`(扩展类型)是极为重要的一个概念。它实际上是一种类型标识符,用于快速创建特定类型的组件实例。通过使用预定义的`xtype`值,...

    Jxstar系统管理手册V2.0.pdf

    - Combo:下拉选择控件,用于展示一组选项供用户选择; - SelectWin:选择窗口控件,提供一个窗口供用户选择; - ComboWin:下拉窗口控件,类似于Combo,但是它是在一个独立窗口中展示; - Image:图片控件,用于...

Global site tag (gtag.js) - Google Analytics