Question

你能帮助我将ExtJS组合列表框中的条目右对齐吗？配置'style'不能与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'
        }]
    });
}

}）;

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'

Answer 2

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

这将有效：

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

ExtJS，组合，列表框，文本对齐

2 个答案: