Wie erstelle ich in Extjs ein Rechteck in jeder Spalte?

Question

Ich habe dieses Netz und möchte alle Werte von Box Spalte innerhalb eines Rechtecks ​​setzen mit metadata.style, tdCls oder CSS. Mein Problem ist, dass ich nicht die gesamte Spalte (Zelle) färben möchte, ich nur möchte den Wert innerhalb es durch Einfassen es in ein Rechteck, und wenn der Wert der Spalte leer ist dann nur ein leeres Rechteck Hier ist ein Beispiel dafür, was ich für jede Spalte will (Zelle) wie unter der Box zu schauen, um Spalte:

Hier ist der Arbeitscode:FIDDLE

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

Vielen Dank im Voraus!

Answer 1

Sie müssen return html von Ihrem renderer Methode und bieten Stil wie pro Sie Anforderung.

In diesem FIDDLE, ich habe einige Änderungen in Ihrem code als pro Sie Anforderung geändert. Ich hoffe es ist dasselbe wie pro Anforderung.

JS Code

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-Code

<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

Dieser arbeitete für mich

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