js 代码
- var combo = new Ext.form.ComboBox({
- store : new Ext.data.SimpleStore({
- fields : [‘value‘, ‘text‘],
- data : [[‘1001‘, ‘小儿迪巧‘], [‘1002‘, ‘成人迪巧‘], [‘1003‘, ‘秀源‘]]
- }),
- hiddenName:‘product_code‘,
- mode:‘local‘,
- valueField : ‘value‘,
- displayField : ‘text‘,
- value:‘1001‘,
- emptyText : ‘请选择‘,
- mode : ‘local‘,
- triggerAction : ‘all‘,
- readOnly : false,
- editable:false,
- pageSize: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};
- }
- }
-
- 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‘
- });
-
- var cm = new Ext.grid.ColumnModel([{
- ...
- },{
- header: "Some Header",
- dataIndex: ‘whatever‘,
- width: 130,
- editor: combo,
- renderer: Ext.util.Format.comboRenderer(combo)
- },
- ...
- ]);
Combo使用起来非常方便，还有很多属性我们平时没有用到，都设有默认值，比如录入几个字后进行数据查询、显示模板，下拉显示高度等。如果对它的展示内容或方式不满意，可以修改属性对其进行扩展。源码内注释非常详细，可以根据提示的信息对它进行改造。
