ExtJS、组合、列表框、文本对齐答案

【问题标题】：ExtJS, combo, listbox, text-alignExtJS、组合、列表框、文本对齐
【发布时间】：2014-12-09 20:09:33
【问题描述】：

您能帮我将 ExtJS 组合列表框中的条目向右对齐吗？配置“样式”不适用于 text-align 或者我做错了什么？

查看示例编码或小提琴示例here

Ext.application({
name : 'Fiddle',

launch : function() {
    Ext.create('Ext.form.Panel', {
        bodyPadding: 10,
        defaultType: 'textfield',
        fieldDefaults: {
            labelAlign: 'right',
            labelWidth: 150 
        },
        renderTo: Ext.getBody(),
        standardSubmit: true,
        title: 'Form',
        width: 400,
        items: [{
            displayField: 'val1', 
            fieldLabel: 'Combo',
            name: 'field01',
            queryMode: 'local',        
            store: Ext.create('Ext.data.Store', {
                fields: ['key1', 'val1'],
                style: 'text-align: right', // doesn't work
                data: [
                    {"key1":"AL", "val1":"Alabama..."},
                    {"key1":"AK", "val1":"Alaska"},
                    {"key1":"AZ", "val1":"Arizona"}
                ]
            }),
            valueField: 'key1',
            xtype: 'combo'
        }]
    });
}

});

【问题讨论】：

标签： css extjs listbox

【解决方案1】：

试试这个..它在我的最后工作正常。

CSS

  .alignRight .x-boundlist-item{
                          text-align: right;

                   }

使用 listConfig 将上述 css 类添加到我们的组合中。您可以在代码中看到相同的内容。

        displayField: 'val1', 
            fieldLabel: 'Combo',
            name: 'field01',
            queryMode: 'local', 
            listConfig:{
               cls:'alignRight',
            },
            store: Ext.create('Ext.data.Store', {
                fields: ['key1', 'val1'],
                data: [
                    {"key1":"AL", "val1":"Alabama..."},
                    {"key1":"AK", "val1":"Alaska"},
                    {"key1":"AZ", "val1":"Arizona"}
                ]
            }),
            valueField: 'key1',
            xtype: 'combo'

【讨论】：

【解决方案2】：

直接在css中选择组合框列表的类，并应用它应该覆盖任何ExtJS样式的样式。

这将起作用：

.x-combo-list-item {
    text-align: right;
}

【讨论】：