Question

如何在下面的示例中将下拉列表垂直对齐到顶部？（试图让它在sencha fiddle）

中运行

Ext.application({
    name : 'Fiddle',

    launch : function() {


        // The data store containing the list of states
var states = Ext.create('Ext.data.Store', {
    fields: ['abbr', 'name'],
    data : [
        {"abbr":"AL", "name":"Alabama"},
        {"abbr":"AK", "name":"Alaska"},
        {"abbr":"AZ", "name":"Arizona"}
        //...
    ]
});

// Create the combo box, attached to the states data store
Ext.create('Ext.form.ComboBox', {
     fieldLabel: 'Loooooong Looooong looooooong looooooong looooooong',
    store: states,
    queryMode: 'local',
    displayField: 'name',
    valueField: 'abbr',
    renderTo: Ext.getBody()
});
    }
});

Answer 1

将baseBodyCls提供给combobox＆amp;在 CSS 中将vertical-align:top;提供给类。

Ext.application({
    name : 'Fiddle',

    launch : function() {


        // The data store containing the list of states
var states = Ext.create('Ext.data.Store', {
    fields: ['abbr', 'name'],
    data : [
        {"abbr":"AL", "name":"Alabama"},
        {"abbr":"AK", "name":"Alaska"},
        {"abbr":"AZ", "name":"Arizona"}
        //...
    ]
});

// Create the combo box, attached to the states data store
Ext.create('Ext.form.ComboBox', {
     fieldLabel: 'Loooooong Looooong looooooong looooooong looooooong',
    store: states,
    queryMode: 'local',
    displayField: 'name',
    valueField: 'abbr',
    baseBodyCls:'vertical-align-body',
    renderTo: Ext.getBody()
});
    }
});

.vertical-align-body{
vertical-align:top;  
}

            <link rel="stylesheet" href="https://extjs.cachefly.net/ext-4.1.1-gpl/resources/css/ext-all.css">
<script type="text/javascript" src="https://extjs.cachefly.net/ext-4.1.1-gpl/ext-all-debug.js"></script>

在extjs中垂直对齐组合框

1 个答案: