ExtJS ComboBox相关

EXTJS /取ComboBox里的文本displayField值和实际valueField值

1、使用ComboBox时，它有一个hiddenName的属性，

专门用于提交ComboBox中valueField域中的值，（如果不配置hiddenName属性，就会把displayField的值传过去）

例如：

一个ComboBox的Id为IdValue，

hiddenName属性的值为hiddenValue，

那么，使用Ext.get('IdValue').dom.value方法获取的是ComboBox中选中项的文本displayField值，

而使用Ext.get('hiddenValue').dom.value获取的才是ComboBox中需要提交的valueField的值。


2、示例   js 代码

1. var combo = new Ext.form.ComboBox({  
2.     store : new Ext.data.SimpleStore({  
3. //注意此时的store，我们通常会用到初始化combo的值，比如通过某个按钮或者在页面加载的时候设置初始值，combo.setValue(),通过这样的方法去设置的时候通常出现一个问题就是，初始化之后combo现实的值是setValue的值，而不是combo对应的displayField,此时就要设置store的一个属性了autoLoad : true,当然前提条件是store中的数据已经加载到了内存当中
4. autoLoad :true ,
5.         fields : ['value', 'text'],  
6.         data : [['1001', '小儿迪巧'], ['1002', '成人迪巧'], ['1003', '秀源']]  
7.     }),  
8.     hiddenName:'product_code',//提交到后台的input的name 
9.     mode:'local',//数据加载模式，'local'本地加载，'remote'远程加载
10.     valueField : 'value',   
11. //值字段,js要获得此值，直接调用Ext.get('').dom.value;或者Ext.getCmp('').getValue();
12.     displayField : 'text',  
13. //显示字段,js要获得此值，用Ext.get('').getValue();或者是Ext.getCmp('').getRawValue();
14.     value:'1001',       //默认值,要设置为提交给后台的值，不要设置为显示文本  
15.     emptyText : '请选择',  //提示信息  
16.     mode : 'local', //数据加载模式，local代表本地数据  
17.     triggerAction : 'all',  
18. //请设置为"all",否则默认为"query"的情况下，你选择某个值后，再此下拉时，只出现匹配选项，如果设为"all"的话，每次下拉均显示全部选项 
19. // 显示所有下列数据，一定要设置属性triggerAction为a, 
20.     readOnly : false,   //只读，为true时不能编辑不能点击  
21.     editable:false,     //是否可编辑，为true时可以手写录入  
22.     pageSize:0      //当设置大于0时会显示分页按钮
23. }) 

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