css - ExtJS、组合、列表框、文本对齐

Question

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

参见样本编码或 fiddle 示例 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'
        }]
    });
}

});

Answer 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'