一、例子
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 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 });