js 代码
- var combo = new Ext.form.ComboBox({
- store : new Ext.data.SimpleStore({
- fields : ['value', 'text'],
- data : [['1001', '小儿迪巧'], ['1002', '成人迪巧'], ['1003', '秀源']]
- }),
- hiddenName:'product_code',
- mode:'local',
- valueField : 'value',
- displayField : 'text',
- value:'1001',
- emptyText : '请选择',
-
mode : 'local',
- triggerAction : 'all',
- readOnly : false,
- editable:false,
- pageSize:0
- })
如果在EditorGrid中使用Combo控件,编辑完后会发现显示的值都是编码而不是显示值,可以ColumnMode中加入renderer方法对显示值进行修改。下面是出自Combo源码里的例子。
js 代码
- Ext.util.Format.comboRenderer = function(combo){
- return function(value){
- var record = combo.findRecord(combo.{@link #valueField}, value);
- return record ? record.get(combo.{@link #displayField}) : combo.{@link #valueNotFoundText};
- }
- }
-
-
- var combo = new Ext.form.ComboBox({
- {@link #typeAhead}: true,
- {@link #triggerAction}: 'all',
- {@link #lazyRender}:true,
- {@link #mode}: 'local',
- {@link #store}: new Ext.data.ArrayStore({
- id: 0,
- fields: [
- 'myId',
- 'displayText'
- ],
- data: [[1, 'item1'], [2, 'item2']]
- }),
- {@link #valueField}: 'myId',
- {@link #displayField}: 'displayText'
- });
-
-
- var cm = new Ext.grid.ColumnModel([{
- ...
- },{
- header: "Some Header",
- dataIndex: 'whatever',
- width: 130,
- editor: combo,
- renderer: Ext.util.Format.comboRenderer(combo)
- },
- ...
- ]);
Combo使用起来非常方便,还有很多属性我们平时没有用到,都设有默认值,比如录入几个字后进行数据查询、显示模板,下拉显示高度等。如果对它的展示内容或方式不满意,可以修改属性对其进行扩展。源码内注释非常详细,可以根据提示的信息对它进行改造。
当要设置禁用的时候用
Ext.form.ComboBox.setDisabled(true)
启用:
Ext.form.ComboBox.setDisabled(false)
分享到:
相关推荐
### Ext.form表单中各种属性应用详解 #### 1. Ext.form.NumberField **Ext.form.NumberField** 是 **Ext.form.TextField** 的一个扩展,它专为处理数字输入而设计,提供了一系列与数值相关的配置选项。 - **...
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基础组件 **1.1 Box Component (Ext.BoxComponent)** - **xtype**: `box` - **功能描述**:Box Component 是一个非常基本的 Ext 组件,主要用于定义具有边框和其他布局属性的...
editor: new Ext.form.ComboBox({ id: "combo_process", store: store_process, valueField: "process_id", displayField: "process_name", forceSelection: true, typeAhead: true, triggerAction: 'all', ...
### ExtJS核心API详解 #### 1. Ext 类 (P.2) - **概述**:`Ext` 是 ExtJS 的核心命名空间,包含了全局的方法和属性。 - **用途**:提供了一个统一的入口来访问 ExtJS 库的功能,如创建组件、管理事件等。 - **常用...
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** 是一个重要的JavaScript库组件,用于处理数据传输和管理。它定义了一系列的核心概念,包括 **Store**、**Reader** 和 **Proxy**,这些都是Ext.data的...
### ext控件Form相关配置详解 #### 一、引言 在现代Web开发中,Ext JS作为一款功能强大且灵活的前端框架,被广泛应用于构建复杂的企业级应用程序。其中,`Form`控件是Ext JS中一个非常重要的组成部分,它为开发者...
**Ext.form.ComboBox** - **描述**: 下拉框,提供一个可滚动的列表供用户选择。 - **用途**: 选择国家、地区、类别等。 **Ext.form.DateField** - **描述**: 日期选择项,用户可以输入或选择日期。 - **用途**: ...
var combo = new Ext.form.ComboBox({ store: store, displayField: 'text', valueField: 'id', tpl: template, typeAhead: true, mode: 'local', triggerAction: 'all', width: 300 }); ``` 以上代码创建...
- **`Class`**: `Ext.form.ComboBox` - **描述**: 下拉框组件。 4. **`datefield`:** - **`xtype`**: `datefield` - **`Class`**: `Ext.form.DateField` - **描述**: 日期选择字段。 5. **`timefield`:** ...
### Ext与后台数据库交互知识点详解 #### 一、Ext中常用的类 在Ext框架中,为了更好地处理数据和用户界面的交互,引入了一系列强大的类来简化开发过程。 ##### 1.1 Ext.data `Ext.data`是Ext框架的核心模块之一...
Ext2.0 Form 使用实例详解 在Web应用开发中,ExtJS库提供了强大的用户界面组件,其中FormPanel是用于创建复杂表单的重要组件。本文将详细介绍Ext2.0 FormPanel的使用,包括创建方法、控件配置以及布局管理。 首先...
- `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是一个流行的JavaScript库,它专注于构建功能丰富的、用户界面复杂的Web应用程序。EXT 2.0版本在当时是一个重要的里程碑,引入了许多新特性和改进,特别是在表单处理方面。在这个...
#### 四、Ext.form.ComboBox 控件属性 **Ext.form.ComboBox** 提供了一个可下拉的选择列表,常用于从预定义的选项中选择值。 - **displayField**:设置显示在下拉列表中的字段名称。 - **editable**:控制是否允许...
##### 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.create('Ext.form.field.ComboBox', { fieldLabel: '选择', store: store, displayField: 'name', valueField: 'id', queryMode: 'remote', minChars: 1, width: 200 }).renderTo(document.body); ```...