`

Ext.form.ComboBox 属性详解及使用方法介绍和级联使用

阅读更多

Ext.form.ComboBox 属性详解(见注释)及使用方法
定义一个ComboBox:

 

  1. Wayfoon.YearComb = new Ext.form.ComboBox({
  2.     id:'cbid',
  3.     name:'year',//name只是改下拉的名称
  4.     hiddenName:'hyear',//提交到后台的input的name
  5.     width : 80,
  6.     store : Wayfoon.Year,//填充数据
  7.     emptyText : '请选择',
  8.     mode : 'local',//数据模式,local代表本地数据
  9.     readOnly : true,//是否只读
  10.     value : (new Date()).YEAR,//默认值,要设置为提交给后台的值,不要设置为显示文本
  11.     triggerAction : 'all',// 显示所有下列数据,一定要设置属性triggerAction为all
  12.     allowBlank : false,//不允许为空
  13.     valueField : 'value',//值
  14.     displayField : 'text',//显示文本
  15.     editable: false,//是否允许输入
  16.     forceSelection: true,//必须选择一个选项
  17.     blankText:'请选择'//该项如果没有选择,则提示错误信息
  18. });

注意:

id:'cbid',//作用不大,可以自动生成
    name:'year',//name只是改下拉的名称,几乎没有作用
    hiddenName:'hyear',//提交到后台的input的name,重要

使用firebug查看html代码, 以上代码生成html是

  1. <div id="ext-gen279" class="x-form-field-wrap x-trigger-wrap-focus" style="width: 80px;">
  2. <input id="hyear" type="hidden" name="hyear" value="01"/>
  3. <input id="cbid" class="x-form-text x-form-field x-form-focus" type="text" autocomplete="off" size="24" readonly="" style="width: 55px;"/>
  4. <img id="ext-gen280" class="x-form-trigger x-form-arrow-trigger" src="http://www.yibenzhang.com/JSFW/ext/resources/images/default/s.gif"/>
  5. </div>

可以看出一个下列选择 主要由三部分组成 两个input 和一个img。例外  name属性没有起到作用。

combobox中要用到的数据:可以改成数据库读取数据

  1. Wayfoon.Year = new Ext.data.SimpleStore({
  2.     fields : ['value''text'],
  3.     data : [['2008''2008'], ['2009''2009']]
  4. });





如果要下列框级联,在combox 里面加上

  1. listeners:{
  2.             select:{
  3.                 fn:function(combo,record,index) {
  4.                     var store;
  5.                     if(record.get('value')=='广东')
  6.                     {
  7.                         store = Wayfoon.MMS.TypeStore5;
  8.                     }
  9.                     else if(record.get('value')=='广西')
  10.                     {
  11.                         store = Wayfoon.MMS.TypeStore51;
  12.                     }
  13.                     Ext.getCmp('city'+id).clearValue();
  14.                     Ext.getCmp('city'+id).store = store;
  15.                     if(Ext.getCmp('city'+id).view){
  16.                         Ext.getCmp('city'+id).view.setStore(store);
  17.                     }
  18.                     Ext.getCmp('city'+id).enable();
  19.                 
  20.                }
  21.             }
  22.         }


比如省份和城市级联

 

  1. //省份数据
  2. Wayfoon.MMS.TypeStore4 = new Ext.data.SimpleStore({
  3.     fields : ['value''text'],
  4.     data : [['''全部省份'],
  5.         ['广东''广东'], ['广西''广西'], ['黑龙江''黑龙江'],['吉林''吉林'],['陕西''陕西'],
  6.         ['浙江''浙江'],['江苏''江苏'],['四川''四川'],['湖北''湖北'],['新疆''新疆'],
  7.         ['云南''云南'],['安微''安微'],['福建''福建'],['江苏''江苏'],['山东''山东'],
  8.         ['北京','北京']]
  9. });
  10. //城市数据1
  11. Wayfoon.MMS.TypeStore5 = new Ext.data.SimpleStore({
  12.     fields : ['value''text'],
  13.     data : [['''全部城市'], ['深圳市''深圳市'], ['广州市''广州市']]
  14. });
  15. //城市数据2
  16. Wayfoon.MMS.TypeStore51 = new Ext.data.SimpleStore({
  17.     fields : ['value''text'],
  18.     data : [['''全部城市'], ['桂林''桂林'], ['山水''山水']]
  19. });
  20. //省份combo
  21. Wayfoon.Province=function(id){
  22.     var comboProvince=({
  23.         xtype : 'combo',
  24.         //name : 'combo-province',
  25.         readOnly : true,
  26.         triggerAction : 'all',
  27.         allowBlank : true,
  28.         width : 60,
  29.         store : Wayfoon.MMS.TypeStore4,
  30.         value : '',
  31.         //pageSize:10,
  32.         //typeAhead: true,
  33.         //resizable : true,
  34.         hiddenName : 'hComboProv',
  35.         displayField : 'text',
  36.         valueField : 'value',
  37.         mode : 'local',
  38.         emptyText : '选择省份',
  39.         listeners:{
  40.             select:{
  41.                 fn:function(combo,record,index) {
  42.                     var store;
  43.                     if(record.get('value')=='广东')
  44.                     {
  45.                         store = Wayfoon.MMS.TypeStore5;
  46.                     }
  47.                     else if(record.get('value')=='广西')
  48.                     {
  49.                         store = Wayfoon.MMS.TypeStore51;
  50.                     }
  51.                     Ext.getCmp('city'+id).clearValue();
  52.                     Ext.getCmp('city'+id).store = store;
  53.                     if(Ext.getCmp('city'+id).view){
  54.                         Ext.getCmp('city'+id).view.setStore(store);
  55.                     }
  56.                     Ext.getCmp('city'+id).enable();
  57.                 
  58.                }
  59.             }
  60.         }
  61.     });
  62.  return comboProvince;
  63. }
  64. //城市combo
  65. Wayfoon.City=function(id){
  66.     var comboCity=(
  67.     {
  68.         id:'city'+id,
  69.         xtype : 'combo',
  70.         readOnly : true,
  71.         triggerAction : 'all',
  72.         allowBlank : true,
  73.         width : 60,
  74.         store :  new Ext.data.Store(),//Wayfoon.MMS.TypeStore5,
  75.         value : '',
  76.         hiddenName : 'hComboCity',
  77.         displayField : 'text',
  78.         valueField : 'value',
  79.         mode : 'local',
  80.         emptyText : '选择城市' 
  81.      });
  82.     return comboCity;
  83. }
分享到:
评论

相关推荐

    Ext.form表单中各种属性应用详解

    ### Ext.form表单中各种属性应用详解 #### 1. Ext.form.NumberField **Ext.form.NumberField** 是 **Ext.form.TextField** 的一个扩展,它专为处理数字输入而设计,提供了一系列与数值相关的配置选项。 - **...

    Ext.form.field.ComboBox结合Java、JSON实现AutoComplete

    本示例探讨如何利用Ext JS中的`Ext.form.field.ComboBox`组件,结合Java后端和JSON数据格式,来创建这样一个功能。 `Ext.form.field.ComboBox`是Ext JS框架中一个强大的组件,它提供了下拉列表的功能,可以用于创建...

    EXT.form组件

    5. `field`:`Ext.form.Field`是所有表单字段的基础类,提供了一般性的属性和方法,如验证和状态管理。 6. `fieldset`:`Ext.form.FieldSet`是用于组织和分组表单字段的容器,通常包含一个标题和可选的边框。 7. `...

    extjs-Ext.ux.form.LovCombo下拉框

    在EXTJS框架中,`Ext.ux.form.LovCombo`是一种自定义组件,它扩展了基本的`Ext.form.field.ComboBox`,提供了更丰富的功能,尤其是针对多选和联动选择的需求。这个组件通常用于创建具有“lov”(即“Look Up Value”...

    EXT dojochina文本框示例Ext.form.TextField.rar

    8. **组合框模式**:`Ext.form.TextField`还可以扩展为`Ext.form.ComboBox`,实现下拉选择功能,这在需要用户从预定义选项中选择时非常有用。 在压缩包中的`Ext.form.TextField`文件夹,很可能是包含了一个或者多个...

    Ext组合框comboBox带分页

    用EXT来实现下拉框ComboBox 下拉框可以实现分页

    Ext.Store的获取方法

    总结来说,在Ext.js中,获取`Ext.Store`应使用`Ext.getStore`方法,而不是`Ext.getCmp`,因为Store是通过`storeId`在内存中注册和管理的,而不是作为页面上的一个可视组件。同时,Store的设计方式有助于数据的安全性...

    ext多选下拉列表的全选功能实现

    在ExtJS中,可以使用`addListener`或`on`方法来添加事件监听器。 7. **UI反馈**:在用户进行全选或全取消操作后,界面上应有明显的反馈,例如改变全选按钮的文本或图标状态,以反映当前的选择状态。 8. **优化性能...

    Ext4.0 动态修改ComboBox选择项(本地模式)

    var comboBox = Ext.create('Ext.form.ComboBox', { fieldLabel: '选择项', store: ['选项1', '选项2', '选项3'], displayField: 'text', valueField: 'text', }); ``` 2. **添加或删除选项**: 当需要添加...

    EXT核心API详解

    53、Ext.form.DateField类 ………… 45 54、Ext.form.ComboBox类 ……………… 46 55、Ext.form.TimeField类 ………… 47 56、Ext.menu.Menu类 ………………… 50 57、Ext.menu.BaseItem类 …………… 50 58、Ext....

    Extjs4.X下comboboxTree下拉树型菜单,完美支持多选、单选,绝对好用

    Ext.create('Ext.form.field.ComboBox', { fieldLabel: '选择部门', store: Ext.create('Ext.data.TreeStore', { model: 'Department', root: { text: '所有部门', expanded: true, children: [ /* ... *...

    extJs ComboBox级联

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

    解决ext下拉列表全选和去全选功能

    EXTJS的`GridPanel`提供了`selModel`属性来管理选择,你可以通过`selModel.selectAll()`和`selModel.deselectAll()`方法来实现全选和去全选。 标签中的“源码”意味着你需要理解EXTJS的底层工作原理,而“工具”则...

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

    1. **创建一个新的类**:定义一个继承自Ext.form.ComboBox的新类,添加必要的配置和方法来支持多选。 2. **配置store**:设置一个数据存储(Store)来保存可选项,确保每个记录都有一个表示选中状态的字段,如`...

    Ext combo 下拉框级联

    在Web开发中,Ext JS是一个流行的JavaScript框架,它提供了丰富的UI组件,包括级联下拉框(Combobox)。本篇将深入探讨如何在Ext JS中实现级联下拉框的功能。 首先,我们需要了解Ext JS中的Combobox组件。Combobox...

    Ext组件描述,各个组件含义

    - **功能描述**:Component 是所有 Ext 组件的基础类,它定义了所有 Ext 组件都共有的基本属性和方法。 - **主要用途**:作为所有其他组件的基类。 **1.5 Container (Ext.Container)** - **xtype**: `container` -...

    可编辑表格Ext.grid.EditorGridPanel

    以上就是关于Ext.grid.EditorGridPanel的基本介绍和使用方法。在实际开发中,你可以根据项目需求调整配置,实现更多功能,如排序、过滤、分页等。通过深入理解和实践,你将能够熟练掌握这个强大的表格编辑组件。

    用Ext 2.0 combobox 做的省份和城市联动选择框的例程

    在本文中,我们将深入探讨如何使用Ext 2.0的ComboBox组件实现省份和城市联动选择框的功能。Ext是一个强大的JavaScript库,它提供了丰富的用户界面组件,包括ComboBox,用于创建下拉选择框。在这个例程中,我们将看到...

    extjs editgrid combobox 回显

    editor: new Ext.form.ComboBox({ id: "combo_process", store: store_process, valueField: "process_id", displayField: "process_name", forceSelection: true, typeAhead: true, triggerAction: 'all', ...

    EXT2_combobox_form.rar_combobox ext_ext

    EXT2_combobox_form.rar_combobox ext_ext 这个标题暗示我们关注的是一个与EXT2相关的项目,其中包含了关于form表单和combobox的示例。EXT是一个流行的JavaScript库,主要用于构建富客户端应用,特别是Web应用的用户...

Global site tag (gtag.js) - Google Analytics