Extjs combox 常用属性及问题

dxsafsad

js 代码

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

如果在EditorGrid中使用Combo控件，编辑完后会发现显示的值都是编码而不是显示值，可以ColumnMode中加入renderer方法对显示值进行修改。下面是出自Combo源码里的例子。

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. ]); 

结束