`
KeepCrazy
  • 浏览: 60581 次
社区版块
存档分类
最新评论

ExtJs之 ComboBox的陷阱

阅读更多
[size=xx-large]
    由于工作需要, 最近开始学习使用extjs框架。花了一个多星期将近两个星期的时间熟悉了一下这个东东,然后就开始干活了。
刚开始用,吃了很多没经验的亏, 比如, 一开始没有用函数封装生成面板的代码, 导致面板只能打开一次, 第二次就打不开了。调试,思考, 然后觉得可能是panel关闭后就被销毁的原因,然后看了一些资料, 也的确如此。还有表单面板的布局等各种问题, 让我花了大量的时间在调试上。在遇到的问题中, 最让人抓狂的是combobox。

    在使用combobox的过程中遇到两个问题:一、提交表单时, combobox传到服务器的值不是期望的valuefield属性,而是displayfield,或者传去一个字符串数组;二,调用它的setValue(val)函数将它初始化时,显示值不是val对应的displayfield, 而是直接将val显示出来。

    刚发现这两个bug时,我一个劲的去检查它的name、id、displayfield、valuefield等属性有没有写错, 结果呢,没结果。被逼无奈,向度娘求助,找到的解决办法是将name属性删除, 添加一个hiddenName属性。于是就这样改了, 还真有效果。API上说hiddenName这个属性可以自动创建一个以hiddenName属性值为name的隐藏表单域。 其实, 我最先想到的解决办法也是添加一个 hidden表单域, 在表单提交前将combo的值手动赋给它。combo组件少的时候这样做也行。

    第二个问题,我想应该是出在setValue()和load的时间先后上:要等到load完成后再setValue(val)才会显示相应的displayfiled。所以我将原来的代码:
store.proxy=new Ext.data.HttpProxy({url:"..."});
store.load();
form.findField("cmbxxx").setValue(val);	

改为
store.proxy=new Ext.data.HttpProxy({url:"..."});
store.on("load", function(){ 
    form.findField("cmbxxx").setValue(val)
});

若在运行的过程中store的proxy属性不变,可正常运行;若store的proxy属性会发生变化,就会报错,我也不知道原因, firefox报出的错误是form.findField("cmbxxx") is null。
再次被向度娘求助,将代码改为:
store.proxy=new Ext.data.HttpProxy({url:"..."});
store.load({
    callback:function(){
        form.findField("cmbxxx").setValue(val);
     }
});


很神奇地对了。我觉得好没理由,因为这两段代码在理论上的效果都是load完以后执行function里的form.findField().setValue(), 为什么前者就不对呢。顺便用一个简单的场景补充下业务背景:学生信息表中有专业和班级属性;通过学生列表可以对每条记录进行修改操作 ;专业和班级的选择是二级联动的combobox:选择专业后加载班级;第二个问题就出在班级信息下拉列表显示值的初始化上。

[/size]
0
0
分享到:
评论
2 楼 FX夜归人 2014-06-17  
这个也是自己设置 Field 值,就想问下:就想别的组建如可表单加载完成自动设置值呢,一直在寻找,可都没有结果,真抓狂
1 楼 xyzpool 2013-09-16  
代码一:
store.proxy=new Ext.data.HttpProxy({url:"..."});
store.on("load", function(){ 
    form.findField("cmbxxx").setValue(val)
});

代码二:
store.proxy=new Ext.data.HttpProxy({url:"..."});  
store.load({  
    callback:function(){  
        form.findField("cmbxxx").setValue(val);  
     }  
}); 

这两段代码在逻辑上不一样,代码二中的callback是异步加载后立即调用回调方法,所以可以设置值成功。而代码一中是在运行代码时注册load方法,所以可能在你注册这个事件的时候你调用的异步请求已经完成结束了。

相关推荐

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

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

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

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

    extjs editgrid combobox 回显

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

    extJs4 ComboBox组合框实例

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

    extjs 自动补全 模拟combobox

    EXTJS并没有直接提供一个名为"自动补全"的组件,但它可以通过模拟Combobox组件来实现这一效果。Combobox是EXTJS中的一个下拉选择框,它可以显示一个下拉列表供用户选择,同时也可以配合自动补全功能。 首先,让我们...

    extjs的ComboBox 2级联动

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

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

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

    ExtJS Combobox二级联动列子

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

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

    在Extjs框架中,ComboBox组件是经常使用的组件之一,它允许用户在一个下拉列表中进行选择。当需要在ComboBox加载数据之后为其赋初值,且这个赋值操作需要在数据加载完成后才能进行,以确保用户体验的正确性时,需要...

    Extjs让combobox写起来简洁又漂亮

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

    extjs3.x combobox智能联想

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

    Extjs6中Combobox实现下拉多选

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

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

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

    extJs ComboBox级联

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

    Extjs4.0 ComboBox如何实现三级联动

    很多网友在问,Extjs4.0 ComboBox如何实现,好在之前用3.x实现过一个三级联动,如今用Extjs4.0来实现同样的联动效果。其中注意的一点就是,3.x中的model:’local’在Extjs4.0中用queryMode: ‘local’来表示,而且在...

    模仿extjs风格写的jquery combobox

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

    extjs4 实现下拉树并支持复选

    在EXTJS4中,实现一个下拉树(Combobox Tree)并支持多选和复选功能,主要是通过自定义组件(Ext.define)来完成的。这个组件继承自EXTJS的Picker字段(Ext.form.field.Picker),并添加了树形结构和复选功能。以下...

    Ext带图标Combobox

    而"Ext带图标Combobox"(Ext IconCombobox)是Ext JS中的一个特色组件,它是Combobox(下拉框)与图标相结合的一种扩展形式,为用户提供了更加直观且美观的交互体验。 **1. Ext Combobox基础** 首先,我们需要了解...

Global site tag (gtag.js) - Google Analytics