ExtJS, combo, listbox, text-align

0
votes

Could you help me to align to the right the entries in ExtJS combo listbox? The config 'style' doesn't work with text-align or I'm doing something wrong?

See sample coding or the fiddle example 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'
        }]
    });
}

});

2
cssextjslistbox

2 Answers

1
votes

try with this .. it is working fine at my end.

CSS 

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

                   }

add the above css class to our combo using listConfig .You can see the same in the code.

        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'
0
votes

Directly select the class of the combobox list in css and apply the style it should override any ExtJS style.

This will work:

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