js?代码
- var?combo?=?new?Ext.form.ComboBox({??
- ????store?:?new?Ext.data.SimpleStore({??
- ????????fields?:?['value',?'text'],??
- ????????data?:?[['1001',?'小儿迪巧'],?['1002',?'成人迪巧'],?['1003',?'秀源']]??
- ????}),??
- ????hiddenName:'product_code',//提交到后台的input的name?
- ??? mode:'local',//数据加载模式，'local'本地加载，'remote'远程加载
- ????valueField?:?'value',???//值字段??
- ????displayField?:?'text',??//显示字段??
- ????value:'1001',???????//默认值,要设置为提交给后台的值，不要设置为显示文本??
- ????emptyText?:?'请选择',??//提示信息??
- ????mode?: 'local',?//数据加载模式，local代表本地数据??
- ????triggerAction?:?'all',??//?显示所有下列数据，一定要设置属性triggerAction为a??
- ????readOnly?:?false,???//只读，为true时不能编辑不能点击??
- ????editable:false,?????//是否可编辑，为true时可以手写录入??
- ????pageSize:0??????//当设置大于0时会显示分页按钮
- })?
如果在EditorGrid中使用Combo控件，编辑完后会发现显示的值都是编码而不是显示值，可以ColumnMode中加入renderer方法对显示值进行修改。下面是出自Combo源码里的例子。
js?代码
- Ext.util.Format.comboRenderer?=?function(combo){??
- ????return?function(value){??
- ????????var?record?=?combo.findRecord(combo.{@link?#valueField},?value);??
- ????????return?record???record.get(combo.{@link?#displayField})?:?combo.{@link?#valueNotFoundText};??
- ????}??
- }??
- ??
- //?create?the?combo?instance??
- var?combo?=?new?Ext.form.ComboBox({??
- ????{@link?#typeAhead}:?true,??
- ????{@link?#triggerAction}:?'all',??
- ????{@link?#lazyRender}:true,??
- ????{@link?#mode}:?'local',??
- ????{@link?#store}:?new?Ext.data.ArrayStore({??
- ????????id:?0,??
- ????????fields:?[??
- ????????????'myId',??
- ????????????'displayText'??
- ????????],??
- ????????data:?[[1,?'item1'],?[2,?'item2']]??
- ????}),??
- ????{@link?#valueField}:?'myId',??
- ????{@link?#displayField}:?'displayText'??
- });??
- ??
- //?snippet?of?column?model?used?within?grid??
- var?cm?=?new?Ext.grid.ColumnModel([{??
- ???????...??
- ????},{??
- ???????header:?"Some?Header",??
- ???????dataIndex:?'whatever',??
- ???????width:?130,??
- ???????editor:?combo,?//?specify?reference?to?combo?instance??
- ???????renderer:?Ext.util.Format.comboRenderer(combo)?//?pass?combo?instance?to?reusable?renderer??
- ????},??
- ????...??
- ]);?
Combo使用起来非常方便，还有很多属性我们平时没有用到，都设有默认值，比如录入几个字后进行数据查询、显示模板，下拉显示高度等。如果对它的展示内容或方式不满意，可以修改属性对其进行扩展。源码内注释非常详细，可以根据提示的信息对它进行改造。
?
?
当要设置禁用的时候用
Ext.form.ComboBox.setDisabled(true)
启用：
Ext.form.ComboBox.setDisabled(false)
?