Ext.form.ComboBox惯用属性详解

Ext.form.ComboBox常用属性详解

js?代码

1. var?combo?=?new?Ext.form.ComboBox({??????store?:?new?Ext.data.SimpleStore({??
2. ????????fields?:?['value',?'text'],??????????data?:?[['1001',?'小儿迪巧'],?['1002',?'成人迪巧'],?['1003',?'秀源']]??
3. ????}),??????hiddenName:'product_code',//提交到后台的input的name???? mode:'local',//数据加载模式，'local'本地加载，'remote'远程加载
4. ????valueField?:?'value',???//值字段??????displayField?:?'text',??//显示字段??
5. ????value:'1001',???????//默认值,要设置为提交给后台的值，不要设置为显示文本??????emptyText?:?'请选择',??//提示信息??
6. ????mode?: 'local',?//数据加载模式，local代表本地数据??????triggerAction?:?'all',??//?显示所有下列数据，一定要设置属性triggerAction为a??
7. ????readOnly?:?false,???//只读，为true时不能编辑不能点击??????editable:false,?????//是否可编辑，为true时可以手写录入??
8. ????pageSize:0??????//当设置大于0时会显示分页按钮})?

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

1. Ext.util.Format.comboRenderer?=?function(combo){??????return?function(value){??
2. ????????var?record?=?combo.findRecord(combo.{@link?#valueField},?value);??????????return?record???record.get(combo.{@link?#displayField})?:?combo.{@link?#valueNotFoundText};??
3. ????}??}??
4. ??//?create?the?combo?instance??
5. var?combo?=?new?Ext.form.ComboBox({??????{@link?#typeAhead}:?true,??
6. ????{@link?#triggerAction}:?'all',??????{@link?#lazyRender}:true,??
7. ????{@link?#mode}:?'local',??????{@link?#store}:?new?Ext.data.ArrayStore({??
8. ????????id:?0,??????????fields:?[??
9. ????????????'myId',??????????????'displayText'??
10. ????????],??????????data:?[[1,?'item1'],?[2,?'item2']]??
11. ????}),??????{@link?#valueField}:?'myId',??
12. ????{@link?#displayField}:?'displayText'??});??
13. ??//?snippet?of?column?model?used?within?grid??
14. var?cm?=?new?Ext.grid.ColumnModel([{?????????...??
15. ????},{?????????header:?"Some?Header",??
16. ???????dataIndex:?'whatever',?????????width:?130,??
17. ???????editor:?combo,?//?specify?reference?to?combo?instance?????????renderer:?Ext.util.Format.comboRenderer(combo)?//?pass?combo?instance?to?reusable?renderer??
18. ????},??????...??
19. ]);?

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

?

?

当要设置禁用的时候用

Ext.form.ComboBox.setDisabled(true)

启用：

Ext.form.ComboBox.setDisabled(false)

?