`
wjt276
  • 浏览: 655764 次
  • 性别: Icon_minigender_1
  • 来自: 合肥
社区版块
存档分类
最新评论

ExtJS笔记--Ext.form.ComboBox

阅读更多

 

Ext.form.ComboBox

类全称: Ext.form.ComboBox

继承自于: Ext.form.TriggerField

 

一个提供自动完成、远程加载、分页和许多其他特性的组合框。

 

配置项

1、transform : Mixed 

要转换为组合框的id,DOM节点或者已有的select元素。

 

2、lazyRender : Boolean 

值为true时阻止ComboBox渲染直到该对象被请求(被渲染到Ext.Editor 组件的时候应该使用这个参数,默认为 false)。 

 

3、autoCreate : String/Object 

一个指定的DomHelper配置对象,如果为真则为一个默认对象({tag: "input", type: "text", size: "20", autocomplete: "off"})。

 

4、store : Ext.data.Store/Array 

该组合框绑定的数据仓库(默认为 undefined)。

如是的string值,不要用""引起来,否则就不是object数据,而是字符串,这是一个很巧妙的关键点:把服务器的字符串转化为js的object数据,是不是超级方便

//下面就几种数据以代码举例说明
1.一维数组:["江西","湖北"],值同时赋给ComboBox的value和text
2.二维和多维数组:[["one","bbar","111"],["two","tbar","222"]],第一维和第二维分别赋值给value和text,其他维忽略
3.store类型:包括GroupingStore, JsonStore, SimpleStore.
    //我们分三步走:
     //第一步:提供数据:
         var data=[['湖北','hubei'],['江西','jiangxi'],['安徽','anhui']];
    //第二步:导入到store中:
         var store = new Ext.data.SimpleStore({
             fields: ['chinese', 'english'],
             data : data
        });
     //第三步 :把store托付给comboBox的store
    var combo = new Ext.form.ComboBox({
        store: store,
        displayField:'english',//store字段中你要显示的字段,多字段必选参数,默认当mode为remote时displayField为undefine,当select列表时displayField为"text"
        mode: 'local',//因为data已经取数据到本地了,所以'local',默认为"remote",枚举完
        emptyText:'请选择一个省份...',
        applyTo: 'combo'
    });

5、title : String 

如果提供了,则会创建一个包含此文本的元素并被添加到下拉列表的顶部(默认为 undefined,表示没有头部元素)。

 

6、listWidth : Number 

以象素表示的下拉列表的宽度(默认的宽度与ComboBox的width属性一致)。 

 

7、displayField : String 

组合框用以展示的数据的字段名(如果mode='remote'则默认为 undefined,如果mode = 'local' 则默认为 'text')。 T

 

8、valueField : String 

组合框用以取值的数据的字段名(如果mode='remote'则默认为 undefined,如果mode = 'local' 则默认为 'value')。

 

9、hiddenName : String 

如果指定了, 则会动态生成一个以指定名称命名的隐藏域用来存放值数据(默认为)。

//真正提交时此combo的name,请一定要注意

 

10、hiddenId : String 

If #hiddenName is specified, hiddenId can also be provided to give the hidden field a unique id (defaults to the hiddenName). The hiddenId and combo #id should be different, since no two DOM nodes should share the same id.  

 

11、hiddenValue : String 

Sets the initial value of the hidden field if #hiddenName is specified to contain the selected #valueField, from the Store. Defaults to the configured #value.  

 

 

12、listClass : String 

 

13、selectedClass : String 

下拉列表中选中项应用的CSS类(默认为 'x-combo-selected')。

 

14、triggerClass : String 

应用到触发器身上的CSS样式类。

 

15、shadow : Boolean/String 

值为true或者"sides"为默认效果,"frame"为四方向阴影,"drop" 为右下角方向阴影。 

 

16、listAlign : String 

一个有效的方位锚点值。点击Ext.Element#alignTo查看支持的方向锚点(默认为 'tl-bl')。

 

17、maxHeight : Number 

以象素表示的下拉列表最大高度(默认为 300)

 

18、minHeight : Number 

以象素表示的下拉列表最小高度(默认为 90)

 

19、triggerAction : String 

请设置为"all",否则默认为"query"的情况下,你选择某个值后,再此下拉时,只出现匹配选项,如果设为"all"的话,每次下拉均显示全部选项

 

20、minChars : Number 

在autocomplete和typeahead 被激活之前用户必须输入的字符数(默认为4,如果editable = false则此属性无效)。

 

21、typeAhead : Boolean 

值为true时在经过指定延迟(typeAheadDelay)后弹出并自动选择输入的文本,如果该文本与已知的值相匹配(默认为false)。

 

22、queryDelay : Number 

以毫秒表示的从开始输入到发出查询语句过滤下拉列表的时长(如果mode='remote'则默认为500,如果mode = 'local' 则默认为10)。

 

23、pageSize : Number 

如果值大于0,则在下拉列表的底部显示一个分页工具条,并且在执行过滤查询时将传递起始页和限制参数。 只在 mode = 'remote'时生效(默认为 0)。

 

24、selectOnFocus : Boolean 

值为 ture 时表示字段获取焦点时自动选择字段既有文本(默认为 false)。 

 

25、queryParam : String 

供querystring查询时传递的名字(默认为 'query')。

 

26、loadingText : String 

当读取数据时在下拉列表显示的文本。仅当mode = 'remote'时可用(默认为 'Loading...')。 

 

27、resizable : Boolean 

值为true时则在下拉列表的底部添加缩放柄(默认为false)。

 

28、handleHeight : Number 

以像素表示的下拉列表的缩放柄的高度,仅当resizable = true 时可用(默认为 8)。

 

29、editable : Boolean 

值为false时防止用户直接在输入框内输入文本,就像传统的选择框一样(默认为 true)。

 

30、allQuery : String 

发送到服务器用以返回不经过滤的所有记录的文本(默认为 '')。

 

31、mode : String 

如果ComboBox读取本地数据则将值设为'local'(默认为 'remote' 表示从服务器读取数据)。 

 

32、minListWidth : Number 

以像素表示的下拉列表的最小宽度(默认为70, 如果listWidth的指定值更高则自动忽略该参数)。

 

33、forceSelection : Boolean 

值为true时将限定选中的值为列表中的值,值为false则允许用户将任意文本设置到字段(默认为 false)。

 

34、typeAheadDelay : Number 

以毫秒表示的 typeahead 文本延迟显示量,仅当 typeAhead = true 时生效(默认为 250)。

 

35、valueNotFoundText : String 

当使用 name/value 组合框时,如果调用setValue方法时传递的值没有在仓库中找到,且定义了valueNotFoundText则在字段中显示该值(默认为 undefined)。

 

36、lazyInit : Boolean 

True to not initialize the list for this combo until the field is focused (defaults to true)  

 

37、ext:qtip

attribute which might display other fields from the Store. 

The dropdown list is displayed in a DataView. See Ext.DataView for details. 

 

38、itemSelector : String 

This setting is required if a custom XTemplate has been specified in #tpl which assigns a class other than 'x-combo-list-item' to dropdown list items. A 

 

simple CSS selector (e.g. div.some-class or span:first-child) that will be used to determine what nodes the DataView which handles the dropdown display will 

 

be working with.  

 

39、hideTrigger : Boolean 

为true时隐藏触发元素,只显示基本文本域(默认为false)。

 

40、vtypeText : String 

在当前字段的#vtype中,制定一个错误信息代替默认的(默认为null)。如vtype不设置该项就无效。 

 

41、stripCharsRe : RegExp 

一个JavaScript正则表达式,用于在进行验证该动作之前抽离不需要的内容(默认为null)。

 

42、grow : Boolean 

当值为 true 时表示字段可以根据内容自动伸缩。

 

43、growMin : Number 

当 grow = true 时允许的字段最小宽度(默认为 30) 

 

44、growMax : Number 

当 grow = true 时允许的字段最大宽度(默认为 800)

 

45、vtype : String 

中定义的效验类型名(默认为 null)

 

46、maskRe : RegExp 

一个用来过滤无效按键的正则表达式(默认为 null) 

 

47、disableKeyFilter : Boolean 

值为 true 时禁用输入按键过滤(默认为 false) 

 

48、allowBlank : Boolean 

值为 false 时将效验输入字符个数大于0(默认为 true)

 

49、minLength : Number 

输入字段所需的最小字符数(默认为 0) 

 

50、maxLength : Number 

输入字段允许的最大字符数(默认为 Number.MAX_VALUE) 

 

51、minLengthText : String 

输入字符数小于最小字符数时显示的文本(默认为"The minimum length for this field is {minLength}") 

 

52、maxLengthText : String 

输入字符数小于最小字符数时显示的文本(默认为"The maximum length for this field is {maxLength}") 

 

53、blankText : String 

当允许为空效验失败时显示的错误文本(默认为 "This field is required")。 

 

54、validator : Function 

字段效验时调用的自定义的效验函数(默认为 null)。 如果启用此项,则此函数将在所有基础效验(#allowBlank、#minLength、#maxLength和任意的#vtype)成功之后被调用,调用函数时传递的参数为该字段的值。且此函数的有效返回应为成功时返回 true,失败时返回错误文本。

 

55、regex : RegExp 

一个用以在效验时使用的 JavaScript 正则表达式对象(默认为 null)。如果启用此项,则此正则表达式将在所有基础效验成功之后被执行,执行此正则表达式时传递的参数为该字段的值。如果效验失败,则根据#regexText的设置将字段标记为无效。

 

56、regexText : String 

当#regex被设置且效验失败时显示的错误文本(默认为 "")。

 

57、emptyText : String 

空字段中显示的文本(默认为 null)。注意,只要这个字段是被激活的而且name属性是有被指定的,那么也会发送到服务端。 

 

58、emptyClass : String 

#emptyText使用的CSS样式类名(默认为 'x-form-empty-field')。此类的添加与移除均由当前字段是否有值来自动处理。 

 

59、enableKeyEvents : Boolean 

True表示,为HTML的input输入字段激活键盘事件的代理(默认为false)

 

60、fieldLabel : String 

在组件旁边那里显示的label文本(默认为'')。

分享到:
评论

相关推荐

    Extjs学习笔记(-):ComboBox联动

    本篇学习笔记将深入探讨EXTJS中ComboBox的联动效果,即一个ComboBox的选择会触发另一个ComboBox的数据更新,以此来提供更丰富的交互体验。通过源码解析和工具应用,我们将了解如何构建和实现这种联动效果。 ...

    Extjs学习笔记之三 extjs form更多的表单项

    在ExtJS中,表单(Form)是构建交互式用户界面的关键元素。本篇笔记将深入探讨一些超越普通HTML表单的ExtJS表单项,这些组件提供了更丰富的功能和更好的用户体验。 首先,我们来看日期选择框(DateField)。在日常...

    55links友情链接网址跟踪器

    55links友情链接网址跟踪器,放在桌面,每次直接打开就可以访问55links友情链接交易平台,方便快捷。

    [AB PLC例程源码][MMS_046180]CompactFlash Data Storage.zip

    AB PLC例程代码项目案例 【备注】 1、该资源内项目代码都经过测试运行成功,功能ok的情况下才上传的,请放心下载使用!有问题请及时沟通交流。 2、适用人群:计算机相关专业(如计科、信息安全、数据科学与大数据技术、人工智能、通信、物联网、自动化、电子信息等)在校学生、专业老师或者企业员工下载使用。 3、用途:项目具有较高的学习借鉴价值,不仅适用于小白学习入门进阶。也可作为毕设项目、课程设计、大作业、初期项目立项演示等。 4、如果基础还行,或热爱钻研,亦可在此项目代码基础上进行修改添加,实现其他不同功能。 欢迎下载!欢迎交流学习!不清楚的可以私信问我!

    moore_01_0909.pdf

    moore_01_0909

    FIBR English learning

    FIBR English learning

    [AB PLC例程源码][MMS_042350]How to send-receive SMS text messages using Westermo modem.zip

    AB PLC例程代码项目案例 【备注】 1、该资源内项目代码都经过测试运行成功,功能ok的情况下才上传的,请放心下载使用!有问题请及时沟通交流。 2、适用人群:计算机相关专业(如计科、信息安全、数据科学与大数据技术、人工智能、通信、物联网、自动化、电子信息等)在校学生、专业老师或者企业员工下载使用。 3、用途:项目具有较高的学习借鉴价值,不仅适用于小白学习入门进阶。也可作为毕设项目、课程设计、大作业、初期项目立项演示等。 4、如果基础还行,或热爱钻研,亦可在此项目代码基础上进行修改添加,实现其他不同功能。 欢迎下载!欢迎交流学习!不清楚的可以私信问我!

    OIF_IEEE802.3_liaison_19OCt09.pdf

    OIF_IEEE802.3_liaison_19OCt09

    SerU,做网络安全FTP内容的实验必备

    做网络安全FTP内容的实验必备

    nagarajan_01_1107.pdf

    nagarajan_01_1107

    [AB PLC例程源码][MMS_043879]Programming in SFC and ST Language.zip

    AB PLC例程代码项目案例 【备注】 1、该资源内项目代码都经过测试运行成功,功能ok的情况下才上传的,请放心下载使用!有问题请及时沟通交流。 2、适用人群:计算机相关专业(如计科、信息安全、数据科学与大数据技术、人工智能、通信、物联网、自动化、电子信息等)在校学生、专业老师或者企业员工下载使用。 3、用途:项目具有较高的学习借鉴价值,不仅适用于小白学习入门进阶。也可作为毕设项目、课程设计、大作业、初期项目立项演示等。 4、如果基础还行,或热爱钻研,亦可在此项目代码基础上进行修改添加,实现其他不同功能。 欢迎下载!欢迎交流学习!不清楚的可以私信问我!

    mellitz_3cd_01_0318.pdf

    mellitz_3cd_01_0318

    PyQt6实战派 配套代码

    PyQt6实战派 配套代码

    陕西省省级非物质文化遗产民俗经纬度数据统计表

    陕西省省级非物质文化遗产经纬度数据统计表 统计内容包含以下字段: 1. 项目名称 2. 遗产类别 3. 入选批次 4. 所属地区 5. 申报地区/单位 6. 地理经度 7. 地理纬度 该统计表系统记录了陕西省省级非物质文化遗产的地理空间信息,为文化遗产的数字化保护与研究工作提供了重要的数据支撑。

    ran_3ck_02a_0918.pdf

    ran_3ck_02a_0918

    毕业设计-基于springboot+vue开发的汽车租赁管理系统【源码+sql+可运行】50308.zip

    毕业设计_基于springboot+vue开发的汽车租赁管理系统【源码+sql+可运行】【50308】.zip 全部代码均可运行,亲测可用,尽我所能,为你服务; 1.代码压缩包内容 代码:springboo后端代码+vue前端页面代码; 脚本:数据库SQL脚本 效果图:运行结果请看资源详情效果图 2.环境准备: - JDK1.8+ - maven3.6+ - nodejs14+ - mysql5.6+ - redis 3.技术栈 - 后台:springboot+mybatisPlus+Shiro - 前台:vue+iview+Vuex+Axios - 开发工具: idea、navicate 4.功能列表 - 系统设置:用户管理、角色管理、资源管理、系统日志 - 业务管理:汽车管理、客户管理、租赁订单 3.运行步骤: 步骤一:修改数据库连接信息(ip、port修改) 步骤二:找到启动类xxxApplication启动 4.若不会,可私信博主!!!

    Runcorder - 跑步训练管理系统

    # Runcorder - 跑步训练管理系统 Runcorder 是一款专为跑步爱好者、马拉松运动员及高校体育生设计的本地化跑步训练管理工具,基于 Python 开发,结合 Tkinter 图形界面与强大的数据处理能力,为用户提供从训练记录到数据分析的全方位支持。无论是初学者还是专业跑者,Runcorder 都能帮助你科学规划训练、精准追踪进度,并通过可视化图表直观呈现训练成果,让你的跑步训练更智能、更高效! - **多用户管理**:支持创建、加载和删除用户档案,每个用户的数据独立存储,确保隐私与安全。 - **科学训练记录**:全维度记录跑步数据,包括日期、里程、配速、自评和晨跑标记,支持智能输入校验,避免数据错误。 - **多维数据分析**:通过动态可视化图表展示跑步里程趋势、平均配速曲线,支持自定义 Y 轴范围,帮助用户深入理解训练效果。 - **高阶功能**:提供 4 种科学训练模式(有氧/无氧/混合),支持历史记录修改与删除,数据以 JSON 格式持久化存储,跨平台兼容。

    paatzsch_01_0708.pdf

    paatzsch_01_0708

    开源AI工具下载——AnythingLLMDesktop1.7.3-r2 windows版

    AnythingLLM是一个全栈应用程序,您可以使用流行的开源大语言模型,再结合向量数据库解决方案构建个人本地AI大模型知识库

    mellitz_3ck_02_0519.pdf

    mellitz_3ck_02_0519

Global site tag (gtag.js) - Google Analytics