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




extjs extjs3 (2)

मेरे पास एक्स्टजेस एडिटर ग्रिड पैनल है जिसमें मुझे एक कॉलम के सीएसएस का एक अन्य कॉलम मूल्य के मान के आधार पर बदलना है, तो इसे कैसे करें मैं रेंडरर फ़ंक्शन का उपयोग नहीं कर सकता क्योंकि यह ओनलोड पर काम करता है 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
        })
    }

Answers

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

सीएसएस:

.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;
}

उदाहरण के अनुसार docs.sencha.com/extjs/4.2.0/extjs-build/examples/grid-filtering/… अपना स्वयं का बूलियनफ़िल्टर बनाएं और आपको शर्त जोड़ें। नीचे मेरा स्निपेट देखें।

Ext.define('MyFilter.CustomBooleanFilter', {
   extend: 'Ext.ux.grid.filter.StringFilter',
   alias: 'gridfilter.customboolean',

   validateRecord : function (record) {
       var rValue = record.get(this.dataIndex),
           fValue = this.getValue();
       return rValue == fValue || rValue == (fValue == "1" || "true".indexOf(fValue.toLowerCase()) == 0 || "yes".indexOf(fValue.toLowerCase()) == 0);
    }
});

यहां कामकाजी डेमो देखें। https://fiddle.sencha.com/#fiddle/1f5l

अगर आप इसकी तलाश नहीं कर रहे हैं तो मुझे बताएं। मैंने अपनी समझ के अनुसार क्या किया है संपादित करें: लेकिन मुझे लगता है कि यह वही है जो आप चाहते हैं, फिर अपने इच्छित पाठ को बदलने के लिए बूलियन फ़िल्टर का उपयोग करें। हां और नहीं की तरह उपयोगकर्ता के प्रवेश के मुकाबले यह अधिक सुविधाजनक है। जैसा कि आपके पास केवल दो मान हैं।







javascript extjs extjs3