Extjsの各グリッドの列内に矩形を作成する方法は？

Question

私はこのグリッドを持っており、metadata.style、tdClsまたはCSSを使用して矩形内ボックス欄からすべての値をつけたいと思います。私の問題は、列（セル）全体を色付けしたくないということです。矩形で囲んで値を塗りつぶしたい場合、列の値が空白の場合は空の矩形。 は、ここで私はボックス欄の下に見えるように、各列（セル）のために何をしたいの例です：FIDDLE

 switch(recordStatus) { 
     case 'Checked-In': 
      backgroundColor = "#B4B4D6"; 
      metadata.style = 'background-color: ' + backgroundColor + ';'; 
      return val; 
      break; 
      ... 
     } 

：

ここで作業コードですあまり前もってありがとう！

Answer 1

を働きました。このFIDDLEで

、私はあなたの要件ごとに、あなたのcodeでいくつかの変更を変更しています。私はそれがあなたの要件と同じであることを願っています。

JSコード

var data = Ext.decode('[{"box":"","name":"Brady, Marsha","status":"Checked-In"},{"box":"MA","name":"Dwight, Schrute","status":"With MA"},{"box":"MA","name":"Jim, Halpert","status":"With MA"},{"box":"MA","name":"Mike, Brown","status":"With MA"},{"box":"MA","name":"Steve, Smith","status":"With MA"},{"box":"MA","name":"Lori, Morrison","status":"With MA"},{"box":"MA","name":"Mary, Loson","status":"With MA"},{"box":"MA","name":"Junior, Meloni","status":"With MA"},{"box":"MA","name":"Jim, Halpert","status":"With MA"},{"box":"","name":"Kevin, Malone","status":"Checked-In"},{"box":"","name":"Angela, Martin","status":"Checked-In"},{"box":"2","name":"Jim, Halpert","status":"Ready for MA"},{"box":"2","name":"Kevin, Malone","status":"Ready for MA"},{"box":"2","name":"Angela, Martin","status":"Ready for MA"}]'),//Store Data 
    //Create store 
    store = Ext.create('Ext.data.Store', { 
     fields: ['name', 'box', 'status'], 
     data: data, 
     groupField: 'status' 
    }), 
    //create grid 
    grid = Ext.create('Ext.grid.Panel', { 
     height: 450, 
     frame: true, 
     title: 'Sponsored Projects', 
     iconCls: 'icon-grid', 
     renderTo: document.body, 
     store: store, 
     features: [{ 
      ftype: 'grouping', 
     }], 
     columns: [{ 
      text: 'Box', 
      renderer: function (val, metadata, record) { 
       var recordStatus = record.get('status'), 
        style = 'border:1px solid #cccccc'; 
       if (val) { 
        switch (recordStatus) { 
        case 'Checked-In': 
         style = "background-color:#B4B4D6"; 
         break; 
        case 'With MA': 
         style = "background-color:#CBC5EB"; 
         break; 
        case 'Ready for MA': 
         style = "background-color:#E3E1ED"; 
         break; 
        default: 
         style = ''; 
        } 
       } 
       metadata.style = "text-align: center;"; 
       return `<div class="x-box-div" style="${style}">${val}</div>` 
      }, 
      dataIndex: 'box', 
      flex: 0.5 
     }, { 
      text: 'Name', 
      renderer: function (value, metaData) { 
       return value.replace(value, '<u><b>' + value.toUpperCase() + '</b></u>'); 
      }, 
      dataIndex: 'name', 
      flex: 2 
     }, { 
      text: 'Status', 
      dataIndex: 'status', 
      flex: 1 
     }] 
    }); 

CSSコード

<style> 
    .x-box-div { 
     min-width: 30px; 
     min-height: 30px; 
     text-align: center; 
     display: inline-block; 
     vertical-align: middle; 
     padding: 10px 0; 
     max-height: 30px; 
    } 

</style> 

Answer 2

これは、あなたのrenderer方法からreturn HTMLに必要とあなたの要件ごとにスタイルを提供し、私のため

renderer: function (v,meta) {          
    meta.tdCls = '***your icon with css***'; 
    }