Question

如何将这些图标行（检查和x标记）对齐到中心？我只做了中心对齐的列标题“状态”。

示例代码：

<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

在ExtJS gridcolumn中有属性align。这将设置标题和渲染列的对齐方式。

我创建了一个演示，你可以看到它是如何工作的。 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()
});

您还可以在当前的CSS中使用 margin:0 auto; 或 text-align:center; 作为图标对齐中心。

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

保证金0自动： - 如果在对象上指定了已应用margin的宽度：0 auto to，则该对象将集中在其父容器中。

Answer 2

将这些添加到列下的代码中：

{ 对齐：中间，包装：中心， }，

Extjs网格图标行对齐中心

2 个答案: