Extjs grid icon rows align center

Question

How to align these icon rows (check and x mark) to center? I did only center-aligned column header "Status".

---

Sample code:

<script>
    var store = Ext.create('Ext.data.Store', {
        fields: ['status'],
        data: [
            { 'status' : 0 },
            { 'status' : 1 },
            { 'status' : 0 },
            { 'status' : 1 },
            { 'status' : 0 },
        ]
    });

    Ext.onReady(function(){

        Ext.create('Ext.grid.Panel', {

            title: 'Simpsons',
            padding : '20px',
            store: store,
            renderTo : Ext.getBody(),

            columns: [
                {
                    text: 'Status',
                    dataIndex: 'status',
                    align : 'center',

                    renderer : function (value, metaData, record, rowIndex, colIndex, store) {

                        switch (value)
                        {
                            case 1 :
                                metaData.css = 'locked';
                                break;
                            case 0 :
                                metaData.css = 'active';
                                break;
                        }
                        return '';
                    }
                }
            ],

            height: 300,
            width : 300,
            layout: 'fit',
            fullscreen: true

        });
    });

</script>

Answer 1

In ExtJS gridcolumn have property align. This will Sets the alignment of the header and rendered columns.

I have created an demo you can see how is working. Sencha Fiddle

Ext.create('Ext.data.Store', {
    storeId: 'simpsonsStore',
    fields: ['name', 'email', 'phone'],
    data: [{
        name: 'Lisa',
        email: 'lisa@simpsons.com',
        phone: '555-111-1224'
    }, {
        name: 'Bart',
        email: 'bart@simpsons.com',
        phone: '555-222-1234'
    }, {
        name: 'Homer',
        email: 'homer@simpsons.com',
        phone: '555-222-1244'
    }, {
        name: 'Marge',
        email: 'marge@simpsons.com',
        phone: '555-222-1254'
    }]
});

Ext.create('Ext.grid.Panel', {
    title: 'Simpsons',
    store: Ext.data.StoreManager.lookup('simpsonsStore'),
    columns: [{
        text: 'Name',
        dataIndex: 'name'
    }, {
        text: 'Email',
        dataIndex: 'email',
        flex: 1
    }, {
        header: 'status',
        dataIndex: 'photo',
        align:'center',
        renderer: function (value) {
            return '<img style="width: 15px;"src="https://cdn0.iconfinder.com/data/icons/feather/96/square-check-128.png" />';
        }
    }],
    height: 200,
    width: 400,
    renderTo: Ext.getBody()
});

You can also use margin:0 auto; or text-align:center; for icon align center in you current css.

.your_css_name{
       margin:0 auto;//or
       text-align: center;// try to apply on parent div.
    }

• Margin 0 auto :- When you have specified a width on the object that you have applied margin: 0 auto to, the object will sit centrally within it's parent container.

Answer 2

Add these to the code under columns:

{ align: middle, pack: center, },