تعيين لون النص جزئيا داخل خلية شبكة إكستجس

Question

لدي عمود إكستجس 4.2 الشبكة (كجزء من موقع فب مفك 3) المتعلقة بحالة مجموعة من العمليات للعناصر.يعرض هذا العمود سلسلة من الاختصارات المكونة من ثلاثة أحرف لكل عملية تم إكمالها ، مفصولة بمسافات ، على سبيل المثال Was Pre Cut سيكون العنصر الذي تم غسلها ، أعدت وقطع ، و Was Scr Pee سيكون عنصرا تم غسله وتنظيفه وتقشيره.

ومع ذلك ، فإن الوظيفة المطلوبة هي استرداد الكل العمليات ، وأسلوب كل إدخال لإظهار ما إذا كان قد تم الانتهاء منه;على سبيل المثال سيكون <green>Was Pre</green> Cut يشير إلى عنصر تم غسله وإعداده ولكن لم يتم قطعه.

هل هذا ممكن?هل هذا شيء حيث أقوم بتمرير القيم وتنسيقات الأنماط المقابلة لكل عملية ككائن صفيف بدلا من سلسلة, وإنشاء التنسيق المطلوب عبر عارض الخلية, أم أنني متفائل بشأن قدرة عارض عمود الشبكة?

Answer 1

يمنحك عارض العمود وقت تشغيل يقوم بإخراج هتمل ، وبالكاد يمكنك المبالغة في تقدير إمكانيات ذلك...

لست متأكدا من أنني أفهم تماما إشكالية الخاص بك ، ولكن هنا مثال بداية.بالنظر إلى قائمة العمليات المحتملة ، فإنه يعرض جميع العمليات لكل سجل ، ويسلط الضوء على العمليات التي تم وضع علامة عليها لهذا السجل (مثال كمان):

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

ها نعم ريكسو ضربني عليه.انه على حق تحتاج إلى العمل مع renderer الملكية للعمود الخاص بك.أنا خلقت كمان كذلك في حال كنت قد تحتاج إلى رؤية مثال آخر: https://fiddle.sencha.com/#fiddle/872