मैं डेटा ग्रिड (Ext.grid.Panel) में पंक्तियों में कस्टम सीएसएस कक्षाओं को कैसे जोड़ूं?ExtJS में, डेटा ग्रिड पंक्तियों में कस्टम सीएसएस क्लास कैसे जोड़ें?
मैं ExtJS 4.0 का उपयोग कर रहा हूं। अपने पंक्तियों के सभी के माध्यम से
Ext.fly(myGrid.getView().getRow(0)).addClass('myClass');
बेशक आप अन्य कक्ष के लिए getRow() कॉल स्थानापन्न सकता है, या आप कर सकते थे पाश और यह उचित रूप से जोड़ें:
जिस तरह से यह ग्रिड पर viewConfig परिभाषित करने के लिए है करने के लिए:: फिर अपने कस्टम सीएसएस फ़ाइल की तरह कुछ होते हैं
Ext.create('Ext.grid.Panel', {
...
viewConfig: {
getRowClass: function(record, index, rowParams, store) {
return record.get('someattr') === 'somevalue') ? 'someclass' : '';
}
},
...
});
दस्तावेज़ीकरण को भी देखें: http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.view।टेबल-विधि-getRowClass –
आप कुछ इस तरह कर सकता है।
और फिर आप शैली सकता है कि डिफ़ॉल्ट सीएसएस के अलावा, कार्य करके:
.x-grid3-row-selected .myClass {
background-color: blue !important;
}
भी GridView के एक निजी विधि addRowClass कहा जाता है। अपने Ext.grid.Panel उपयोग getRowClass() के अपने initComponent() में इस प्रकार
grid.getView().addRowClass(rowId, 'myClass');
// private - use getRowClass to apply custom row classes
addRowClass : function(rowId, cls) {
var row = this.getRow(rowId);
if (row) {
this.fly(row).addClass(cls);
}
},
:
initComponent: function(){
var me = this;
me.callParent(arguments);
me.getView().getRowClass = function(record, rowIndex, rowParams, store) {
if (/* some check here based on the input */) {
return 'myRowClass';
}
};
}
यह मूलतः ओवरराइड करता है आप इस अपनी पंक्तियों को एक वर्ग को जोड़ने के लिए के रूप में अच्छी तरह से कर सकते हैं द्वारा उपयोग getRowClass() अंतर्निहित Ext.grid.View का कार्य जिसे किसी भी कस्टम कक्षाओं को लागू करने के लिए समय प्रस्तुत करने के लिए कहा जाता है।
.myRowClass .x-grid-cell {background:#FF0000; }
यह निश्चित रूप काम करने के लिए सिफारिश की है और जिस तरह से उदाहरण के अनुसार, रिकॉर्ड के मूल्यों के आधार पर सशर्त रूप से कक्षा को लागू करने की क्षमता, जो GetRowClass ओवरराइड के लिए एक आम उपयोग है। – dougajmcdonald
इसके अलावा, मुझे पता चला कि 'initComfent'' का उपयोग करने के अनिवार्य दृष्टिकोण के बिना ग्रिड की 'viewConfig' कॉन्फ़िगरेशन में 'getRowClass' को परिभाषित करना अच्छा है :) –
यह अनुशंसित तरीका नहीं है, कृपया viewConfig का उपयोग करें, पहला जवाब देखें। –
उपयोग सबसे आसान तरीका
अपने ग्रिड उपयोग में -
सीएलएस: 'myRowClass'
आपका सीएसएस -
.myRowClass .x-grid-cell {background: # FF0000! महत्वपूर्ण; }
यह बिल्कुल नहीं पूछा गया था। –
आप के बाद डेटा लोड होने के वर्ग में परिवर्तन करना चाहते हैं, तो आप इसे इस तरह कर सकते हैं:
myGridPanel.getView().removeRowCls(rowIndex,"old class");
myGridPanel.getView().addRowCls(rowIndex,"new class");
यहाँ, rowIndex चयनित पंक्ति है, जो आपको किसी घटना कार्यों में प्राप्त कर सकते हैं (जैसा है "चुनते हैं")। इसका उपयोग करके, आप इसे क्लिक करने के बाद पंक्ति के सीएसएस को बदल सकते हैं।
आप भी इस सवाल पर एक नजर है कर सकते हैं: http://stackoverflow.com/questions/7471223/extjs-4-cell-renderer-problem/7476057#7476057 –