`
kalogen
  • 浏览: 880179 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

Ext.form.ComboBox常用属性详解

    博客分类:
  • EXT
 
阅读更多

js 代码

  1. var combo = new Ext.form.ComboBox({  
  2.     store : new Ext.data.SimpleStore({  
  3.         fields : ['value''text'],  
  4.         data : [['1001''小儿迪巧'], ['1002''成人迪巧'], ['1003''秀源']]  
  5.     }),  
  6.     hiddenName:'product_code',//提交到后台的input的name 
  7.     mode:'local',//数据加载模式,'local'本地加载,'remote'远程加载
  8.     valueField : 'value',   //值字段  
  9.     displayField : 'text',  //显示字段  
  10.     value:'1001',       //默认值,要设置为提交给后台的值,不要设置为显示文本  
  11.     emptyText : '请选择',  //提示信息  
  12.     mode : 'local'//数据加载模式,local代表本地数据  
  13.     triggerAction : 'all',  // 显示所有下列数据,一定要设置属性triggerAction为a  
  14.     readOnly : false,   //只读,为true时不能编辑不能点击  
  15.     editable:false,     //是否可编辑,为true时可以手写录入  
  16.     pageSize:0      //当设置大于0时会显示分页按钮
  17. }) 


如果在EditorGrid中使用Combo控件,编辑完后会发现显示的值都是编码而不是显示值,可以ColumnMode中加入renderer方法对显示值进行修改。下面是出自Combo源码里的例子。

js 代码
  1. Ext.util.Format.comboRenderer = function(combo){  
  2.     return function(value){  
  3.         var record = combo.findRecord(combo.{@link #valueField}, value);  
  4.         return record ? record.get(combo.{@link #displayField}) : combo.{@link #valueNotFoundText};  
  5.     }  
  6. }  
  7.   
  8. // create the combo instance  
  9. var combo = new Ext.form.ComboBox({  
  10.     {@link #typeAhead}: true,  
  11.     {@link #triggerAction}: 'all',  
  12.     {@link #lazyRender}:true,  
  13.     {@link #mode}: 'local',  
  14.     {@link #store}: new Ext.data.ArrayStore({  
  15.         id: 0,  
  16.         fields: [  
  17.             'myId',  
  18.             'displayText'  
  19.         ],  
  20.         data: [[1, 'item1'], [2, 'item2']]  
  21.     }),  
  22.     {@link #valueField}: 'myId',  
  23.     {@link #displayField}: 'displayText'  
  24. });  
  25.   
  26. // snippet of column model used within grid  
  27. var cm = new Ext.grid.ColumnModel([{  
  28.        ...  
  29.     },{  
  30.        header: "Some Header",  
  31.        dataIndex: 'whatever',  
  32.        width: 130,  
  33.        editor: combo, // specify reference to combo instance  
  34.        renderer: Ext.util.Format.comboRenderer(combo) // pass combo instance to reusable renderer  
  35.     },  
  36.     ...  
  37. ]); 

Combo使用起来非常方便,还有很多属性我们平时没有用到,都设有默认值,比如录入几个字后进行数据查询、显示模板,下拉显示高度等。如果对它的展示内容或方式不满意,可以修改属性对其进行扩展。源码内注释非常详细,可以根据提示的信息对它进行改造。

 

 

当要设置禁用的时候用

Ext.form.ComboBox.setDisabled(true)

启用:

Ext.form.ComboBox.setDisabled(false)

 

分享到:
评论

相关推荐

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

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

    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....

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

    ### Ext组件概述与详解 #### 一、Ext基础组件 **1.1 Box Component (Ext.BoxComponent)** - **xtype**: `box` - **功能描述**:Box Component 是一个非常基本的 Ext 组件,主要用于定义具有边框和其他布局属性的...

    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', ...

    extjs帮助文档pdf版

    ### ExtJS核心API详解 #### 1. Ext 类 (P.2) - **概述**:`Ext` 是 ExtJS 的核心命名空间,包含了全局的方法和属性。 - **用途**:提供了一个统一的入口来访问 ExtJS 库的功能,如创建组件、管理事件等。 - **常用...

    Extjs fieldset两行两列布局

    new Ext.form.ComboBox({ // 创建ComboBox组件 hiddenName: 'ns', fieldLabel: '', triggerAction: 'all', store: new Ext.data.SimpleStore({ fields: ['name', 'code'], data: [['', '1'], ['', '0']] }),...

    Ext.data专题

    ### Ext.data专题详解 #### 一、Ext.data概述 **Ext.data** 是一个重要的JavaScript库组件,用于处理数据传输和管理。它定义了一系列的核心概念,包括 **Store**、**Reader** 和 **Proxy**,这些都是Ext.data的...

    ext控件form相关配置

    ### ext控件Form相关配置详解 #### 一、引言 在现代Web开发中,Ext JS作为一款功能强大且灵活的前端框架,被广泛应用于构建复杂的企业级应用程序。其中,`Form`控件是Ext JS中一个非常重要的组成部分,它为开发者...

    extjs控件列表

    **Ext.form.ComboBox** - **描述**: 下拉框,提供一个可滚动的列表供用户选择。 - **用途**: 选择国家、地区、类别等。 **Ext.form.DateField** - **描述**: 日期选择项,用户可以输入或选择日期。 - **用途**: ...

    Ext带图标Combobox

    var combo = new Ext.form.ComboBox({ store: store, displayField: 'text', valueField: 'id', tpl: template, typeAhead: true, mode: 'local', triggerAction: 'all', width: 300 }); ``` 以上代码创建...

    Extjs xtype集合

    - **`Class`**: `Ext.form.ComboBox` - **描述**: 下拉框组件。 4. **`datefield`:** - **`xtype`**: `datefield` - **`Class`**: `Ext.form.DateField` - **描述**: 日期选择字段。 5. **`timefield`:** ...

    Ext与后台数据库交互

    ### Ext与后台数据库交互知识点详解 #### 一、Ext中常用的类 在Ext框架中,为了更好地处理数据和用户界面的交互,引入了一系列强大的类来简化开发过程。 ##### 1.1 Ext.data `Ext.data`是Ext框架的核心模块之一...

    Ext2.0 form使用实例

    Ext2.0 Form 使用实例详解 在Web应用开发中,ExtJS库提供了强大的用户界面组件,其中FormPanel是用于创建复杂表单的重要组件。本文将详细介绍Ext2.0 FormPanel的使用,包括创建方法、控件配置以及布局管理。 首先...

    学习ExtJS Panel常用方法

    - `combo`: `Ext.form.ComboBox` - `datefield`: `Ext.form.DateField` - `displayfield`: `Ext.form.DisplayField` - `field`: `Ext.form.Field` - `fieldset`: `Ext.form.FieldSet` - `hidden`: `Ext.form....

    ext 2.0 form demo

    EXT 2.0 Form Demo 知识点详解 EXT是一个流行的JavaScript库,它专注于构建功能丰富的、用户界面复杂的Web应用程序。EXT 2.0版本在当时是一个重要的里程碑,引入了许多新特性和改进,特别是在表单处理方面。在这个...

    Extjs控件属性(详细版)

    #### 四、Ext.form.ComboBox 控件属性 **Ext.form.ComboBox** 提供了一个可下拉的选择列表,常用于从预定义的选项中选择值。 - **displayField**:设置显示在下拉列表中的字段名称。 - **editable**:控制是否允许...

    AnyFo_-_ExtJS_移魂大法

    ##### 5.3 `Ext.form.ComboBox` - **JS文件**: ```javascript new Ext.form.ComboBox({ store: new Ext.data.ArrayStore({ fields: ['id', 'name'], data: [['1', 'Option 1'], ['2', 'Option 2']] }), ...

    Ext下拉列表

    Ext.create('Ext.form.field.ComboBox', { fieldLabel: '选择', store: store, displayField: 'name', valueField: 'id', queryMode: 'remote', minChars: 1, width: 200 }).renderTo(document.body); ```...

Global site tag (gtag.js) - Google Analytics