Extjs combox 常用属性及问题

js 代码

 var combo = new Ext.form.ComboBox({
     store : new Ext.data.SimpleStore({
 //注意此时的store，我们通常会用到初始化combo的值，比如通过某个按钮或者在页面加载的时候设置初始值，combo.setValue(),通过这样的方法去设置的时候通常出现一个问题就是，初始化之后combo现实的值是setValue的值，而不是combo对应的displayField,此时就要设置store的一个属性了autoLoad : true,当然前提条件是store中的数据已经加载到了内存当中
 autoLoad :true ,
         fields : ['value', 'text'],
         data : [['1001', '小儿迪巧'], ['1002', '成人迪巧'], ['1003', '秀源']]
     }),
     hiddenName:'product_code',//提交到后台的input的name
     mode:'local',//数据加载模式，'local'本地加载，'remote'远程加载
     valueField : 'value',
 //值字段,js要获得此值，直接调用Ext.get('').dom.value;或者Ext.getCmp('').getValue();
     displayField : 'text',
 //显示字段,js要获得此值，用Ext.get('').getValue();或者是Ext.getCmp('').getRawValue();
     value:'1001',       //默认值,要设置为提交给后台的值，不要设置为显示文本
     emptyText : '请选择',  //提示信息
     mode : 'local', //数据加载模式，local代表本地数据
     triggerAction : 'all',
 //请设置为"all",否则默认为"query"的情况下，你选择某个值后，再此下拉时，只出现匹配选项，如果设为"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使用起来非常方便，还有很多属性我们平时没有用到，都设有默认值，比如录入几个字后进行数据查询、显示模板，下拉显示高度等。如果对它的展示内容或方式不满意，可以修改属性对其进行扩展。源码内注释非常详细，可以根据提示的信息对它进行改造。