ExtJS ग्रिड में केवल एक पंक्ति के टेक्स्ट रंग को कैसे बदलें?

Question

मैंने निम्नलिखित ExtJS ग्रिड बनाया है।

मैं दूसरी पंक्ति में सभी कोशिकाओं का टेक्स्ट रंग बदलना चाहता हूं।

हालांकि, मैं केवल पता कर सकते हैं कि कैसे यहाँ शो के रूप में, शीर्ष पाठ सहित सभी पंक्तियों में सभी कोशिकाओं के रंग बदलने के लिए:

var myData = [ 
    [4, 'This is a whole bunch of text that is going to be word-wrapped inside this column.', 0.24, 3.0, '2010-11-17 08:31:12'], 
    [16, 'Computer2-this row should be red', 0.28, 2.7, '2010-11-14 08:31:12'], 
    [5, 'Network1', 0.02, 2.5, '2010-11-12 08:31:12'], 
    [1, 'Network2', 0.01, 4.1, '2010-11-11 08:31:12'], 
    [12, 'Other', 0.42, 5.0, '2010-11-04 08:31:12'] 
]; 

var myReader = new Ext.data.ArrayReader({}, [{ 
     name: 'id', 
     type: 'int' 
    }, { 
     name: 'object', 
     type: 'object' 
    }, { 
     name: 'status', 
     type: 'float' 
    }, { 
     name: 'rank', 
     type: 'float' 
    }, { 
     name: 'lastChange', 
     type: 'date', 
     dateFormat: 'Y-m-d H:i:s' 
    }]); 

var grid = new Ext.grid.GridPanel({ 
    region: 'center', 
    style: 'color:red', //makes ALL text in grid red, I only want one row to be red 
    store: new Ext.data.Store({ 
     data: myData, 
     reader: myReader 
    }), 
    columns: [{ 
      header: 'ID', 
      width: 50, 
      sortable: true, 
      dataIndex: 'id', 

      hidden: false 

     }, { 
      header: 'Object', 
      width: 120, 
      sortable: true, 
      dataIndex: 'object', 
      renderer: columnWrap 

     }, { 
      header: 'Status', 
      width: 90, 
      sortable: true, 
      dataIndex: 'status' 
     }, { 
      header: 'Rank', 
      width: 90, 
      sortable: true, 
      dataIndex: 'rank' 
     }, { 
      header: 'Last Updated', 
      width: 120, 
      sortable: true, 
      renderer: Ext.util.Format.dateRenderer('Y-m-d H:i:s'), 
      dataIndex: 'lastChange' 
     }], 
    viewConfig: { 
     forceFit: true 
    }, 
    title: 'Computer Information', 
    width: 500, 
    autoHeight: true, 
    frame: true, 
    listeners: { 
     'rowdblclick': function(grid, index, rec){ 
      var id = grid.getSelectionModel().getSelected().json[0]; 
      go_to_page('edit_item', 'id=' + id); 
     } 
    } 
}); 

क्या मैं करने के लिए मुझे क्या करना होगा दूसरी पंक्ति में केवल कोशिकाओं के पाठ रंग को बदलें?

Answer 1

सुनिश्चित नहीं है कि यह मदद करता है, लेकिन आप कोशिश कर सकते हैं। मैंने स्थानीय रूप से कोशिश की, यह दूसरी पंक्ति में सभी पात्रों का रंग बदल देता है।

ग्रिड से श्रोता जोड़ें:

listeners:{ 
    viewready: function(g){ 
     g.getView().getRow(1).style.color="#f30"; 
    } 
} 

"viewready, आप GridView से getRow() विधि का उपयोग कर पंक्ति का div प्राप्त कर सकते हैं जब उसके बाद सामान्य है रंग बताए (या अतिरिक्त वर्ग को जोड़ने, अगर आप की जावास्क्रिप्ट। चाहते हैं)

चीयर्स

संपादित

मुझे एहसास है कि यह काम नहीं कर रहा है अगर आपका स्टोर डेटा को दूरस्थ रूप से पुनर्प्राप्त कर रहा है। देखें तैयार है लेकिन डेटा तैयार नहीं है। यह विधि असफल हो जाएगी।

Answer 2

आप getRowClass को ओवरराइड करना चाहते हैं, जो ग्रिडपैनेल के viewConfig में पारित किया गया है। एक उदाहरण GridPanel के एपीआई डॉक्स में प्रदान की जाती है:

viewConfig: { 
     forceFit: true, 

    // Return CSS class to apply to rows depending upon data values 
     getRowClass: function(record, index) { 
      var c = record.get('change'); 
      if (c < 0) { 
       return 'price-fall'; 
      } else if (c > 0) { 
       return 'price-rise'; 
      } 
     } 
    }, 

GridView विधि मौजूद है, इसलिए अधिक जानकारी के लिए एपीआई में वहाँ देखने के लिए: करने के लिए कस्टम सीएसएस वर्गों को लागू करने के

getRowClass(Record record, Number index, Object rowParams, Store store) 

अवहेलना इस समारोह प्रतिपादन के दौरान पंक्तियां। आप पंक्ति 0 पैरामीटर पैरामीटर का उपयोग कर को प्रदान करने के तरीके को अनुकूलित करने के लिए वर्तमान पंक्ति के लिए पंक्ति टेम्पलेट पर कस्टम पैरामीटर भी प्रदान कर सकते हैं। यह फ़ंक्शन सीएसएस क्लास नाम (या किसी के लिए खाली स्ट्रिंग ') को वापस नहीं करना चाहिए जो पंक्ति के रैपिंग div में जोड़ा जाएगा। एकाधिक कक्षा नामों को लागू करने के लिए, उन्हें स्ट्रिंग (उदाहरण के लिए, 'मेरी श्रेणी की दूसरी श्रेणी') के भीतर स्थान-सीमांकित करें।

आप index तर्क का उपयोग कर सीएसएस को एक निश्चित पंक्ति पर लागू कर सकते हैं।