Extjs网格图标行对齐中心

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

这些的代码添加下列：

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

Answer 2

在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汽车： - 当你指定已应用保证金对象上的宽度：0自动到，对象将集中坐在内它的父容器。