Ext.form.ComboBox常用属性详解

Ext.form.ComboBox常用属性详解

标签: Extjs js combo

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