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

ExtJS ComboBox 第一次不显示display的值

阅读更多
用ExtJS的ComboBox做下拉列表的时候,发现一个很奇怪的问题,

当你setValue的时候,第一次是不会显示display的值。


[code="js"]function getMailTypeComboBox(){
var mailTypeComboBox = null;
if (!mailTypeStore){
mailTypeStore = new Ext.data.Store({
autoLoad: true,
proxy: new Ext.data.HttpProxy({url: "mailTypeJson!list.action"}),
reader: new Ext.data.JsonReader({
root: "root",
totalProperty: "totalProperty"
}, [
{name: 'categoryId'},
{name: 'mailHandle'},
{name: 'handleName'},
{name: 'registration'}
])
            }
});
}

mailTypeStore.load({params:{limit:10,start:0}});

if (!mailTypeComboBox){
mailTypeComboBox = new Ext.form.ComboBox({
id: "typeID",
fieldLabel: '邮件类型',
hiddenName: 'categoryId',
store: mailTypeStore,
valueField: 'categoryId',
displayField: 'handleName',
typeAhead: true,
readOnly: true,
mode: 'local',
triggerAction: 'all',
blankText: '请选择邮件类型...',
emptyText: '请选择...',
selectOnFocus: true,
width: 200
});
}

return mailTypeComboBox;
}

一直搞不明白为什么,网上找了很久也没有答案,跟同事研究了一段时间也得不到结果


后来还是同事找了一个博文,增加一个监听器就好了

(http://www.cnblogs.com/simonhaninmelbourne/archive/2009/03/06/1404347.html)


修改后的代码


[code="js"]function getMailTypeComboBox(){
var mailTypeComboBox = null;
if (!mailTypeStore){
mailTypeStore = new Ext.data.Store({
autoLoad: true,
proxy: new Ext.data.HttpProxy({url: "mailTypeJson!list.action"}),
reader: new Ext.data.JsonReader({
root: "root",
totalProperty: "totalProperty"
}, [
{name: 'categoryId'},
{name: 'mailHandle'},
{name: 'handleName'},
{name: 'registration'}
]),
listeners: {
                load: function() {
                    mailTypeComboBox.setValue(mailTypeComboBox.getValue());
                }



            }
});
}

mailTypeStore.load({params:{limit:10,start:0}});

if (!mailTypeComboBox){
mailTypeComboBox = new Ext.form.ComboBox({
id: "typeID",
fieldLabel: '邮件类型',
hiddenName: 'categoryId',
store: mailTypeStore,
valueField: 'categoryId',
displayField: 'handleName',
typeAhead: true,
readOnly: true,
mode: 'local',
triggerAction: 'all',
blankText: '请选择邮件类型...',
emptyText: '请选择...',
selectOnFocus: true,
width: 200
});
}

return mailTypeComboBox;
}

增加的监听器

listeners: {

    load: function() {

        mailTypeComboBox.setValue(mailTypeComboBox.getValue());

    }

}
分享到:
评论

相关推荐

    extjs 自动补全 模拟combobox

    Combobox是EXTJS中的一个下拉选择框,它可以显示一个下拉列表供用户选择,同时也可以配合自动补全功能。 首先,让我们理解EXTJS的Combobox组件。Combobox由两部分组成:一个文本输入框和一个下拉列表。文本输入框...

    extjs4 ComboBox 点击下拉框 出现grid效果

    在EXTJS4中,ComboBox是一个常用的组件,它用于创建下拉选择框,通常用于输入框的辅助选择。这个组件提供了一种用户友好的方式来从一组预定义的选项中进行选择。然而,根据你的标题和描述,你似乎遇到了一个特别的...

    extjs editgrid combobox 回显

    在探讨“extjs editgrid combobox 回显”这一主题时,我们主要关注的是如何在ExtJS框架下,实现编辑网格(EditGrid)中的组合框(ComboBox)的值能够正确地回显到网格中。这一功能对于那些需要用户在表单中选择数据...

    ExtJS Combobox二级联动列子

    3. 动态加载:根据第一个Combobox的选中值,向服务器发送请求获取相关联的第二级数据,然后填充到第二个Combobox的Store中。 三、具体步骤 1. 创建Store:定义两个Store,分别用于存储一级和二级的数据,可以使用...

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

    而“下拉多选框”意味着这个ComboBox支持多选模式,用户可以选择多个值而不是仅限于一个。结合“带搜索功能”的描述,我们可以推断出这是一个定制的ComboBox,它增加了实时搜索功能,用户在输入框中输入文本时,下拉...

    extJs ComboBox级联

    ExtJS ComboBox级联是一种在Web应用中常见的交互方式,它允许用户从下拉列表中选择一个值,并且这个选择会影响到另一个ComboBox的选择项,通常用于表示层级关系的数据,比如省份-城市-区县。这种功能在数据筛选、...

    extjs3.x combobox智能联想

    在EXTJS 3.x版本中,Combobox是一个非常实用的组件,它提供了下拉列表功能,用户可以在输入框中输入文字,系统会根据输入内容自动进行模糊匹配,给出相关的建议选项。这种功能在数据筛选、搜索或者选择项较多时特别...

    EXTJS的COMBOBOX级联实现和数据提交VALUE[文].pdf

    EXTJS的ComboBox级联实现是Web应用程序中常见的一种交互方式,尤其在数据表单中用于联动选择。在本文中,我们将深入探讨EXTJS如何实现ComboBox的级联效果,并理解其数据提交VALUE的工作原理。 首先,我们需要创建两...

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

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

    解决Extjs下拉框不显示的问题

    解决ExtJS中ComboBox下拉框不显示的问题,通常需要从组件渲染、Z-Index管理、父容器影响以及事件处理等多个角度进行排查。通过监听组件事件并动态调整样式,可以有效地避免因层叠顺序问题导致的显示异常。同时,良好...

    extjs的ComboBox 2级联动

    ExtJS的ComboBox是一个非常强大的组件,它用于创建下拉选择框。在Web应用程序中,我们经常需要实现二级联动效果,即一个ComboBox的选择会影响另一个ComboBox的显示内容。这在数据关联和筛选场景中尤为常见,例如省份...

    Extjs3.4.0版本 多选下拉框效果支持多选/全选/全不选

    在ExtJS 3.4.0版本中,多选下拉框(Multiselect Combobox)是一种常见的用户界面组件,用于提供多个选项供用户选择。这个功能增强了标准的单选下拉框,允许用户同时选择多个条目,通常通过复选框实现。在描述中提到...

    extJs4 ComboBox组合框实例

    extJs4 ComboBox 代码组合框实例,ComboBox 各个主要参数详细解释

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

    - 如果数据源来自数据库或其他远程服务,应考虑使用延迟加载策略,避免一次性加载大量数据。 - 在处理用户输入时,注意防止SQL注入等安全问题。 - 及时清理不必要的资源,如不再使用的Regex实例。 通过以上步骤,你...

    模仿extjs风格写的jquery combobox

    标题中的“模仿extjs风格写的jquery combobox”指的是一个基于jQuery的下拉选择框组件,它的设计灵感来源于ExtJS库的ComboBox控件。ExtJS是一款功能丰富的JavaScript框架,以其强大的组件化和数据绑定机制著名,而...

    无废话ExtJs 教程十[下拉列表:Combobox]

    在ExtJS中,下拉列表(Combobox)是常见的组件之一,它结合了输入框和下拉菜单的功能,允许用户进行选择或自由输入。本教程将深入探讨ExtJS中的Combobox组件,包括其基本用法、配置选项、事件处理和自定义功能。 1....

    Extjs6中Combobox实现下拉多选

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

    Extjs让combobox写起来简洁又漂亮

    其中,Extjs的combobox组件是一个常用的UI控件,它集成了文本输入和下拉列表,允许用户在有限的空间内快速选择一个选项。 在Extjs中,创建一个简洁又漂亮的combobox组件主要包括以下几个关键点: 1. 创建自定义...

    Extjs中ComboBox加载并赋初值的实现方法

    通过上述方法,我们能够确保Extjs中ComboBox组件在加载数据后正确显示初始选中的值。这不仅可以增强界面的友好性,还可以避免因数据未及时加载而导致的程序错误。在实际应用中,合理处理异步数据加载和用户界面交互...

    extjs ComboBox联动

    Extjs4---combobox联动实例

Global site tag (gtag.js) - Google Analytics