Ext.form.ComboBox常用属性详解

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. // create the combo instance
8. var combo = new Ext.form.ComboBox({
9. {@link #typeAhead}: true,
10. {@link #triggerAction}: 'all',
11. {@link #lazyRender}:true,
12. {@link #mode}: 'local',
13. {@link #store}: new Ext.data.ArrayStore({
14. id: 0,
15. fields: [
16. 'myId',
17. 'displayText'
18. ],
19. data: [[1, 'item1'], [2, 'item2']]
20. }),
21. {@link #valueField}: 'myId',
22. {@link #displayField}: 'displayText'
23. });
24. // snippet of column model used within grid
25. var cm = new Ext.grid.ColumnModel([{
26. ...
27. },{
28. header: "Some Header",
29. dataIndex: 'whatever',
30. width: 130,
31. editor: combo, // specify reference to combo instance
32. renderer: Ext.util.Format.comboRenderer(combo) // pass combo instance to reusable renderer
33. },
34. ...
35. ]);

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