- 浏览: 606817 次
- 性别:
- 来自: 西安
文章分类
- 全部博客 (365)
- Java 基础知识(笔试面试有用) (35)
- SQL 相关 (11)
- Oracle笔试 (1)
- Java 笔试面试 (11)
- LINUX (12)
- ExtJS (21)
- Javascript (17)
- WebGIS (2)
- 软件工程 (3)
- 数据库 (17)
- 项目管理 (63)
- 工作流 (2)
- 计算机网络 (3)
- ZigBee技术及应用 (24)
- 单片机(AVR Studio) (7)
- 项目人力资源管理 (3)
- 项目管理高级知识 (4)
- JAVA技术 (12)
- 项目管理中的概念 (3)
- SQL SERVER (1)
- C++ (1)
- C/C++编程经验 (12)
- C和C++面试笔试题 (12)
- 其他IT技术笔试面试 (6)
- 名企笔试面试集锦 (16)
- 非技术 (10)
- C#相关 (1)
- Matlab相关 (2)
- 计算机专业课相关 (2)
- Web Service (1)
- Excel 使用 (1)
- PhotoShop相关 (4)
- ASP 相关 (2)
- android (1)
- Java WEB 相关 (1)
- web 安全相关 (7)
- 网络安全 (1)
- IBatis (1)
- web 开发技巧 (2)
- css 相关 (1)
- Ruby相关 (2)
- 生活 (3)
- 操作系统安全相关 (6)
- 操作系统相关 (1)
- PHP相关 (3)
- 开发经验 (12)
- Redis (1)
最新评论
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>combox</title> <!-- ExtJS --> <link rel="stylesheet" type="text/css" href="EXTJS/resources/css/ext-all.css" /> <script type="text/javascript" src="EXTJS/bootstrap.js"></script> <!-- Example --> <script type="text/javascript"> Ext.onReady(function() { //json数据 var states = [ {"id":"1","name":"总经理"}, {"id":"2","name":"总监"}, {"id":"3","name":"经理"}, {"id":"3","name":"职员"} ]; //数据字段 Ext.regModel('State', { fields: [ {type: 'string', name: 'id'}, {type: 'string', name: 'name'} ] }); //创建数据源 var store = Ext.create('Ext.data.Store', { model: 'State', data: states }); //单选combox(不可编辑) var SingleCombox = Ext.create('Ext.form.field.ComboBox', { fieldLabel: '权限', //显示名 renderTo: 'SingleCombox', //对应ID displayField: 'name', //显示字段 width: 150, //combox宽 multiSelect:false, //是否多选 labelWidth: 35, //label长度 store: store, //数据源 queryMode: 'local', //最好设定queryMode为local,这样可以提高用户的响应速度 editable:false //是否可以编辑 }); //单选combox(可编辑) var SingleComboxEdit = Ext.create('Ext.form.field.ComboBox', { fieldLabel: '权限', renderTo: 'SingleComboxEdit', displayField: 'name', width: 150, multiSelect:false, labelWidth: 35, store: store, queryMode: 'local', editable:true }); //多选combox(不可编辑) var MultipleCombox=Ext.create('Ext.form.field.ComboBox',{ fieldLabel:'权限', renderTo:'MultipleCombox', displayField:'name', width:150, multiSelect:true, labelWidth:35, store: store, queryMode: 'local', editable:false }); //多选combox(可编辑) var MultipleComboxEdit=Ext.create('Ext.form.field.ComboBox',{ fieldLabel:'权限', renderTo:'MultipleComboxEdit', displayField:'name', width:150, multiSelect:true, labelWidth:35, store: store, queryMode: 'local', editable:true }); }); </script> </head> <body> <span>单选combox(不可编辑)</span><br/><div id="SingleCombox"></div><hr/> <span>单选combox(可编辑)</span><br/><div id="SingleComboxEdit"></div><hr/> <span>多选combox(不可编辑)</span><br/><div id="MultipleCombox"></div><hr/> <span>多选combox(可编辑)</span><br/><div id="MultipleComboxEdit"></div><hr/> </body> </html>
js 代码
- var combo = new Ext.form.ComboBox({
- store : new Ext.data.SimpleStore({
- fields : ['value', 'text'],
- data : [['1001', '小儿迪巧'], ['1002', '成人迪巧'], ['1003', '秀源']]
- }),
- hiddenName:'product_code',//提交到后台的input的name
- mode:'local',//数据加载模式,'local'本地加载,'remote'远程加载
- valueField : 'value', //值字段
- displayField : 'text', //显示字段
- value:'1001', //默认值,要设置为提交给后台的值,不要设置为显示文本
- emptyText : '请选择', //提示信息
- mode : 'local', //数据加载模式,local代表本地数据
- triggerAction : 'all', // 显示所有下列数据,一定要设置属性triggerAction为a
- readOnly : false, //只读,为true时不能编辑不能点击
- editable:false, //是否可编辑,为true时可以手写录入
- pageSize:0 //当设置大于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};
- }
- }
- // create the combo instance
- 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'
- });
- // snippet of column model used within grid
- var cm = new Ext.grid.ColumnModel([{
- ...
- },{
- header: "Some Header",
- dataIndex: 'whatever',
- width: 130,
- editor: combo, // specify reference to combo instance
- renderer: Ext.util.Format.comboRenderer(combo) // pass combo instance to reusable renderer
- },
- ...
- ]);
发表评论
-
ExtJS 中在不同浏览器下显示字体不一样问题
2012-12-23 21:11 762在你使用ExtUI的html页面里加上: -
ExtJS Store 方法以及属性介绍
2012-12-13 10:07 1091store是一个为Ext器件提供record对象的存储容器,行 ... -
Ext 中 得到grid 中 store 中某行的某个单元格的值
2012-12-13 09:56 836var record=grid.getStore.get ... -
new Ext.grid.GridPanel render
2012-12-12 18:25 1794function renderDescn(val ... -
Uncaught TypeError: Cannot call method 'getTotalWidth' of undefined
2012-12-10 20:13 1399什么问题了?解决了不? -
ExtJs button 居中
2012-12-07 17:50 14292var win = new Ext.Window({ ... -
iframe 的使用
2012-08-01 13:25 831new Ext.Panel({ ... -
ext groupingStroe 使用注意问题
2011-09-12 11:38 883// shared reader var re ... -
this.ds is undefined ext gird
2011-05-09 09:22 1636this.ds is undefined ext-all.js ... -
Ext.get(id).on('click', function(e){
2011-04-15 10:07 1473Ext.get(id).on('click', functio ... -
pagingBar a is undefined
2009-11-17 23:19 1167当pagingBar中没有定义store的时候,firefox ... -
ext 中的各个style
2009-11-17 19:59 1283总结一下最近所学的到的东西: baseCls : ... -
ext iconCls
2009-11-17 19:36 2105ext 中 iconCls:'nav', 表示的意思就是,在马 ... -
ext 动态修改iframe 的src
2009-11-17 19:18 3429new Ext.TabPanel({ ... -
网站在IE和Firefox中的字体显示问题
2009-11-15 22:53 1003最近用Ext做了个小网站,在IE里显示的很好,字体都正常,但是 ... -
a[c.xtype || d] is not a constructor ext-all.js(第9行)
2009-11-15 21:31 1617总报这个错误。这不知道到底是什么原因 -
b is undefined 第9行
2009-11-15 21:17 2168在以下这种情况下会导致这种错误。定义了autoLoad:tru ... -
ext 得到 j已定义id的元素
2009-11-15 20:33 1002用Ext.getCmp(‘')即可得到进行操作。 例如 ... -
TabPanel autoLoad 乱码解决问题
2009-11-15 20:26 1030看 代码一: new Ext.TabPanel({ ... -
动态修改TabPanel的html(1)
2009-11-15 20:11 3964Ext.TabPanel中的items中可以写html来调用 ...
相关推荐
### 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); ```...