Extjs Grid Cell 내에서 텍스트 색상을 부분적으로 설정합니다

Question

항목에 대한 프로세스 세트의 상태와 관련된 ExtJS 4.2 그리드 열 (PHP MVC 3 웹 사이트의 일부로)이 있습니다.이 열은 공백으로 구분 된 프로세스 당 3 글자 약어 문자열을 반환합니다. 예를 들어 Was Pre Cut는 세탁, 준비 및자를 삭제 한 항목이며, 세탁 된 항목이고, 씻은 항목이 될 것입니다.껍질을 벗기십시오.

그러나 원하는 기능은 프로세스를 을 검색하고 각 항목을 스타일로 검색하여 완료되었는지 여부를 표시하는 것입니다.EN 예제는 Was Scr Pee가 세척되고 준비된 항목을 나타내지 만 절단되지는 않습니다.

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

Answer 1

열 렌더러는 HTML을 출력하는 런타임을 제공하므로 해당 기능의 기능을 실제로 과도합니다.

나는 당신의 문제를 완전히 이해할 수 없지만 여기에 초보자 예제가 확실하지 않습니다.가능한 프로세스 목록을 지정하면 각 레코드의 모든 프로세스를 표시 하고이 레코드에 대한 플래그가 지정된 프로세스를 강조 표시합니다 ( 예제 바이올린) :

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('');
        }
    }]
});

.

와 스타일의 마음의 콘텐츠에.예 :

.processes-cell .process {
    display: inline-block;
    width: 25%;
    text-align: center;
    border: 1px solid white;
}
.processes-cell .process.off {
    background-color: lightpink;
}
.processes-cell .process.on {
    background-color: lightgreen;
}
.processes-cell .x-grid-cell-inner {
    padding: 1px;
}

.

Answer 2

하네 rixo가 나를 때려 눕혔습니다.열의 renderer 속성을 사용하여 작업해야합니다.다른 예 : https : //fiddle.sencha.COM / # Fiddle / 872