javascript - एक्स्टजेस ग्रिड पैनल एक कॉलम पृष्ठभूमि दूसरे कॉलम मूल्य पर रंग परिवर्तन



extjs extjs3 (1)

यह साधारण रेंडरिंग के लिए काम करेगा

सीएसएस:

.custom-column
{
    background-color: #ccc; 
}

जावास्क्रिप्ट:

columns: [{
    dataIndex: 'name',
    renderer: function (value, meta) {
        meta.css = 'custom-column';
        return value;
    }
}]

संपादित करें:

रेंडरिंग के दौरान कस्टम सीएसएस वर्गों को पंक्तियों में लागू करने के लिए getRowClass का उपयोग कर सकते हैं।

प्रतिपादन के दौरान कस्टम सीएसएस वर्गों को पंक्तियों में लागू करने के लिए इस फ़ंक्शन को ओवरराइड करें। इस फ़ंक्शन को सीएसएस वर्ग का नाम वापस करना चाहिए (या रिक्त स्ट्रिंग '' कोई नहीं) जिसे पंक्ति के रैपिंग डिवेल में जोड़ दिया जाएगा। कई वर्ग के नामों को लागू करने के लिए, उन्हें बस स्ट्रिंग के भीतर स्थान-सीमांकित (उदाहरण के लिए 'my-class another-class') वापस करें।

जावास्क्रिप्ट:

columns: [{
    dataIndex: 'ID',
    ...
    tdCls: 'ID' //add table css class
}],

viewConfig: {
    getRowClass: function(record, index) {
        var gender = record.get('insured');

        if (gender === 0) {
        //male
            return 'gender-male';
        } else if (gender === 1) {
        //female
            return 'gender-female';
        } else {
        //unknown
            return 'gender-unknown';
        }
    }
}

अतिरिक्त सीएसएस:

.gender-male .ID {
    background-color: #088da5;
}
.gender-female .ID {
    background-color: #f799af;
}
.gender-unknown .ID {
    background-color: #BADA55;
}

मेरे पास एक्स्टजेस एडिटर ग्रिड पैनल है जिसमें मुझे एक कॉलम के सीएसएस का एक अन्य कॉलम मूल्य के मान के आधार पर बदलना है, तो इसे कैसे करें मैं रेंडरर फ़ंक्शन का उपयोग नहीं कर सकता क्योंकि यह ओनलोड पर काम करता है I जिसमें मेरे पास लिंग कॉलम और आईडी कॉलम हैं, जब लिंग कॉलम पुरुष चुनते हैं तो आईडी का पृष्ठभूमि रंग गुलाबी रंग में बदलना चाहिए, अन्यथा ऐसा नहीं करना चाहिए।

  {
            id: 'value',
            name: 'value',
            header: 'Gender',
            dataIndex: 'insured',
            width: 100,
            editor: new fm.ComboBox({

                typeAhead: true,
                displayField: 'gender',
                mode: 'local',
                transform: 'gender',
                triggerAction: 'all',
                selectOnFocus: true,
                forceSelection: true,
                stripeRows: true,
                lazyRender: true,
                listeners: {

                    }
                }
            })
        },
  {
        id: 'ID',
        name: 'ID',
        header: 'ID',
        dataIndex: 'ID',
        width: 100,
        hidden: true,
        editor: new fm.TextField({
            allowBlank: true,
            maxLength: 500
        })
    }




extjs3