ExtJS 그리드 셀 내에서 부분적으로 텍스트 색상 설정

Question

항목 집합 프로세스의 상태와 관련된 ExtJS 4.2 그리드 열 (PHP MVC 3 웹 사이트의 일부)이 있습니다. 이 열은 공백으로 구분 된 프로세스 당 3 자의 약어 약어를 반환합니다. 예를 들어 Was Pre Cut은 Washed, Prepared 및 Cut이었고, Was Scr Pee은 Washed, Scrubbed 및 Washed였던 항목입니다. 껍질을 벗 겼어.

그러나 원하는 기능은 모두를 검색하고 완료되었는지 여부를 표시하기 위해 각 항목의 스타일을 지정합니다. 예 : <green>Was Pre</green> Cut은 씻어서 준비했지만 잘라 내지 않은 항목을 나타냅니다.

이것이 가능합니까? 이것은 문자열과 배열 객체로 프로세스 당 값과 해당 스타일 서식을 전달하고 셀의 렌더러를 통해 원하는 서식을 생성하거나 그리드 열의 렌더러 기능에 대해 낙관적 인 곳입니까?

Answer 1

열 렌더러 내가 완전히 문제를 이해 확실하지 오전

... 당신이 출력 HTML, 당신은 거의 그의 능력을 과대 평가하지 수있는 런타임을 제공하지만, 여기에 선발 예입니다. 가능한 프로세스 목록을 감안할 때, 각 레코드에 대한 모든 프로세스를 표시하고,이 기록 (example fiddle)을 받았습니다중인 프로세스를 강조 :

var processes = ['Foo', 'Bar', 'Baz', 'Bat']; // all available processes 

new Ext.grid.Panel({ 
    renderTo: Ext.getBody() 
    ,width: 400 
    ,height: 200 
    ,forceFit: true 

    ,store: { 
     fields: ['id', 'status', 'statusDetails'] 
     ,data: [ 
      {id: 1, status: 'Foo Bar', statusDetails: ['Foo', 'Bar']} 
      ,{id: 2, status: 'Bar Baz', statusDetails: ['Bar', 'Baz']} 
      ,{id: 3, status: 'Baz Bat', statusDetails: ['Baz', 'Bat']} 
     ] 
    } 

    ,columns: [{ 
     dataIndex: 'id' 
     ,text: "ID" 
     ,width: 40 
    },{ 
     dataIndex: 'status' 
     ,text: "Status" 
     ,renderer: function(value, md, record) { 
      md.tdCls = 'processes-cell'; // gives us a hook for CSS 
      return Ext.Array.map(processes, function(process) { 
       var statusDetails = record.get('statusDetails'); 
       // possible alternative: 
       // var statusDetails = record.get('status').split(' '); 
       return '<div class="process ' + process + ' ' 
       + (statusDetails.indexOf(process) !== -1 ? 'on' : 'off') 
       + '">' + process 
       + '</div>'; 
      }).join(''); 
     } 
    }] 
}); 

그리고 스타일이 당신의 마음의 콘텐츠. 예 :

Answer 2

안녕하세요. 그는 자신의 열에 대해 renderer 속성으로 작업해야하는 것이 맞습니다. 다른 예제를 볼 필요가있을 때를 대비하여 필자도 만들었습니다. https://fiddle.sencha.com/#fiddle/872