Extjs 教程三 “combobox”

最新推荐文章于 2021-02-24 00:08:41 发布

weixin_33788244

最新推荐文章于 2021-02-24 00:08:41 发布

阅读量161

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/280850911/archive/2012/11/04/2754033.html

本文详细介绍如何使用ExtJS框架中的ComboBox组件加载本地及远程数据源。包括三步设置本地数据源：定义数据、创建数据存储、配置ComboBox。同时介绍了如何设置ComboBox的默认值以及如何进行值的读写操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、例子

1、combo加载本地数据源store

　　只要三步

View Code

 1 <head>
 2     <title></title>
 3     <!--ExtJs框架开始-->
 4     <link href="../extjs3/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
 5     <script src="../extjs3/ext-base.js" type="text/javascript"></script>
 6     <script src="../extjs3/ext-all.js" type="text/javascript"></script>
 7     <link href="../CSS/common.css" rel="stylesheet" type="text/css" />
 8     <!--ExtJs框架结束-->
 9     <script type="text/javascript">
10         Ext.onReady(function () {
11 
12             //我们分三步走：
13             //第一步：提供数据：
14             var data = [[' 湖北', 'hubei'], ['江西', 'jiangxi'], ['安徽', 'anhui']];
15             //第二步：导入到store中：
16             var store = new Ext.data.SimpleStore({
17                 fields: ['chinese', 'english'],
18                 data: data
19             });
20             //第三步 :把store托付给comboBox的store
21             var combo = new Ext.form.ComboBox({
22                 xtype: 'combo',
23                 mode: 'local', //因为store是从本地的data取数据的，所以'local',默认为'remote'，枚举类型
24                 store: store,
25                 fieldLabel: "省份",
26                 valueField: 'english',
27                 displayField: 'chinese',
28                 hiddenName: 'OrganizationId',//提交后台的值的标识
29                 name: "Organization",
30                 id: "_Organization",
31                 width: 350,
32                 typeAhead: true,
33                 triggerAction: 'all',//请设置为”all”,否则默认 为”query”的情况下，你选择某个值后，再此下拉时，只出现匹配选项，如果设为”all”的话，每次下拉均显示全部选项
34                 editable: false,            //不可编辑
35                 labelStyle: "text-align:center; ",
36                 selectOnFocus: true,
37                 emptyText: '请选择'
38             });
39 
40             var form = new Ext.form.FormPanel({
41                 border: false,
42                 labelAlign: "right",
43                 buttonAlign: 'center',
44                 labelWidth: 150,
45                 frame: true,
46                 baseParams: { create: true }
47             });
48 
49             form.add(combo);
50             form.render('form');
51         });
52         
53     </script>
54 </head>
55 <body>
56     <div id="form">
57     </div>
58 </body>
59 </html>

2、combo加载远程数据源store

　　只是store改成远程加载方式，并且model:'remote'

二、使用

1、取值，赋值

取当前combo的值

var v=Ext.get(“combo”).dom.value); //获取id为combo的显示值

　 var a=Ext.getCmp(“combo”).getValue(); 　　//获取id为combo的值

2、设置值

　　Ext.getCmp('combo').setValue(1); //设置当前选中值Value

　　//应该在load时setValue(data)或者第一次combobox显示的是data的值

　　Ext.getCmp('combo').setRawValue('广东省'); //设置显示的Text

3、设置combobox的默认值（二种方法）
　　（1）本地数据源时
　　　　combo.setValue('jiangxi');
　　（2）在store加载完数据后加载执行设置值的方法

1  store.on('load', function (store, record, opts) {   //为Store设置load事件    
2                 var combo_temp = Ext.getCmp("combo");
3                 var firstValue = record[0].data.chinese; //这种方法也可以获得第一项的值
4                 combo_temp.setValue(firstValue); //选中
5 });