Question

EXTJS的combo组件的下拉选项框的高度和垂直滚动条如何设置

如何设置下拉框的显示高度和垂直滚动条...
这是源代码...





Answer 1

Ext.onReady(function() {
    var testStore = Ext.create('Ext.data.Store', {
            fields : ['code', 'name'],
            data : [{
            name : "先生",
            code : "01"
            }, {
            name : "女士",
            code : "02"
            }, {
            name : "先生",
            code : "03"
            }, {
            name : "女士",
            code : "04"
            }, {
            name : "先生",
            code : "05"
            }, {
            name : "女士",
            code : "06"
            }, {
            name : "先生",
            code : "07"
            }, {
            name : "女士",
            code : "08"
            }, {
            name : "先生",
            code : "09"
            }, {
            name : "女士",
            code : "10"
            }, {
            name : "先生",
            code : "05"
            }, {
            name : "女士",
            code : "06"
            }, {
            name : "先生",
            code : "07"
            }, {
            name : "女士",
            code : "08"
            }, {
            name : "先生",
            code : "09"
            }, {
            name : "女士",
            code : "10"
            }]
    });
    var testCombo = Ext.create('Ext.form.field.ComboBox', {
        displayField : 'name',
        valueField : 'code',
        editable : false,
        store : testStore,
        emptyText : 'hello',
        listConfig : {
            maxHeight : 100,
            getInnerTpl : function() {
                return '<div data-qtip="{code}">{name}</div>';
            }
        }
    });
    
    Ext.create('Ext.container.Viewport', {
        layout : 'absolute',
        items : [testCombo]
    });
});

结果图：

combobox 本身的 maxHeight 不起作用，用 listConfig 中的 maxHeight 来设定

Answer 2

设置combo的一个属性：

maxHeight : 100,//下拉列表的最大高度像素值