代码之家 › 专栏 › 技术社区 › Daryll David Dagondon

Extjs网格图标行居中对齐

extjs

Daryll David Dagondon · 技术社区 · 8 年前

如何将这些图标行(复选框和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>

2 回复 | 直到 7 年前

Narendra Jadhav 8 年前

在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()
});

您也可以使用 margin:0 auto; text-align:center; 对于当前css中的图标居中对齐。

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

边距0自动:- 当您在已应用“边距:0自动”的对象上指定宽度时,该对象将位于其父容器的中心。

Paula Livingstone 8 年前

将以下内容添加到列下的代码中:

对齐:中间, },