1

私は PHP で ExtJs 4.2 を使用して、SQL DB から情報を読み取って行を入力する Store を含むグリッドを作成しています。列の 1 つは行のステータス (オープン、クローズなど) に関連し、もう 1 つは前のコードでテーブル セルの背景色に適用された 16 進数の色の値に関連します。

関連する列のレンダラー構成オプションを使用して、目的の色を含む CSS クラス (別の CSS ファイルと生のテキストの両方) を適用することについて読んだことがありますが、一部として取得される特定の色に取り組んでいます行のデータの。

以下の行に沿った列のコードが機能すると思いましたが、機能しません。

この機能を取得するにはどうすればよいですか? 多くの例では、レンダリングする色を決定するために "if" ロジックを使用していますが、ストアからのデータで提供される 1 つの色のみをレンダリングする必要があります。これらの色がデータベースで変更されたり、新しいステータスが追加されたりする可能性があるため、クラスのリストを持つことは望ましくありません。データからカラー値を呼び出す方が望ましいでしょう。

{text: "Status",
 sortable: true,
 width:100,
 dataIndex: 'Status',
 renderer: function(value, meta, record){
                    meta.attr = 'style="color:#'record.data.StatusColour'"';
                    return value;
    }
}

編集：

Ext.onReady(function(){
    //Define the model
    Ext.define('CaseModel', {
        extend: 'Ext.data.Model',
        proxy: {
            type: 'ajax',
            reader: 'json'
        },
        fields: [
            'Id',
            'Project',
            'Status',
            'StatusColour',
        ]
    });

    // create the Data Store
    var caseStore = Ext.create('Ext.data.Store', {
        model: 'CaseModel',
        autoLoad: true,
        proxy: {
            // load using HTTP
            type: 'ajax',
            url: '<?= $site_url ?>Case/JSON/All',
            reader: {
                type: 'json',
                model: 'CaseModel',
                root: 'data'
            }
        },
        remoteSort: true,
        pageSize: 20
    });

    //Render grid
    Ext.create('Ext.grid.Panel', {
        width: 800,
        store: caseStore,
        title: 'Cases',
        columns: [
            {text: "ID", sortable: true, width: 25, dataIndex: 'Id'},
            {text: "Project", sortable: true, width: 100, dataIndex: 'Project'},
            {text: "Status", sortable: true, width:100, dataIndex: 'Status'
            // renderer goes here
            /*
            , renderer: function(value, meta, record) {
                meta.style = 'background-color: ' + record.get('StatusColour');
                return value;
            }
            */
            },
            {text: 'Details', xtype: 'templatecolumn', width: 50, tpl: '<a class=\"link_btn\" href=\"<?php echo site_url()?>Case/View/{Id}\">Open</a>'}
        ],
        renderTo: Ext.get('CaseGrid'),
        dockedItems: [{
            xtype: 'pagingtoolbar',
            dock: 'bottom',
            itemId: 'PagingToolbar',
            displayInfo: true,
            store: caseStore
        }],
        features: [
            {ftype: 'grouping'}
        ]
    });
});

//Sample JSON data
{
    "total":"17",
    "data":
    [
        {"Id":"64","Project":"test case 1","Status":"New","StatusColour":"ffffff"},
        {"Id":"49","Project":"fgdfgdfgdfg","Status":"New","StatusColour":"ffffff"},
        {"Id":"65","Project":"test case 2","Status":"New","StatusColour":"ffffff"},
        {"Id":"50","Project":"abc","Status":"New","StatusColour":"ffffff"},
        {"Id":"51","Project":"aaaa","Status":"New","StatusColour":"ffffff"},
        {"Id":"67","Project":"test case 4","Status":"New","StatusColour":"ffffff"},
        {"Id":"52","Project":"fffffff","Status":"New","StatusColour":"ffffff"},
        {"Id":"37","Project":"ghfdgh","Status":"New","StatusColour":"ffffff"},
        {"Id":"53","Project":"ddddddddd","Status":"New","StatusColour":"ffffff"},
        {"Id":"29","Project":"Suppress 0 value line items to SOP","Status":"Open","StatusColour":"6dce6d"},
        {"Id":"66","Project":"test case 3","Status":"Open","StatusColour":"6dce6d"},
        {"Id":"16","Project":"Egress locks","Status":"Postponed","StatusColour":"cd7ddb"},
        {"Id":"63","Project":"Public Comment2","Status":"Duplicated","StatusColour":"bf6161"},
        {"Id":"30","Project":"Nominal codes for Stock items","Status":"Duplicated","StatusColour":"bf6161"},
        {"Id":"17","Project":"Details missing","Status":"Closed","StatusColour":"777777"},
        {"Id":"18","Project":"Non-standard finish not priced","Status":"Closed","StatusColour":"777777"},
        {"Id":"19","Project":"POA and VAT Rate","Status":"Closed","StatusColour":"777777"}
    ]
}
4

1 に答える 1