首页 > 代码库 > Ext.form.ComboBox常用属性详解

Ext.form.ComboBox常用属性详解

2024-07-11 15:13:11   219人阅读

Ext.form.ComboBox常用属性详解

标签: Extjs js combo



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

如果在EditorGrid中使用Combo控件，编辑完后会发现显示的值都是编码而不是显示值，可以ColumnMode中加入renderer方法对显示值进行修改。下面是出自Combo源码里的例子。
js 代码
  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. ]); 
Combo使用起来非常方便，还有很多属性我们平时没有用到，都设有默认值，比如录入几个字后进行数据查询、显示模板，下拉显示高度等。如果对它的展示内容或方式不满意，可以修改属性对其进行扩展。源码内注释非常详细，可以根据提示的信息对它进行改造。


联系
我们