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自動到，對象將集中坐在內它的父容器。